Floating Form Submit Button
The easier a form is to use, the less likely it is to be abandoned.
For long forms, forms that may require scrolling in desktop browsers or mobile devices, "easier" can be when the form submit button is always available in the current view. It's also a user-friendly gesture.
Even if all fields are required, the form user may scroll up to verify an item just before submitting. When the submit button follows, the user doesn't have to scroll back down again to submit the form.
A caveat: The submit button must be out of the way — on any size screen. If the button overlaps a field that needs to be filled in, and the user has to move the form up or down to clear the field, then the floating submit button didn't make it easier to use the form, but more difficult.
Implementation
One way to implement it is to put the submit button into a div and give the div a CSS position:fixed; declaration.
Fix the position of the div containing the button with CSS top, right, bottom, or left properties. Examples:
-
top:0; left:0;fixes the position of the submit button at the top-left corner of the browser window. -
top:1in; left:0;fixes the position of the submit button an inch from the top of the window at the left side of the browser window. -
bottom:5px; right:5px;fixes the position of the submit button 5 pixels away from the bottom-right corner of the browser window.
It's possible to keep the submit button at it's expected location so form users can find it easily, and have a second submit button floating at a fixed position in the browser window. The two buttons may optionally contain different text or have different designs.
Demonstration
An "Example" submit button is floating at the left edge of the window near the bottom.
Here's how a form might look. (This is a short form. The floating submit button generally would be implemented only for long forms.)
For reference, this is the code used for the demonstration, including the border around the form.
<div style="display:table; margin:0 auto; padding:10px; border:1px solid black; border-radius:3px;">
<form method="get" onsubmit="alert('Just a demo, not live.'); return false" style="margin:0;">
<p style="margin-top:0;">
Name:<br><input type="text" style="width:200px;">
</p>
<p>
Email:<br><input type="email" style="width:200px;">
</p>
<p style="margin-bottom:0;">
<input type="submit" value="Submit the Form" style="width:200px;">
</p>
<div style="position:fixed; bottom:.5in; left:0;"><input type="submit" value="Example"></div>
</form>
</div>
For the floating submit button, the field may be type="image" instead of type="submit". A small image may be more out of the way than a normal submit button.
Offering a floating submit button can make a long form easier for your site visitors to use.
(This article first appeared in Possibilities ezine.)
Will Bontrager
