JotForm Does Not Show Correctly

My version: Xara Designer Pro X 11.2.5.42127 DL x64 Dec 9 2015

As its been a while I think this work path is correct. I first attempted to build using using the built-in JotForm widget. That didn't play nice at all. I then went to JotForm and built a contact form. Placed the code into a placeholder... but only part of the form was shown on the page with lots of white space available. Oddly the form as it appears works fully as long as one keeps filling the blocks and tabbing down the form.

I contacted JotForm and they evaluated the code and sent the following reply:

" I did check your webpage where you have embedded your form and found that the form is not displayed in full length because of the height of the div class is 480px and the height of the form is more.
To solve this problem, I would suggest you to please inject the following custom css code in webpage (NOT in form) and that should solve your problem:
.xr_noreset {
height: 1200px !important;
overflow: visible !important;
}
Hope this helps. "

I attempted this but without success... most likely placed in the wrong area... tried in the page head and body both.

I did have some success by adjusting the actual HTML from 480 to 1200 as follows:

<div class="xr_noreset " style="position: absolute; left: 450px; top: 526px; width: 440px; height: 1200px; overflow: hidden;">
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/70001542013131" frameborder="0"i style="width:100%; height:1000px; border:none;" scrolling="no"> </iframe>

This allowed me to see most but not all of the form. Again, the form functions as long as you keep tabbing down the page. Adjusting the height greater than 1200 did not gain anything.

Of course this method tends to be cumbersome as a manual repair is necessitated after any other Xara change and upload.

Location of page is: http://www.rotorootersewerdrain.com/contact-a.html

Primary question is how do I fix so the complete form is visible. Secondly, where inside of Xara do I place the correct code.

With luck attachment ScreenShot34 will come alone showing how it's created with Xara. The link above takes you to the modified version.

Any thoughts you have will be greatly appreciated.

Randy


Attachment 116173

Randy, if you are modifying the 1200px after publishing - don't. That way lies madness.
The form you've created occupies a natural size of 680 x 1074 px; you've squeezed it to 440px wide and therefore its depth is not 1134px.

The Placeholder has to match that size and this is set up in Xara and not through code.

The IFRAME code goes in the body of the Placeholder rectangle and not the head part.

Acorn

Quote:

---

Originally Posted by Acorn

Randy, if you are modifying the 1200px after publishing - don't. That way lies madness.

---

Fully agree. Made the change in Xara to the placeholder size... but still don't have the contact bar showing... Not really a problem. Perhaps it's just the way it works in Xara.

Thanks for taking the time to look for me.

I've now re-reviewed JotForm at their site and see that there is a much easier way... where JotForm does all the work. Just need to find the way for Xara to inject target ="_blank" into the hyperlink so the form opens in a new window. Only found one message here where the author says the link had to be hand massaged... but didn't say how or where. Seems like a truly simple task for Xara to do on its own.

Randy

Randy, any link can have a target applied through Web Properties > Link > Open link: here pick New window or tab (_blank).

Acorn

Again,

Thanks for all your assistance to the community and putting up with me.

I did finally find the correct box but it was another hour plus after I sent the reply above.

Randy