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 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.
Posted on Aug 14th, 2008 in HTML form.
9 Comments
Tags: form design, usability, widget
Stored Form Results
Whenever someone uses one of your forms, we email you the form submission straight away. That is, at this time, the only way we support for you to access form results.
That’s great if you need to collect time-sensitive information that needs to be processed individually. For example, for contact forms or order forms.
For most individuals and small businesses, their email account is where data is safest. Free email services like Gmail or Yahoo give you reliable data storage, that’s an advantage that is often overlooked.
But sometimes what you want is really to collect form data, store it somewhere, and use it later. That’s what you need for medium and large scale surveys, registration forms, and the likes.
Stored form results is the next big thing coming up on FormSmarts.
What Will Change with Stored Form Results?
When this feature becomes available, you’ll have the option to store form submissions on FormSmarts. You’ll then be able to download them, export them to Microsoft Excel, get them emailed to you weekly, or get them via a private RSS feed.
Stored Form Results will only be available to FormSmarts Pro customers.
Anything to Say?
We’re open to suggestions about other ways to let users retrieve stored form data.
Posted on Aug 5th, 2008 in form handler.
2 Comments
Tags: stored form results, upcoming
Date Type & Datepicker
Anyone using a standard text field for dates should upgrade to the new date type.
Fields with the date type show as a text box, with a datepicker poping up when the field is selected. A datepicker allows users to input dates in an intuitive and interactive way, therefore reducing the risk of errors.
Date Format
Another reason for using a datepicker is to alleviate the date format problem. Because of date formatting differences, 12/07/2008 means December 7th in the U.S., but July 12th in Europe. Although we initially thought of adopting the ISO/W3C date format “yyyy-mm-dd”, we eventually preferred the U.S. format “mm/dd/yyyy”. That is, until we release an internationalized version of FormSmarts.
Because users don’t interact directly with the text field (unless they want to), but rather with the datepicker, they don’t have to be aware of date formatting issues.
To avoid any misunderstandings, dates are displayed as Sunday July 20, 2008.
Any questions or comments? Leave a reply. We are in particular interested in feedback from non U.S. users.
Posted on Jul 20th, 2008 in form handler.
3 Comments
Tags: email notification, form handler, input field, international, web forms
Geolocalized Country Selection Field
We’re going to add over the week-end two new input field types: country, and date. You should upgrade any web forms currently using a standard text field for country or date to the new types.
When to Use the Country Type
Choose the country type whenever you want to show on a form a dropdown list with the 280 odd ISO country names.
Visitor Country Selected by Default
A country list field is typically used to ask the visitor about his/her country of residence. You’ve certainly already experienced the frustration of having to search for your country in a long list each time you fill out a form. At FormSmarts, we want to save time to everyone, so the visitor’s country is automatically selected by default.
That way, users only have to change the selection if the question asks them about a country different from their country of residence. For example, “Where did you travel last time you went abroad?”
Reducing the time needed to fill a form helps reduce form abandonment.
Any questions or comments? Leave a reply.
P.S. We’ll present the date type in another post.
Posted on Jul 17th, 2008 in form handler.
6 Comments
Tags: form handler, geolocalization, input field, web forms
How to Redirect Form Respondents to Your Site
The form builder allows you to set up a Return URL for each of your forms and automatically redirect users to that URL after they've submitted a form.
To change the Return URL of a form, use the button showing a pen to edit the form and update its Return URL in the Submit Actions tab.
Redirect Form Users to Your Site
You can set up a form to skip the Confirmation page and instead automatically redirect the user to a Thank You page or download URL on your site.
To activate redirect:
- Navigate to the Form Details screen of the form builder and set a form return URL in the Submit Actions tab
- Select Redirect to Return URL in the On Submission drop-down menu
Browsers won’t redirect from a secure HTTPS page (the form) to non-secure content for security reasons. Please make sure the Return URL starts with https://
. If your site still doesn't support TLS/HTTPS, FormSmarts won't be able to redirect form respondents.
Note that form users will not get a FormSmarts Reference Number for their form submission if you redirect them to your site unless you also set up the form to send an automatic form confirmation email.
Redirect With Embedded Forms
If you have embedded a form onto your site and set it to redirect to its Return URL, some browsers may load the URL in the iframe
that contains the form. Follow these instructions to ensure the Thank You page consistently loads in the top browser window or tab.
Return URL & Site Ownership Verification
Although the redirect option is only available with paid accounts, members with a Free account can still provide a button on the form confirmation page to allow respondents to navigate to a Thank You page or other URL.
To prevent abuse, FormSmarts only provides a link to the Return URL for Free accounts if you have verified your site.
To verify your site, visit the Settings tab of the form builder.
We use the return URLs of your forms to compute the list of websites in Settings > Websites, so make sure those are correct before you attempt to verify.
PayPal Landing Page for Payment Forms
If you use our PayPal form feature to collect dues, fees or donations on your form, the Return URL will be used as the PayPal landing page. Users will be redirected to that page by PayPal after the payment has been completed.
Posted on Jul 11th, 2008 in HTML form.
22 Comments
Tags: form builder, form owner, payment integration, paypal, return url, web forms, widget
Form Color Settings
Like many FormSmarts users, you may sometimes want to customize the style of your web forms. This may be because you want the forms to match the rest of your website, or because you want a form to stand out on a web page.
The form builder allows you to easily change the text and background color of your forms. Visit the Form Details screen in the Forms tab to set color preferences for a particular form.
Things to note:
- color settings only affect embedded forms, not forms access by their FormSmarts URL
- because your color settings are stored in our servers, you can change settings and see the result immediately. You don’t need to update the form embed code on your website.
How to Change Form Colors
- By default, form text is black, and form background is transparent. This should fit the needs of most users, and if you’re happy with this, you don’t need to do anything.
- If you do want to change a color, the easiest way is to choose one of the popular colors we’ve preselected. Just click on the color you want.
- If you prefer to use your own colors, you may type any valid 6-digit HTML color code directly. For example, 808080 is a shade of gray.
Usability Note
It’s important to preserve the accessibility of your forms to visually impaired visitors, and their usability under poor reading conditions (e.g. bright sunshine). Always keep a high color contrast.
Advanced Form Customization
You may further customize many visual aspects of a form by providing your own CSS stylesheet. For usability reasons, we don’t recommend dramatically changing the form layout.
Posted on Jul 6th, 2008 in form builder.
9 Comments
Tags: embed, form builder, usability, web forms, widget
Form Owner Verification with Google Page Creator
To verify you own a website, we ask you to create a file with a specific name on your web host. If you use Google Page Creator, proceed as follows to verify your site:
- create a new page
- enter the verification file name (e.g. syronex8800…2523.html) as the page title
- publish the new page
Form ownership verification is optional but recommended to build trust with your visitors. It is required you intend to advertise a web form URL by email.
Recent Issues with Google Page Creator
Although hundreds of Google Page Creator users have successfully verified their site, we’ve had a few issues in the last few days. Google was redirecting some of the requests to googlepages.com to the same page on google.com, thus preventing us to check the verification file exists. We obviously have a limited scope for action, but we identified a likely cause and took technical measures that seem to have solved the problem. Leave a comment if you experience any more problems.
Posted on Jul 2nd, 2008 in form builder.
1 Comment
Tags: embed, form builder, google page creator, 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 Jun 29th, 2008 in HTML form.
4 Comments
Tags: form builder, form design, howto, input field, web forms
Ever Wished You Could Reorder Fields?
The set of form-making operations supported by FormSmarts form builder was up to now almost complete, allowing to:
- create a form
- delete a form
- edit form properties (name, title, return URL, form filling instructions, recipient email account)
- add a form input field
- delete a field
- edit field properties (name, description, field type, input widget, optional/required)
The last unsupported operation was to allow users to easily change the order in which fields appear on a form. This is often needed to:
- group fields logically
- group optional fields together at the bottom of a form
- insert a field in a existing form
- move fields around to increase the visual appeal of a form
Reordering fields manually is tedious, as it involves deleting and re-creating fields.
No more. Reordering fields is now a trivial drag & drop: in the fields tab, drag the field you want to move, and drop it in the position you want.
As usual, we welcome your comments and suggestions about this feature.
Posted on Jun 20th, 2008 in form builder.
5 Comments
Tags: form builder, form design, input field
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 Jun 17th, 2008 in HTML form.
Post a Comment
Tags: embed, web forms, widget
About the Form Builder Blog
Categories
- booking (1)
- collaboration (6)
- event registration (3)
- file upload (2)
- form builder (52)
- form handler (9)
- form spam (5)
- HTML form (11)
- mobile form (1)
- online form (9)
- payment form (13)