Introducing Form Layouts

We’re pleased to now support two form layouts.

Question (a.k.a. field name) and input field aligned horizontally (default):
Form layout: question and input field aligned
Question and input field aligned vertically:
Form layout: question above input field

Which Layout Should You Use?

Most people find web forms designed with the first layout clearer and easier to read. That’s why we use it by default whenever you create a form.

The best layout to use depends on the length of the questions asked on the form.

  • When a form is made of short questions like name or email address, prefer the first layout. This is what you should use, for example, for contact forms.
  • When the form contains longer questions like Why do you want to work for us?, you should rather use the second layout. It turns out that you should use the second layout for most complex forms like web surveys and job application forms.

How to Change the Layout of a Form

You can change the layout of a form in the form details page. Note that if you’re using a form widget embedded into your site, you must update the HTML code on your site whenever you switch layout.

This is simply because the layout affects the size of the form. Forms accessed by their FormSmarts.com URL don’t have this restriction.

Any Feedback About Form Layouts?

We welcome your feedback about this feature.

9 Responses to “Introducing Form Layouts”

Great forms, but your code doesn’t validate as XHTML 1.0 Transitional.

Posted by: Steve McDonnell | Sep 7th, 2008 4:54 pm

Steve,
The form code is currently “HTML 4.01 Transitional”. Embedded forms are full HTML documents separate from the host page, with their own document type.

FormSmarts Posted by: FormSmarts | Sep 7th, 2008 5:05 pm

It would be really good to have the option of a serifed font (Times being the obvious choice). I use serifed fonts a lot, and the form’s Arial (It’s Arial, right?) doesn’t look so great in that setting.

Posted by: Jon | May 29th, 2009 7:47 pm

I am new to your service, although i love it. BY FAR THE BEST FORM SERVICE on the entire internet. the only issue I’m running into is when I try to change they format on the form it ALWAYS says timed out and will never let me change it. any ideas?

Posted by: ryan monahan | May 30th, 2009 9:09 pm

Jon,
We’ll eventually let you use your own CSS so you may change whatever you want in the look of your forms.

FormSmarts Posted by: FormSmarts | May 31st, 2009 5:13 am

Ryan,
That functionality was unavailable for a short time due to a maintenance operation. There was a notice on the Form Details screen.

FormSmarts Posted by: FormSmarts | May 31st, 2009 5:16 am

Great! I reckon that (CSS control) will mean it really won’t ever be worth my while to figure out PHP form handlers for myself when I can just keep paying you guys a modest sum to do it for me.

Posted by: Jon | May 31st, 2009 7:24 am

Can I get a copy of the CSS used by FormSmarts so I can see all the styles used by your service so that I can customize to my exact specifications?

Posted by: Alissa | Jan 13th, 2012 2:13 pm

These are public documents, you can access them online:

http://static.formsmarts.com/css/embed1.c.css (layout 1)
http://static.formsmarts.com/css/embed2.c.css (layout 2)

Note that some divs like those defining sections are not being used in the default CSS.

FormSmarts Posted by: FormSmarts | Jan 17th, 2012 3:44 am

Leave a Reply

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.