My form changes when embedded on Instapage

  • Profile Image
    rcbe222
    Asked on December 06, 2017 at 03:25 PM

    When I embed my form onto Instapage it changes all of the spacing and alignment. I've tried embedding with all the different methods and nothing works. Is this an error on Instapage's end or on JotForms end? 

  • Profile Image
    Welvin
    Answered on December 06, 2017 at 05:17 PM

    It is likely because the responsive aspect of the form is fired up due to the width of the form container. Would you mind sharing us the page? This way, we can check what's causing the problem. 

  • Profile Image
    rcbe222
    Answered on December 06, 2017 at 05:19 PM

    Yes absolutely. The form i created has rounded edges and the content isn't as spaced out. 


    http://www.dentdoctorlex.com/


    As you can see on the URL the form does not look the same as the one I have designed. 

  • Profile Image
    EltonCris
    Answered on December 06, 2017 at 08:06 PM

    The form is mobile responsive. When you embed it in a small container, the form adjusts into its responsive layout. 

    If you don't want that, inject this CSS codes to your form.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){.form-address-city, .form-address-line, .form-address-postal, .form-address-state, .form-address-table, .form-address-table .form-sub-label-container, .form-address-table select, .form-input {width: auto !important; } .form-label.form-label-auto {width: 125px !important; } .jotform-form .form-all {width: 479px !important; } .form-buttons-wrapper button {width: auto !important; } .form-line {padding: 5px 36px !important; } }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    With regards to the round corner, since it is embedded as iframe, you will have to apply the round corner style in the iframe code. To do that, add this in the embed code 

    <style>iframe[name="73325450392151"]{border-radius:20px;}</style>

    Result:

    Hope this helps!