Responsive Forms; A Simple Way

A special challenge for responsive pages is forms.

Depending on the design of the form, it may need to be redesigned for small or large screen widths. Different designs can be published for different widths with @media tags.

Unless it's really necessary, let's just do it simple. Let's just bypass the added steps of @media tags.

This article describes a simple form design that's responsive to any screen width without needing a redesign.

The Responsive Form Concept

Here's the simplicity of it:

• Form labels are above form text fields.

• Form text fields have width:100%; CSS definitions.

• Optionally, to prevent the form from getting wider than a certain width, put the form into a div with a max-width property. (Example: max-width:600px;)

An Example

The example contains all of the above responsive form concept points.

The form widens and narrows according to the width of the screen — with the maximum width determined by the enclosing div.

The Source Code

Here's the source code of the above example. The CSS styles are colored blue. They are inline styles and may be transferred to a style sheet.

<div style="max-width:625px;">

<form onsubmit="alert('Not a live form');return false">

<p>
Name:<br>
<input type="text" style="width:100%;">
</p>

<p>
Email:<br>
<input type="text" style="width:100%;">
</p>

<p>
<input type="button" value="Submit" style="width:100%;" onclick="alert('Not a live form');return false">
</p>

</form>

</div>

That's all there's to it. It's a truly simple responsive web page form design.

(This article first appeared in Possibilities ezine.)

Will Bontrager