Why is the form not responsive in Muse?

Hello,

I created a form, inserted it via iframes and that finally worked. There was this resizing issue of the browser window where the form disappeared so I had to do that.

Anyway, when I resize the browser windows now, the form behaves responsive but the footer where it says "Create your own JotForm" stays where it is and leaves and empty space between form and form-footer.

What could that be?

Also, the Recaptcha thing is not fully responsive, so it gets cut after a certain point.

Best regards

Sebastian Benkenstein

I inserted a Mobile responsive widget to your form, that should improve things when viewed on mobile devices.

I wasn't able to replicate this issue with footer, it was showing fine when I resized the window:

Regarding the captcha, please be mindful that captcha requires a minimum of 320 px of width to display properly. So resizing of it is not possible.

If you have any further questions please let us know.

Thank you!

Alright, now the footer of the form is showing correctly. 

And I also understood the ReCaptcha thing. 

But now I have the problem, that the design doesn't look like the one in JotForm Editor. I insert a screenshot:

And here on the homepage:

So why is this? Is it because of the iFrames?

Best regards

By embedding the form on a page, the JotForm footer gets enclosed within that certain iframe.

However, I noticed on the page where the fields are stretched somewhere to an extent. This is because the responsive script enables the fields to be stretched so it will allow the form to run responsive and elastic. This gets triggered if the area where the iframe is contained has a certain limited width like 480px. Making the width of the div go above 480, the fields will not stretch to 100%. 

If you have something in mind, like you wish for it to not stretch or put some divs so it will have breathing space on each side, please let us know.

Thanks.

Thanks for the reply.

I don't wish for it to stretch but I also want the whole form to still be responsive. Is that possible?

Best regards

Hello,

The Div element on the page that contains your JotForm has a width less than 480 px, hence the form automatically behaves as it is on a mobile device. As I guess, you will use this form as it is embedded on the web page "http://p-m14.businesscatalyst.com/index.html " and it will always have that width. Hence we can force the form to have a default padding. Please insert this code and give it a try.

.form-line{

  padding: 5px 5px 5px 5px!important;

}

Here is a guide on inserting CSS codes into your form:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

The numbers represent the top, right, bottom and left spacing respectively. You can change them as you wish.

Please re-embed your form after adding the CSS code above.

I hope this helps. Please turn back to us with the results.

Regards.