JotForms not showing in V10

[andymack]

I am 'converting' (opening them with V10 and exporting them) my version 9 websites into version 10 and everything looks great except JotForms are not displaying. The form displays for one second then it vanishes. I experimented with layers etc, I completely re-wrote them using JotForm and then tried the built-in JotForm widget, but every website I post, loses the forms.
I like to think I know a lot about Xara now, but this has me stumped...
On a side note, all the mobile sites I re-post from V10, now 'locks' the webpage on iPhones, it has fixed the problem I have always had with creating mobile sites with Xara, and that is BEFORE I even start using the new 'responsive' options offered in V10. Obviously, this new responsive function with Xara is what has fixed my fixed-width problems with iPhones. One major problem solved... and one minor one created. Never mind, I am sure GW or Skech will put that right for me! Or any of you other genius's on here.

[Cloud]

I have not created any sites in v10 yet but I tried this and this is how I fixed it.

The code that jotform supplies is usually as follows:

<script type="text/javascript" src="http://form.jotformeu.com/jsform/20944726024350"></script>

And this code is displaying the form for a fraction of a second and then it disappears.

The solution:

Instead of grabing this default code instead (through the jotform site) go to 'embed form' and select 'source' (the one with the gear icon) and then use this code instead, it will look something like this:

<script src="http://max.jotfor.ms/static/jotform.js?3.2.1586" type="text/javascript"></script>
<script type="text/javascript">
JotForm.init(function(){
JotForm.highlightInputs = false;
});
</script>
<link href="http://max.jotfor.ms/static/formCss.css?3.2.1586" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://max.jotfor.ms/css/styles/pastel.css?3.2.1586" />
<link type="text/css" media="print" rel="stylesheet" href="http://max.jotfor.ms/css/printForm.css?3.2.1586" />
<style type="text/css">
.form-label{
width:200px !important;
}
.form-label-left{
width:200px !important;
}
.form-line{
padding-top:14px;
padding-bottom:14px;
}
.form-label-right{
width:200px !important;
}
.form-all{
width:625px;
background:transparent;
color:rgb(82, 75, 58) !important;
font-family:'Verdana';
font-size:14px;
}
</style>

<link type="text/css" rel="stylesheet" href="http://jotformeu.com/css/styles/buttons/form-submit-button-carbon.css?3.2.1586"/>
<form class="jotform-form" action="http://submit.jotformeu.com/submit/20944726024350/" method="post" name="form_20944726024350" id="20944726024350" accept-charset="utf-8">
<input type="hidden" name="formID" value="20944726024350" />
<div class="form-all">
<ul class="form-section">
<li class="form-line" id="id_1">
<label class="form-label-left" id="label_1" for="input_1"> Your Name </label>
<div id="cid_1" class="form-input">
<input type="text" class=" form-textbox" data-type="input-textbox" id="input_1" name="q1_yourName" size="45" value="" />
</div>
</li>
<li class="form-line" id="id_6">
<label class="form-label-left" id="label_6" for="input_6"> Customer Type </label>
<div id="cid_6" class="form-input">
<select class="form-dropdown" style="width:305px" id="input_6" name="q6_customerType">
<option value=""> </option>
<option selected="selected" value="Please select"> Please select </option>
<option value="Domestic"> Domestic </option>
<option value="Commercial"> Commercial </option>
</select>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-left" id="label_3" for="input_3"> Your Email </label>
<div id="cid_3" class="form-input">
<input type="text" class=" form-textbox" data-type="input-textbox" id="input_3" name="q3_yourEmail" size="45" value="" />
</div>
</li>
<li class="form-line" id="id_4">
<label class="form-label-left" id="label_4" for="input_4"> Your Phone Number </label>
<div id="cid_4" class="form-input">
<input type="text" class=" form-textbox" data-type="input-textbox" id="input_4" name="q4_yourPhone" size="45" value="" />
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-left" id="label_5" for="input_5"> Your Address </label>
<div id="cid_5" class="form-input">
<textarea id="input_5" class="form-textarea" name="q5_yourAddress" cols="40" rows="6"></textarea>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="margin-left:206px" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button form-submit-button-carbon">
Submit
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="20944726024350" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "20944726024350-20944726024350";
</script>
</form>



Using this code solves the problem.

[Cloud]

BTW apoligies for the long code but it gets to the point. The drawback btw is that unlike the short code which creates the form on the fly; allowing you to make a change on the jotform site and it just updates the form on your site, with the long code you have to embed again after you make a change, but that shouldn't be that often, if ever.

[andymack]

Skech nailed it as ever and it was as quick as making a phone call to an expert! Thanks Skech, problem fixed. Great forum here.

[Cloud]

No problems, also as I'm in the mood for it; you must have seen the little resize icon on the text fields within jotform forms, they're ok on dynamic websites where the page can resize but on xara sites that's just not possible. some people don't notice them but others will resize and ofcourse the form ends up ruining the nice layout you spent so long to fix, just add the following bit of css to the code (just put it before the </style> near the top of the form, seems to work there nicely. and it will get rid of that resize option.

textarea {
resize: none;
}

[andymack]

Thanks Skech, I will heed your advice and see if they fix this issue later, as I do sometimes need to adjust forms slightly in the JotForm portal without having to open Xara.

[bb2]

Hi, we have logged this problem and are looking to resolve it within the 1st patch.

[jhorta32]

Hi skech, andymack, same problem here but i have the same problem with a twitter widget, "skech" any suggestion?

This is the original code for the twitter widget:

<a class="twitter-timeline" width="390" height="300" href="https://twitter.com/salesjoint" data-widget-id="420685323694125056">Tweets by @salesjoint</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(id)){js=d.createElement(s);js.id=id;js.src=p+" ://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs");</script>

thank you,

[Skip]

Same problem here with the Twitter widget. Sometimes a brief flash, then text only. Sometimes it shows in local preview but never after it's been published. Patch has been installed but bug still exists.

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/WebRadioClassic" data-widget-id="465402578335834112">Tweets by @WebRadioClassic</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(id)){js=d.createElement(s);js.id=id;js.src=p+" ://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs");</script>

[Skip]

This may help some for very simple sites. The Twitter widget (WD10/64 bit) only shows up in the Pasteboard background layer when the site is published.
If it is moved to any other layer it will show up in preview mode but not after being published.

Hope Xara can fix this bug soon