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

    Jotform embed conflicting with something - SOS

    Asked by tannercwc on October 06, 2016 at 09:15 AM

    Hi,

    We have 2 jotforms on the site, one uses a modal (lightbox) and the other is displayed in a specific area.  It looks like something has "broken" and it seems the jotforms are causing a conflict with something and jQuery breaks (for example, the mobile menu no longer works on the homepage) when booking form bar jotform (at the bottom of the first homepage photo) is enabled.

     The dev theme with jotforms in can be viewed using this URL: http://charonneruthglass.myshopify.com/?key=1dbf81e9f00843d8bfd60ee780ae99a6e446947627dba3133b06ff24abc3b405&preview_theme_id=159595271

    FRONTEND PASSWORD IS: test

    Site due to go live asap so any help would be gratefully appreciated, please SOS!

    Page URL:
    http://charonneruthglass.myshopify.com/?key=1dbf81e9f00843d8bfd60ee780<br/>ae99a6e446947627dba3133b06ff24abc3b405&amp;preview_theme_id=159595271

    js conflict embedded form
  • Profile Image

    Answered by Irshad on October 06, 2016 at 10:57 AM

    The URL, which you mentioned redirect to another page. I tried to inspect that page, and seems there are some script conflict, and probably that is the reason of the issue which you are facing.

    I would suggest you to re-embed your form with Iframe embed code. And that should resolve all those scripting related issues on your webpage.

    If you have any query, or need further assistance, feel free to revert back.

    Thanks.

  • Profile Image

    Answered by tannercwc on October 06, 2016 at 12:18 PM

    Hi

    Thanks for your reply.

    The reason we used source code to begin with is so that we could have the form fields styled inline like the screenshot attached. 

    How can we style the form to match the draft attached using the iframe method as we are having some problems with getting things to sit on one line, you will see if you visit the homepage again.

    URL: http://charonneruthglass.myshopify.com/
    FRONTEND PASSWORD IS: test

    Your help would be very much appreciated as we are waiting to make the site live.

  • Profile Image
    JotForm Support

    Answered by Mike on October 06, 2016 at 03:29 PM

    To fix the fields' borders and get something like this you can add the next CSS.

    To the Checkbox in Dropdown widget:

    .selecter .selecter-selected {
    border-radius: 0 !important;
    border: 1px solid #af60bb;
    padding-top: 7px;
    padding-bottom: 7px;
    }

    To the Date Picker widgets:

    .input-group-addon, .form-control {
    border-radius: 0 !important;
    border: 1px solid #af60bb;
    }

    To the form:

    .form-textbox, .form-all .form-submit-button {
    border-radius : 0 !important;
    border : 1px solid #af60bb;
    }

    Thank you.