Best embed method for form with conditions

  • riverinatradies
    Asked on June 29, 2015 at 4: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.

  • Welvin Support Team Lead
    Replied on June 29, 2015 at 9: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

  • riverinatradies
    Replied on June 29, 2015 at 6: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!

  • Elton Support Team Lead
    Replied 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!

  • riverinatradies
    Replied 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?

     

  • Elton Support Team Lead
    Replied on June 30, 2015 at 3: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.

  • riverinatradies
    Replied on June 30, 2015 at 4: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

  • Welvin Support Team Lead
    Replied on June 30, 2015 at 7: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:

    Best embed method for form with conditions Image 1 Screenshot 20

    Thanks

  • riverinatradies
    Replied on June 30, 2015 at 6: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. ?

  • jonathan
    Replied 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.

     

  • riverinatradies
    Replied 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

  • jonathan
    Replied on July 1, 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