Making Forms Responsive

I just stumbled into a problem that I never anticipated…

How do you make a web form, responsive?

Do you fix the form and form fields at a tiny width so it will fit on an iPhone4, and then just add auto margins?

Do you somehow make the form fields themselves “fluid”?

Something else? :confused:

I have a “Contact Us” web form that I stole from a non-responsive website I built this summer, and I’m not sure what to do with it to make it fit into my new responsive website?!

Perhaps this website might help:
https://coveloping.com/tools/html5-responsive-form-generator

EDIT: It has some flaws but it gives some useful ideas

Simple:

input {
   width: 95%;
   max-width: 30em;
}

Adjust the figures to your preference.
You may want to target more specific input types if they exist on the form.

In RWD, don’t fix things, fluid things.[quote=“mikey_w, post:1, topic:207946”]
I have a “Contact Us” web form that I stole from a non-responsive website I built this summer, and I’m not sure what to do with it to make it fit into my new responsive website?!
[/quote]
Did you steal the css too? HTML alone is mostly responsive, the css determines if it stays that way.

1 Like

@SamA74,

Thanks for the tip!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.