Archive for the ‘HTML form’ Category
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.
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 automatically redirected to or invited to go to (by clicking a link) after a successful form submission.
We also use return URLs to compute the list of websites in Settings > Websites.
If you don’t have a web page, simply use “http://formsmarts.com” as the return URL.
Return URL & Form Ownership
To prevent abuse, the link to the return URL is only displayed on the confirmation page if the form owner is verified or is a FormSmarts Pro or FormSmarts Business user. Visit the Settings tab of your account to verify your sites.
Redirecting Visitors to a Page of Your Site
You can set up a form to skip the Confirmation page and automatically redirect the visitor to the form’s Return URL. Note that the visitor will then not get the FormSmarts Reference Number of the transaction. Redirection can be activated in the Form Details screen of the form builder, under On Submission. FormSmarts Pro and Business customers only.
For security reasons, browsers won’t redirect users from a secure HTTPS page to non-secure content. So when a form is embedded onto an HTTPS site, the return URL should also use HTTPS.
PayPal Landing Page for Forms Including a Payment
If you use our PayPal form feature to add a payment to 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.
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.
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.
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 Short Contact & Feedback Forms Onto your Site
You can embed a contact form, customer inquiry form or short feedback form onto your site without affecting user experience.
Embed a Form When…
- The form is short — 10-15 input fields maximum
- It is self comprehensible and form filling instructions are not needed
There is unfortunately no way to embed a larger registration form or survey onto your site without having a negative effect on user experience. For those forms, simply link to the FormSmarts URL of the form and share that URL (or the form’s shortened URL) on social media.
If you decide to embed a form onto your site, always use the embed code snippet provided by the form builder. Do not embed a form using the FormSmarts URL of the standalone form, even if that appears to work with your browser. This conflicts with security restrictions we’re putting in place and those forms will soon be blocked by modern browsers.
Link to Registration Forms and Other Large Forms
A standalone form almost invariably gives a better, frictionless user experience. In order to protect the security and privacy of their users, browsers impose a growing number of restrictions on embedded content. These restrictions affect a form’s usability when it is embedded on your site.
Link To a Form When…
- The form is long or complex
- The form is accessed both by web visitors and via social media or a mailing list
- The form in intended for a large audience, that may be using a wide range of browsers and devices
- Your audience is likely to fill out the form on mobile device
- You expect a large number of form submissions
- Event registration forms and surveys perform better when accessed by URL on their own page
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.
- Standalone forms accessed by URL load faster and are more scalable
- They are more reliable
- They offer more flexibility
- There are no sizing or other user experience issues
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.
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. However, as a result of adding more fields, or changing a text box to a larger text area, the frame containing the form may no longer be high enough to fit the form. You will then need to re-publish the embedding code to your site. See the section about Form Sizing below.
Customizing Your Form
You can customize several aspects of your forms in the Form Details screen of your account.
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 several factors, like the number and type of fields used, and the form layout chosen.
It is necessary to leave room at the bottom of the form 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.
Manually Changing the Height or Width of a Form
You can change the size of a web form widget by editing the value of the height and width attributes in the HTML snippet (a.k.a. form embed code) given by the form builder.
We do not recommend changing the height of forms. If you do, remember to allow extra space at the bottom of the form, as discussed in the previous section.
The width of embedded web forms can be resized down to 360px without side-effects, and should degrade well beyond that.
How Do I Get Rid of the Vertical Scrollbar
With time, you may need to add more fields to your forms, but forget to refresh the form HTML code on your site. 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.
Only One Form Per Page
It is against our terms of service to embed more than one form in a single web page.
Embed a Form to a Facebook Fan Page
The easiest way to add a form to a Facebook page is to use the FormSmarts URL that comes with each form. Click on the URL link in the Forms Tab of the form builder to show form URLs instead of embedding code. You may also embed the form into your Facebook page using an FBML Box. See instructions to embed a form to Facebook. Feel free to post your questions in the relevant thread of our forum on FormSmarts’ Facebook page if you need help.
A number of users take advantage of our flexible web form platform to
advertise a FormSmarts-hosted survey form or event registration form by
There are a few things to keep in mind if you wish to include a form URL
in a newsletter or mailing campaign:
- you must be a verified form owner
- you may only reference the form by including its URL, and must not attempt to embed the form in an HTML email
If you intend to email more than 1,000 subscribers, ask for a permission beforehand. We may ask you to schedule your mailing at a specific time if the expected click-stream is high.
When contacting FormSmarts, please indicate:
- the rough number of subscribers of your list
- whether this is a one off or recurring mailing
- the date/time of your mailing(s)
- whether advertising the form is the main purpose of the mail
- whether you offer any incentives for form submissions
This information will help us estimate the server load to expect.
Web forms play a key role for visitor (and customer) interaction on many
sites. However, many web designers don’t realize that there may be huge
differences in form abandonment ratio, depending on how well the form is
designed. In this post and follow ups, we’ll give you some tips to help
you make your web forms an effective communication channel.
Always provide form filling instructions.
Don’t assume that all of your visitors will understand how to submit a form without further explanation. Short and clear form filling instructions can reduce form abandonment, and increase the quality of the information collected.
- include a call to action phrase like “Please fill out this form to
- indicate the purpose of the form and the recipient of the information collected
- if applicable, confirm that you will reply, and give an indication of the time frame
Select the correct data type for each input field.
Because of necessary form validation, choosing and incorrect data type may prevent a form user from submitting valid information. When this happens, it is likely to lead to form abandonment.
For example, if you specify that a form field can only contain a Number, it may not work for a phone number. 1233456789 will work, but not 123-345-6789. So use
the Phone type instead. In many cases, the form builder will
pre-select a type for you, but not always. Read
more about selecting an input field data type in the form builder documentation.
Choose the most appropriate input field widget.
Don’t restrict yourself to text boxes and drop-down lists. Take advantage of the full range of HTML form fields with radio buttons and checkboxes. Learn when to use each one.
Using a drop-down list for a yes/no question will slow down the form user, and increase the chances (s)he gives up. Use radio buttons instead. Read tips about choosing the best input field widget in the form builder documentation.
Brand your forms for instant visual recognition.
Always brand your web forms with your own logo. This helps visitors
recognize at first sight who they are about to send information to.
A few people asked if FormSmarts will remain free. Although we may some day offer FormSmarts as commercial service with SLA and additional features, the basic service will remain free.
Note that we will need to charge a one-off fee for some services. For example, we will soon allow users to upload a custom website logo to appear on their web forms. Each image will require human validation, so we’ll need to charge a small fee for this. We will however lift the fee for users who have referred friends/site visitors to FormSmarts, wrote reviews about us on relevant sites, posted a video about using FormSmarts on Youtube, etc.
Increase user confidence by letting us verify you own the websites you are using with FormSmarts. FormSmarts will then display a verified form owner name in the top-right corner of all your forms.
To verify your sites, sign in to FormSmarts, and choose the Verified Websites option in the Settings tab. The form owner name can currently only be a verified web hostname. We will soon also support verified personal or company names. More details here.
It’s a user-contributed video (thanks Dan), so don’t expect professional making and voiceover. If you can do better, let us know.