How can I make my form responsive when I use WIX HTML embedding?

  • esdexo
    Asked on October 24, 2015 at 6:36 PM

    I've followed the steps to using the WIX embed cde from jotform, however, after publishing it on WIX, and testing from my iphone, my page is still not responsive and super hard to complete.

    This is my page: http://www.ilashart.com/#!clientprofile/c1q9a

    I need users to be able to complete this form from their mobile devices/tablets.

  • Elton Support Team Lead
    Replied on October 25, 2015 at 7:43 AM

    That's most likely due to the formatting you have with your form.

    Please inject this CSS codes to your form, this will correct some of the elements layout on mobile. This would also eliminate the horizontal scroll bar.

    @media screen and (max-width: 480px){

    .form-radio-item, .form-checkbox-item {

        white-space: normal !important;

    }

    .form-label {

        width: 100%!important;

        display: block !important;

        float: none !important;

            text-align: left !important;

    }

    div.form-header-group {

        padding: 0 10px !important;

        margin: 0 !important;

        }

        .form-label-right {

        padding-right: 0 !important;

        }

    }

    Guide: https://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes (please paste it at the bottom part).

    Please take note that the height display of the form on mobile depends on the container where you have pasted the form embed code. If you want to increase the height of the container, simply increase the HTML snippet where you have pasted the form embed code on the Wix builder.

    Result:

    How can I make my form responsive when I use WIX HTML embedding? Image 1 Screenshot 30

    How can I make my form responsive when I use WIX HTML embedding? Image 2 Screenshot 41

    If you have further questions, let us know.