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

    Best embed method for form with conditions

    Asked by riverinatradies on June 29, 2015 at 04:13 AM

    I'm having problems with the form on the page below. It has a number of conditions applied to it to hide/show fields.

    When embedded via the normal embed method or via the Dreamweaver method (as that is the software I am using) it causes conflicts on my page with other javascripts so I cannot use those methods.

    The iframe method does not cause conflicts, but as it has a fixed height it looks awful on large screen resolutions as there is a huge amount of empty space underneath the form.

    Is there another embed method I should try or is there some custom CSS I can add to my form to adjust the height according to the screen resolution ?

    I would prefer a solution that doesn't involve scroll bars if possible, they look awful and are not user friendly.

    Page URL:
    http://www.rivmedia-website-proof.com/list-your-business-wagga

    embed method method height conflicts number of conditions
  • Profile Image
    JotForm Support

    Answered by Welvin on June 29, 2015 at 09:06 AM

    Iframe method is the best way when our default Javascript method will create a conflict in your website. But yes, the iframe method doesn't have a dynamic height so when there are hidden fields, the form would come with an empty space at the bottom part.

    I remember we have some workaround for the iframe method, but not sure. I'm looking into that, but for now, I think you should try the jQuery no-conflict method:

    https://api.jquery.com/jquery.noconflict/

    So, you have to embed the form exactly like this:

    <script>jQuery.noConflict();</script> 

    <script type="text/javascript" src="//form.jotform.co/jsform/51731201237847"></script>

     

    Try it and update us here for the result.

    Thanks

  • Profile Image

    Answered by riverinatradies on June 29, 2015 at 06:49 PM

    Tried the no conflict script as instructed but its still causing problems, mainly that the sub-menus aren't working - there are dropdown menus under the "directory" and "advertise" tabs that aren't working.

    If you find the workaround for iframe please let me know!

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 29, 2015 at 10:55 PM

    @riverinatradies

    You're right, it seems creating more conflicts. 

    You might want to consider popup embed or lightbox for now as we are trying to find a solution. This will also work.

    Thanks!

  • Profile Image

    Answered by riverinatradies on June 29, 2015 at 11:50 PM

    If I were to use a popup option instead which is better? popup or lightbox?

    Are they both responsive?

    And I notice that the default window size for the popup option is only 700 x 500 which is quite small on a desktop. If I make it larger will it still work/adjust for smaller resolutions?

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 30, 2015 at 03:44 AM

    @riverinatradies 

    I would suggest to use popup since it would fit perfectly on mobile screens despite of any window size set on the code.

    The lightbox is also good since it opens the form nicely. I think it will be displayed properly on mobile screens too.

  • Profile Image

    Answered by riverinatradies on June 30, 2015 at 04:05 AM

    ok, I've changed it to the popup method on the following page:

    http://www.riverinatradies.com.au/list-your-business

    I think this might be a better solution anyway, as I have 3 similar forms and this saves me creating 3 pages to go with it, I can just link to them from the one page.

    I have changed the size to 800 x 800 is there any way to confirm that this isn't a problem on all resolutions? As it's a popup window I can't check how I normally do with Screenfly.

    Also, is there a way to make the popup display in the centre of the screen rather than top left?

    Not a big deal if it isn't, just think it would look better

  • Profile Image
    JotForm Support

    Answered by Welvin on June 30, 2015 at 07:55 AM

    Here are some screenshots of the popup:

    On a tablet.

    On a smartphone.

     

    To center the popup, you can add a parameter in the codes. Add left=300 after the height parameter. Here's a screenshot:

    Thanks

  • Profile Image

    Answered by riverinatradies on June 30, 2015 at 06:11 PM

    Thanks, but what about other screen resolutions on desktops?

    Your code above for example to centre the popup will only work for a certain screen resolution, not all. My desktop for example has a 1920 x 1080 resolution so the above doesn't centre the popup for me. ?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 30, 2015 at 10:22 PM

    The problem with this solution is that the user's resolution is not taken into consideration. It means that no matter what value you use for the top and left properties, the pop-up cannot always be centered on all computers.

    Some extra JavaScript will be needed to properly implement an auto-centering popup, but as we know, JavaScript cannot be inserted in a form created with Jotform.

    Using the form's full source code embed on your website will also provide dynamics to influence the form position base on the screen resolution. But then again that is using JavaScript code.

    Hope this help also. Let us know if you need further assistance on this.

    Thanks.

     

  • Profile Image

    Answered by riverinatradies on June 30, 2015 at 11:32 PM

    That's fine, I just try to be a perfectionist where possible :-)

    Thanks for explaining that so thoroughly

  • Profile Image
    JotForm Support

    Answered by jonathan on July 01, 2015 at 12:34 AM

    We're glad to be of help. =)

    Feel free to contact us again anytime should you require assistance on JotForm

     

    Cheers