Making Your Form Responsive in Mobile View: Missing field

I have created several forms and embedded them onto my WordPress sites using the iFrame code.

The forms look good on desktop view, but when the window is smaller.. in tablet or mobile view the email field gets cut off. (see screenshot attached)

I tried to play with the auto and fixed widths of the fields, but even when I had all the field elements set to the same width, the email field was still presenting the same issue. Could you help?

Hi daziumdesign,

Thanks for reaching out to Jotform Support. When I cloned and tested your form, the same thing happened for me. Check out the screenshots below:

Can you try removing the field and add it back to see if it'll work? Make sure to do it using a computer/laptop and in a browser. If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

Give it a try and let us know how it goes.

I tried removing the field and adding it back... the same error is occurring. I also have this field on several other of my forms and it is doing the same thing across the forms and across my websites.

Could you please take another look?

Hi daziumdesign,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi daziumdesign,

I've cloned your form and tested a CSS code to make the form responsive in mobile view. Let me show you how:

• In Form Builder, click on the Form Designer (the paint roller icon) on the right side of the page.
• Click on Styles.
• Scroll down to Inject Custom CSS.
• Add the CSS code at the end.

.form-line-column:not(.form-line-column-clear).fixed-width {

  width: auto;

  flex-basis: auto !important;

}

Give it a try and let us know how it goes.