Online form builder + web form platform

Creating an Online Form

FormSmarts allows anyone to create a form quickly and easily. The video below shows how to build a simple feedback form. Follow the detailed instructions in this guide to create more complex HTML forms, such as survey forms and order forms.

Advanced form generator topics like payment integration, email recipients management, and Excel reporting are outside of the scope of this document. Visit the Help Resources section of the website for an extensive coverage of these topics.

You can create a form in the form builder section of the website (My Forms link at the top-right corner of every page). The form builder will walk you through the two steps needed to generate a fully functional web form in minutes.

1. Creating a form (in the Forms tab of the form builder)
2. Adding input fields (in the Fields tab of the form builder)

Sign In to FormSmarts

First, sign in to FormSmarts form creator using the email address registered on your account and your password. If you haven't got an account yet, register now, and click on the link in the email we'll send you to activate your account. Note that you won't be able to log in before your account is activated.

Create a New Form

You are now ready to create a new web form.

1. Enter a form name
2. Enter a title for your new form. The title should be short and descriptive. It will be used to generate the form's title.
3. Next, enter a return URL. This is the URL (i.e. web address) on your website where users will be sent to, after the form has been submitted. If you don't own a website, just enter http://FormSmarts.com.
4. Finally, you may add form filling instructions. Any instructions you enter will appear at the top of the form.

Press the Create Form button. The form will be created and listed your forms.

Add Input Fields

You now need to populate the form with some input fields, where users will be able to enter information. Visit the Fields tab of the form builder, and make sure your newly created form is selected in the drop-down list Select a Form.

The Fields tab lists all fields attached to that form, and lets you edit fields and add new one.

1. Enter a field name. For a given form, a field name must be unique. So, the new field's name must be different from all the field names already listed.
2. Enter a field title. The title should describe the field's intended content. For example, the title of a “Message” field could be “Message to the webmaster”.
3. Next, you need to choose an field data type among those provided. Selecting the correct type is important for form validaton. The type defines which characters will be accepted in that input field. Refer to the table below for guidance.
4. You then need to choose a data input widget. Most users who are building simple contact forms will only need Text Boxes (i.e. HTML input type text) and Text Areas (i.e. HTML input type textarea). FormSmarts also supports the other HTML form fields widgets for users creating more complex web forms.
5. Last, specify whether the field is optional or not. Users will not be able to submit the form without providing a value for all required input fields.

Field Data Types Reference Table

Data Type	Example Use	Description
Letters	person's name, profession	Field may only contain letters A to Z, spaces, and hyphens “-”
Letters + Numbers	postal address, zip code, phone number	Field may only contain letters, numbers, commas, question marks, spaces, and hyphens “-”
Email	email address	A single email address
URL	URL	A single (URL) web address. Only HTTP is currently supported for the protocol part of the URL.
Positive Integer	number of items purchased, age, year	Up to 9223372036854775807
Number	price	Any valid number, positive or negative, up to 9999999.99
Date	date of birth, booking date	A valid date. Displays a date picker.
Phone Number	phone or fax number	Any local or international phone number.
Country	a country	Shows the standard list of countries. Note that the country of residence of the visitor is automatically pre-selected.
Any Text	comment	Any alpha-numeric character and punctuation. Only use this input field type when no other type applies.

Modifying Form Details

Editing Form Details

To edit a form, visit the Forms tab of the form builder, and click on the icon corresponding to the form you wish to modify.

For each of form, the Form Details screen lets you change all form properties: form name, form title, form filling instructions, return URL, and confirmation message. You can also switch form layout, change form colors, and email recipients.

How to Delete a Form

You may delete a form in the Forms tab. Click on the icon corresponding to the form you wish to remove, and confirm. Deleted forms cannot be recovered. If you only need to temporarily suspend a form, disable it as explained in the next section.

How to Temporarily Disable a Form

If you're using an online form to take registrations for a yearly event (or for that matter, any non-continuous process), you will want to disable the form after the closing date until the next event. Use the pause button to disable a form and the start button to restore it. Changes will appear immediately on your website. When a form is accessed while disabled, an error message is shown stating that the form has been suspended by its owner.

Editing, Reordering & Deleting Fields

Editing Details of an Input Field

To edit the details of a field, visit the Fields tab of the form builder, and click on the icon corresponding to the field you wish to modify.

For each of field, the Field Details screen lets you change all field properties. The form's name, description, data type, widget, and optional status can all be changed from that page.

Reordering Fields

You may sometimes need to change the order in which input fields appear on a form. In the list of fields, use drag & drop to move each field to the position you want.

Deleting a Field

To remove an individual field, visit the Fields tab, and select the appropriate form. Click on the trash icon corresponding to the field you wish to delete.

Publish Your Forms

Because FormSmarts hosts your forms, publishing a form is as easy as publishing a link. We give you two options to let your visitors access your forms: embedding and linking.

Embedding a Form within a Page of Your Site

To embed forms on your website, simply copy the code snippet given by the form builder into the HTML source of a page of your site. You will then need to upload that page of your web server in the usual way.

Note that if you embed a form on your website:

• we won't be able to automatically adapt the form layout to the different types of browsers and devices, like cellphones & mobile devices and regular desktop browsers
• your form will not be available if your site is down or slow

For these reasons, the embedding option is not always recommended.

Posting a Form URL

Alternatively, you can simply post the form URL anywhere you want on the web:

• use the form URL to place a link on your website or blog
• post a link on Twitter, Facebook, etc.
• use the form on ebay to communicate with potential sellers
• include the form URL in emails (restrictions apply)
• build mobile-friendly forms
• use the URL in printed documents

Review Optional Settings

You may optionally customize your web forms in the Settings tab.

Set a Form Owner Name

Set a verified form owner name to increase form users trust and confidence. Once we have verified your website URL, personal name, or organization name, we'll display that name on your web forms.

Brand Your Forms

We advise you to brand your forms with your own logo whenever your visitors will be accessing forms by their FormSmarts URL. Your logo will then be displayed in the top left corner of your forms, thus increasing their visual appeal and user recognition.

Change the Form Recipient or Have the Form Sent to Multiple Recipients

The recipient of every form you create is set by default to your login email address. If you would like the results of some of your web forms to be sent to a different email address (or want to have them sent to several email recipients), you will first need to add one or several form recipients to your account. You will then be able to change the recipients of a particular form in the Forms tab.

Choose the Right Input Widget

Part of designing effective forms is selecting the right input field widgets. Here are some tips to help you choose.

Text Fields

• Use a text input field when you expect a short, one line answer
• Example use: name, email

Text Areas

• Use a textarea for open questions, or when you expect a long, multi-line answer
• Example use: comment, message

Radio Bottons

Good Average Bad

• Use radio-buttons to provide a range of predefined values
• Example: rating (good, average, bad)
• For more than three or four options, a drop-down list may be more suitable
• Can be used for yes/no questions instead of a checkbox
• The first option in the list is selected by default

Drop-Down Lists

Good Average Bad

• Use a drop-down list (HTML select field) to provide a range of predefined answers
• Example: referral/how did you find us?
• Use preferably if there are many options, or if the description of each option spans several words
• Do not use for yes/no questions
• We currently do not support multiple selections. If you need this, submit a feature request.
• The first option in the list is selected by default

Checkboxes

Subscribe to our newsletter

• Use for yes/no questions
• Example use: subscribe to our newsletter?
• You can use radio-buttons instead to give more weight to the choice
• Radioboxes are unchecked by default