What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    I have embedded my forms on wordpress but they are not responding well

    Asked by ifeanyiibekwe on September 08, 2015 at 09:29 AM

    helo support team thank you for your previous response. i have embedded my forms into wordpress using embed form plugin but the forms are not responsive and when i check them on jotform preview it works perfect. example on the first brake page the back button appears and also some field dont appear. like this page " http://eyesondubai.com/hotel-reservation/ " when children dropdown list is selected its meant to show sow other options and in " http://eyesondubai.com/air-ticket-bookings/ " page, the return date doesnt appear as an option and the back button is visible.. please kindly look to this

    thanks

    Page URL:
    http://eyesondubai.com/air-ticket-bookings/

    My Forms JotForm preview dropdown list
  • Profile Image
    JotForm Support

    Answered by Kiran on September 08, 2015 at 11:29 AM

    I see that the form is being embedded using Javascript method and seems to be having conflicts with other scripts on your website. Could you try using the following WordPress plugin and check if that works?

    http://apps.jotform.com/app/form_generator_for_wordpress

    Let us know if you need any further assistance. We will be happy to help.

  • Profile Image

    Answered by ifeanyiibekwe on September 08, 2015 at 07:36 PM

    this http://apps.jotform.com/app/form_generator_for_word'press didn't solve the issue, it's really a script issue. how can i get it corrected.

    your respond its very creative i appreciate...

    thanks ....

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 09, 2015 at 12:20 AM

    Hi,

     

    Can you try to re-embed your form using the iFrame embed method and see if it will work? To get the iFrame embed code, you can check the instructions in this article: Getting the Form iFrame Code.

     

    Do get back to us if the issue still persists.


    Regards.

  • Profile Image

    Answered by ifeanyiibekwe on September 09, 2015 at 05:49 AM

    I have used iframe and it hides below fields when expanding if conditions are selected.

    one of your support team advice me to use embedded form plugin. 

    please is there any other way i can solve this.

    thanks.

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 09, 2015 at 07:46 AM

    I checked your site and I noticed that it is still in script embed method. Normally, iFrame embed method resolves conflicts between our scripts and your site scripts. Can you try embedding the form using the iFrame embed code only without script tag (you can then just adjust the height of the iFrame):

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/52314038443953" frameborder="0" style="width:100%; height:848px; border:none;" scrolling="no"></iframe>

     

    Remove this part:

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}if(window.location.href && window.location.href.indexOf("?") > -1) {var ifr = document.getElementById("JotFormIFrame");var get = window.location.href.substr(window.location.href.indexOf("?") + 1);if(ifr && get.length > 0) {var src = ifr.src;src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;ifr.src = src;}}</script>

     

    If possible can you retain at least one of the forms in iFrame embed method so we can further check the issue regarding the fields that are being hidden when form is expanding based on the conditions of the form.

  • Profile Image

    Answered by ifeanyiibekwe on September 09, 2015 at 10:39 AM

    i have used the iframe again but the form goes inside while trying to expand below . example is when you go to: http://eyesondubai.com/hotel-reservation/ and when you select children its meant to expand for other options but when you select 10 children the form goes inside the parameter set for the height.

    please kindly assist .

  • Profile Image
    JotForm Support

    Answered by Boris on September 09, 2015 at 01:51 PM

    Thank you very much for the link, we can see the issue. The iFrame embed has resolved the conflict issues with your website, which is great, but iFrame embedded forms are not automatically resizable - we need to set its height directly in the embed code.

    I would suggest increasing the height in the embed code from current 600px to about 900px, and the form should be long enough to hold the expanded data:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/52314038443953" frameborder="0" style="width:100%; height:900px; border:none;" scrolling="no"></iframe>

    Please let us know how it goes after increasing the iFrame's height. Thank you.

  • Profile Image

    Answered by ifeanyiibekwe on September 09, 2015 at 02:53 PM

    thanks for your suggestion, the form doesn't look proper when you have alot of space set to be the height and waiting for a condition or an option that will make the space to be occupied by fields.

    please would like you to kindly assist.

  • Profile Image
    JotForm Support

    Answered by Kiran on September 09, 2015 at 04:33 PM

    I've tried using the Wordpress oEmbed plugin on my local installation of WordPress and see that the form is displayed responsive and seems to be working fine.

    Please try installing this plugin and see how it works. You'll need to provide the direct URL of your JotForm in your post or page. Also, please make sure that you have deactivated other JotForm embed plugins. 

    Let us know if you need any further assistance. We will be happy to help.

    Thanks!

  • Profile Image

    Answered by ifeanyiibekwe on September 10, 2015 at 05:48 AM

    Thanks i have applied Wordpress oEmbed plugin and the script is working fine. the only challenge is the height of the form. the background height is too long and doesn't look professional.

     

    example: http://eyesondubai.com/air-ticket-bookings/ 

    please kindly assist.  

    thanks in  anticipation.

  • Profile Image
    JotForm Support

    Answered by Kiran on September 10, 2015 at 10:32 AM

    I'm checking on this issue. Please allow me some time to check on this and get back to you later.

    Thank you for your patience.

  • Profile Image

    Answered by ifeanyiibekwe on September 12, 2015 at 05:42 AM

    please kindly remember your check on my issue....

  • Profile Image
    JotForm Support

    Answered by Boris on September 12, 2015 at 05:02 PM

    The oEmbed plugin automatically embeds your form, and set its minimum height to 1000px. This is the minimum required height on your form, as can be seen from the following screenshot on Google Chrome:

    If your form gets longer than the minimal height required, oEmbed method will automatically make a scrollbar appear on your form - so that your users can scroll down the form to fill all the parts:

    If I understand you correctly, you would wish that your form automatically resizes itself, rather than having a scrollbar. Unfortunately, the plugins for embedding forms to Wordpress do not allow automatic form resizing.

    Only our script embed method normally allows automatic form resizing, but this script embed wasn't working on your website due to scripting conflicts reported earlier. Because it was conflicting with scripts on your page, we have suggested using the iFrame embed or Wordpress plugins instead - to avoid scripting conflicts. Without the script embed, we can only either:

    1. Make the form always long enough to fit all its content - there will be blank space under the form when not all fields are visible. (i.e. only 1 passenger selected.)

    2. Have a scrollbar when the form is longer than its minimal height. There won't be blank space under the form, but we will have a scrollbar when the other fields are conditionally shown.

    3. Split some fields to additional pages by using the Page Break tool, and use conditional logic to skip to a page based on what the user has selected for Passengers and Children. Your form would have multiple pages, which would result in each page being shorter.

    The oEmbed method implements approach number 2 - it displays a scrollbar when the content is longer than the form's minimal pre-set height. I hope this helps.

  • Profile Image

    Answered by ifeanyiibekwe on September 14, 2015 at 01:19 PM

    thanks for your reply, my challenge is can i set the height of the forms, because my backgroud image have covered a lot of space and it doesn't professional. please i need your advice... 

  • Profile Image
    JotForm Support

    Answered by Kiran on September 14, 2015 at 03:03 PM

    As already explained by my colleague, the script embed method can adjust the height of the form automatically. Since the form is conflicting with other scripts on the webpage, it is suggested to use iframe. I've tried testing the form by embedding on my local WordPress installation using various methods. Since the pages are not having the same height and includes hidden fields, the form will be embedded by taking the longer page height. As already mentioned, please try to split some fields to additional pages to see if that helps. If I find something helpful, I'll let you know here.

    Please let us know if you need any further assistance. We will be happy to help.