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

  • Profile Image
    esdexo
    Asked on October 24, 2015 at 06: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.

  • Profile Image
    EltonCris
    Answered on October 25, 2015 at 07: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:

    If you have further questions, let us know.