Archive for the ‘HTML form’ Category
Introducing Form Layouts
We’re pleased to now support two form layouts.
Question (a.k.a. field name) and input field aligned horizontally (default):
|
Question and input field aligned vertically:
|
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 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.
Posted on August 14th, 2008 in HTML form.
2 Comments »
Tags: form design, usability, widget
What’s the Return URL of a Form?
When creating a new form with FormSmarts Form Builder, you’re asked to provide a return URL for that form. The return URL is where visitors will be invited to go to, after a successful form submission.
In practice, the return URL is only used when the form is accessed by URL, not when it’s embedded into your website. When visitors fill out the form directly on your site, they won’t leave the page hosting that form, and there is no need to send them anywhere else. The only thing that makes sense, is to display a “thank you” message right there.
We also use return URLs to compute the list of websites in Settings > Websites.
Return URL & Form Ownership
To prevent possible abuse, we will soon only display a link to the return URL on the confirmation page if the form owner is verified. Visit the Settings tab to verify your sites.
Want a Customized “Thank You” Message on Your Forms?
We’re thinking of letting form publishers add a personalized “thank you” message on the confirmation page. Please let us know if that’s something you would want to use on your forms.
Posted on July 11th, 2008 in HTML form.
11 Comments »
Tags: form builder, form owner, web forms, widget
How to Lay Out Form Input Fields
Your goal as a web publisher is maximize the number of (legitimate) respondents to your forms. A first step towards this goal is to lay out your forms in a way that is intuitive to users, makes forms faster to fill in, and minimizes form validation errors.
It follows four points you should consider when designing a web form:
- choose the most appropriate input field widget for the situation
- group fields together within logical sections
- place multi-line text input fields (textarea in HTML) towards the bottom of the form
- group optional fields together at the bottom of the form
The first point is discussed in details in FormSmarts documentation.
The second point commends, for example, that when you ask people about their contact details, you group all relevant fields (first name, last name, email,…) together. We found that most form designers tend to do that right. The form builder will in the future allow users to define different logical (and visual) sections within web forms.
Multi-line text input fields obviously tend to take longer to fill in than other input fields. They require more effort, thinking and typing, so place them after other fields. Visitors will be less inclined to abandon the form altogether if they have already spent time completing the first part of the form.
The last point is about grouping optional fields together at the bottom of the form. This allows people to quickly review the remaining questions, and skip the fields they don’t want to fill in or don’t apply to them. This may of course conflict with grouping fields within logical sections. In that case, place optional fields at the end of each logical section.
We’ve now enabled comments, and we warmly welcome your thoughts and feedback about this post. if you’re reading this by email, just click on the title to post a reply.
Posted on June 29th, 2008 in HTML form.
4 Comments »
Tags: form builder, form design, howto, input field, web forms
Text & Background Colors in Embedded Forms
As already mentioned in another post, we are soon going to allow FormSmarts users to customize the look of web forms. This applies in particular to embedded forms.
At this time, the form text color is black, and the form background is transparent. This leads to an issue when the page hosting the form has a black background. If you are affected by this problem, please contact us so we change the text color of your forms to white.
We welcome your suggestions about form look/style configuration options you would find useful, besides colors and border.
Posted on June 17th, 2008 in HTML form.
No Comments »
Tags: embed, web forms, widget
How to Embed a Form Into Your Site
Linking or Embedding?
FormSmarts supports two ways to integrate a form into your website or blog: linking and embedding. Embedding lets you place the form on your site alongside other content. Linking gives your form its own separate web page. Both have advantages and disadvantages. Many users think embedding the form into their site gives them more control. That’s far from always being the best option.
Embed a Form When…
- the web form is short — 3-4 input fields maximum
- it is self comprehensible and form filling instructions are not needed
Mailing list signup forms and simple contact forms work well embedded.
Link To a Form When…
- the form is long or complex
- the form is accessed both by web visitors and via a mailing list
- the form in intended for a large audience, that may be using a wide range of browsers and devices
- you expect a large number of form submissions
Event registration forms and survey forms perform better when accessed buy URL on their own page.
- forms accessed by URL load faster and are more scalable
- they are statistically more reliable
- they offer more flexibility
- there are no sizing issues
A word of wisdom: Resist the temptation to systematically embed web forms on your site for irrational reasons “because it gives you more (apparent) control”. Some web forms perform better on their own page.
Placing the Embedding Code On Your Site
To embed a form into your website, visit the Forms tab, and click Embed to see the form code.
Copy the HTML code, then paste it somewhere in the HTML source of the
host page on your website or blog. If you’re using an online service like Blogger, that’s
all you have to do. Otherwise, you need to publish the page to your web server.
A word of warning: do not try to save the form as an HTML page, and publish that page. This will not work. You must paste the code exactly as given. Do not attempt to alter, remove, or hide the mention “web form by FormSmarts”, or the link to our Privacy Policy. This would be a breach of our Terms of Use, and your account would risk to be terminated without notice.
Changing a Form, Once the Code Is on Your Site
Any changes you make to a form using the form builder will show up straight away on your website. You do not need to update the embedding code. As a result of adding more fields, the frame containing the form may however not be large enough, and you will then need to re-publish the embedding code on your site. See the section about Form Sizing below.
Customizing Your Form
The frame containing the form is transparent, which means the form background color will be the same as the background color of the hosting page.
We’re working to give you more control over the look of your forms, and we welcome your suggestions. Once available, you will be able to apply most customizations straight from FormSmarts. You won’t have to change the form code on your website.
Web Form Sizing
Why Is There Extra Space at the Bottom of the Form?
Forms are contained within an HTML frame (”iframe” for geeks). The frame has a fixed size, which is computed for each form, based on the number and type of fields used.
It is necessary to leave room for error messages that may need to be displayed during a form submission. That’s the reason for the extra space at the bottom of a form.
How Do I Get Rid of the Vertical Scrollbar
With time, you may have to add more fields to your form. Since the frame height is hard-coded into the code on your website, the form may no longer fit into the frame, and a vertical scrollbar will then appear. That is not desirable on a usability standpoint, so you are advised to update the code on your site whenever you add new fields, or change a text box to a text area.
A vertical scrollbar may also appear if the form has many questions.
You can get rid of the scrollbar by increasing the vertical size of the form widget. To do this, increase the value of the attribute height in the HTML snippet for the form (a.k.a. form embedding code.)
Only One Form Per Page
You cannot embed more than one form in a given web page.
Posted on May 21st, 2008 in HTML form.
12 Comments »
Tags: embed, form builder, howto, web forms, widget
