Embedded form not mobile responsive.

Hi Team,

I've embedded a jotform on my Wix site. However, my client is dissatisfied with how it is presented on mobile. See his comment below:

"This page isn't optimized for mobile. The text is way too large and misaligned, and certain elements are too large. Mobile visitors are more likely than desktop visitors, we have to get this right."

I've attached a screenshot of how it looks on mobile. Is there anything we can do to make the form look better on mobile?

I also want to add that I embedded the iFrame.

Here's the link to the embedded form to view it on your phone: https://humbirdmedia.wixsite.com/somers-furnishing/book-a-site-visit

Hi team, I made the element wider on mobile. I fixed it.

Hi HumbirdMedia,

Thanks for reaching out to Jotform Support. Just to confirm, the issue has been fixed already, and you don't need any assistance anymore?

If you have any questions, just reply to this thread, or you can create a Forum Thread from the Contact Us page. We’ll be happy to help. Let me show you how to create a Support Ticket: 

1. On your My Forms page, click on Support on the top-right side of the dark-blue navigation bar at the top of your screen.
2. In the menu that opens, click on Contact Us.
3. Enter a title for your question in the box below ‘How can we help?’
4. In the box below the title, enter some text that explains the situation.
5. Now, just click on Post Question on the bottom-right side of your screen and you're good to go.

You can also:

1. Add the link to your form or to the website that you embedded the form into by pasting that into the box under the Add a Link section.
2. Click on Choose File under the Upload a Screenshot section to upload a screenshot of the issue. 
3. Tick Make Private to prevent other users from seeing your question or answer. We recommend that you tick it if the content includes sensitive information. If not, you can leave it unticked so other Jotform users can benefit from the answer.

Let us know if you need any other help.

Hi, it turns out the issue is not fixed. When I widened the form on the mobile, it still did not become responsive. See screenshot below:

I noticed that when I visit the form using the Jotform link, it shows perfectly on mobile. But embedding on my website, which is what is ideal, doesn't scale very well as shown in my previous screenshot. What can I do?

Hi Shauna-Kay,

Thanks for getting back to us. I understand how frustrating this is for you, and I’ll do my best to help you. Unfortunately, I am unable to check your embedded form as it is showing a connection reset error.

Are there any location-based restrictions preventing access to your website? To assist with the issue of your embedded form not being mobile responsive, we need to review it. Would you be able to temporarily remove any location-based restrictions so that we can access your page and provide assistance?

Once we hear back from you, we'll be able to move forward with a solution.

Hi, please try this link again: https://humbirdmedia.wixsite.com/somers-furnishing/book-a-site-visit

The form is on the "Book a Site Visit" page.

Hi Shauna-Kay,

Thanks for getting back to us. When I checked your embedded the responsive was working as it should. Check out my screencast below:

Since I was unable to replicate the issue, I cleared the form cache to refresh the data. You can check this guide on How to Clear Your Form Cache. Can you please test your form again and see how it goes? If the issue persists, please let us know, and we will further investigate to better understand what is going on.

If the issue persists you can try to remove the embedding from your website and embed the form again.

• In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
• In the menu on the left side of the page, click on Embed.
• Now, click on the embed option you want to use, and copy the code.
• That's it. Embed your link on your webpage and you're done.

Reach out again if you have any other questions.

Thanks for your screen recording. Let me be a little more clear. It's not that it's not mobile responsive. The responsive embedded version just doesn't look right on mobile.

Click here to watch my screen recording. You will see how the form looks on mobile when viewing from Jotform's URL (which is how I want it to look), and how it looks on mobile after being embedded in my website.

I hope this gives you a better understanding of my problem and how to solve it.

Hi Shauna,

Thanks for getting back to us. Since the main concern of your client is to reduce the font size and the extra space we can do it using custom CSS code. Check out the steps below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*To make the form more responsive - 14036061*/

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

ul.form-section.page-section {

    padding-right: 2px !important;

    padding-left: 2px !important;

}



.header-large h1.form-header {

    font-size: 1.5em;

}



.form-all {

    font-size: 14px !important;

}



.form-all .form-pagebreak-back, 

.form-all .form-pagebreak-next {

    font-size: 14px;

}

}

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

THANK YOU! This is exactly what I wanted to know. Thank you so much for understanding and providing a fix!!!!!!!

I think this embedding responsive issue is something that others may be struggling with and I didn't see this solution in the support forum. Is there a way you can make this answer public so others can find it in the future?

Hi Shauna,

Thanks for getting back to us. Glad to know that the issue has been resolved. As per your request, I have set the thread privacy to public.

Let us know if there’s anything else we can help you with. 

That's it! Thank you! This fix will definitely help with my other embedded forms.