Form alignment is changing when it is embedded on Shopify website

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!

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

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. 

Hi Kiran,

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

Thanks!

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.

@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

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.

@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.

Thanks for waiting.

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

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.

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

@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

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. 

@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.

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.

@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

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.