How to keep the jotform code from changing existing webpage elements.

  • Profile Image
    rocketboy
    Asked on May 12, 2015 at 12:55 PM

    The contact form on the page http://cleburneorthopedics.com/contact-us.html is breaking the navigation bar. In other words the last page on the right of the primary nav bar is dropping to the next line which is the "contact" link. Which code within the jotForm would be causing this or is there a way to keep this from happening? I tried taking little code pieces out at a time to see if I could troubleshoot the issue but seems the contact form is the root cause. Any help would be greatly appreciated.

     

    Thank You

     

    ***Issue only happening on Google Chrome, safari. not happening on IE.

  • Profile Image
    Jeanette
    Answered on May 12, 2015 at 02:45 PM

    The problem is that you are using the full source code of the form and this is conflicting with some JS libraries in your page (Jquery)

    Please remove the current code and embed the form using the iFrame Code

     

  • Profile Image
    rocketboy
    Answered on May 12, 2015 at 03:50 PM

    Thank you for your response. When using this Iframe code, how would you work with the css styling? On some computers the wrong colors are showing up on my drop down boxes.

     

    When I was using the source code this css code solved the issue:

    select.form-dropdown {
        background-color: white;
        height: 28px;
        width: 240px;
    }
    select.form-dropdown > option {
        background-color: white;
    }

     

    Once this was added to the css inside my jotform account it worked. I was adding this code in my actual website style.css. 

  • Profile Image
    Chriistian
    Answered on May 12, 2015 at 04:41 PM

    Hi rocketboy,

     

    You can add those CSS by using Inject Custom CSS. Please see this guide on How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.

     

    Regards.