Form alignment is changing when it is embedded on Shopify website

  • Profile Image
    art_crate
    Asked on May 01, 2018 at 04:23 AM

    Hello,

    My form alignment looks great when viewed in the preview: https://form.jotform.com/81168716685973

    However, after I embedded it using the shopify x jotform embed code, the alignment was off. https://art-crate-test.myshopify.com/pages/design-survey

    *Some questions are cut off.

    Please let me know the best way to proceed.

    Thanks!

  • Profile Image
    Kiran
    Answered on May 01, 2018 at 07:10 AM

    Could you try embedding the form using iframe embed code and change the width to 1000px in the embed code?

    1525172959iframe_embed_changewidth.png

    You may get the iframe embed code for your JotForm by following the steps in the guide below:

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Please get back to us if the issue still persists. We will be happy to assist you further. 

  • Profile Image
    art_crate
    Answered on May 01, 2018 at 09:59 PM

    Hi Kiran,

    Does the Jotform x Shopify javascript embed function the same as an iframe? We were leaning away from using an iframe.


    Thanks!

  • Profile Image
    ashwin_d
    Answered on May 02, 2018 at 03:32 AM

    Please note that the script embed code of form generate the iFrame embed code dynamically when the webpage is accessed. Some code conflict between form script and other script available in your webpage can cause the alignment issue.

    I would suggest you to please grab your form's iFrame embed code and see if that solves the problem you are having. The following guide should help you how to grab your form's iFrame embed code:   https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    We will wait for your response.

  • Profile Image
    art_crate
    Answered on May 02, 2018 at 04:18 PM

    @ashwin_d @Kiran,

    iframe code is used with the style="width: 1000px;

    That fixed the issue of everything displaying on desktop. Alignment is still off and now the form is not viewable on mobile. Most of the content falls off the screen.

    https://art-crate-test.myshopify.com/pages/design-survey

  • Profile Image
    Jed_C
    Answered on May 02, 2018 at 05:35 PM

    Upon testing the form, it shows correctly when viewed on mobile device. Here's a sample screencast of what I see on my end https://screencast-o-matic.com/watch/cFhnrvbrFe.

    I'm only seeing 2 or 3 pages where the alignment is a bit on the left side. I'll try to make a clone of your form and test it further and let you know here once I have corrected the alignment.

  • Profile Image
    art_crate
    Answered on May 02, 2018 at 05:39 PM

    @jed_c thank you for testing the form. I ended up readjusting some field widths and images radio sizes. I then used the shopify embed. Because I did not want to use an iframe.

    It appears to be at a somewhat satisfactory level. Some alignments are still off, but I think this is a good starting point.

    Thank you for your help.

  • Profile Image
    Jed_C
    Answered on May 02, 2018 at 10:39 PM

    Thanks for waiting.

    Kindly delete the CSS part on line: 658 - 678.

    1525314745custom_css.png

    Once done, replace it with the following script below.

    li#id_162 {

        margin-left: 10px;

    }

    #id_140{

        margin-left: 100px !important;

    }

    #id_128{

        margin-left: 75px !important;

    }

    #id_63{

        margin-left: 75px !important;

    }

    #id_163{

        margin-left: 75px !important;

    }

    #id_157{

        margin-left: 20px !important;

    }

    Here's a sample view of your form on mobile browser.

    1525315038field_aligment.gif

    I hope this helps, but let us know if you have any questions or if you need further assistance.

  • Profile Image
    art_crate
    Answered on May 03, 2018 at 06:39 PM

    @Jed_C You are awesome!

    This is a perfect fix thank you so much. I have one additional questions. 

    When viewing on a laptop the height of the form needs the user to scroll down to engage the Back/Next buttons. 

    Is it possible to reduce the extra white space in the image below? I'd like to have the height of the form be at or under 650px.

    Looking forward to your feedback. 

    Best

    1525387172Form Height.png


  • Profile Image
    Kevin_G
    Answered on May 03, 2018 at 08:03 PM

    Please try injecting the following CSS code to the form in order to reduce the space on the desired areas: 

    ul.form-section.page-section:nth-child(3) .form-line {

        padding-top: 0px;

        padding-bottom: 0px;

        margin-bottom: 0px;

        margin-top: 0px; 

    }


    ul.form-section.page-section:nth-child(3) li[data-type="control_head"] .form-header-group  {

        padding-top: 0px;

        padding-bottom: 0px;

    }


    #label_121{

        display: none;

    }

    I hope this helps. 

  • Profile Image
    art_crate
    Answered on May 03, 2018 at 10:14 PM

    @Kevin_G I've injected the css into the form. However, it only changed the verticle spacing on the first question: What Best Describes Your Living Space?

    Please have a look and let me know how to make this a global spacing change.

  • Profile Image
    ashwin_d
    Answered on May 04, 2018 at 03:05 AM

    I have edited the custom css code which was injected in your form:

    ul.form-section.page-section:nth-child(3) .form-line {

        padding-top: 0px;

        padding-bottom: 0px;

        margin-bottom: -20px;

        margin-top: 0px; 

    }

    I would suggest you to please test your embedded form again and get back to us if the issue persists.

  • Profile Image
    art_crate
    Answered on May 05, 2018 at 01:22 AM

    @ashwin_d thank you for making the change. I re-embedded the form to test, and it appears the padding is only affecting the first question. Please advise how to make this a global form wide change.

    https://art-crate-test.myshopify.com/pages/design-survey

  • Profile Image
    Kiran
    Answered on May 05, 2018 at 05:12 AM

    I made some changes to the form with the following CSS code to display the fields correctly on a mobile device.

    li#id_162 {

        margin-left: 10px;

    }

    #id_140{

        margin-left: 75px !important;

    }

    #id_128{

        margin-left: 75px !important;

    }

    #id_63{

        margin-left: 75px !important;

    }

    #id_163{

        margin-left: 75px !important;

    }

    #id_157{

        margin-left: 75px !important;

    }

    Please check and let us know if you need any further assistance. We will be happy to assist.