AutoForms Documentation

Index:

What are fillable forms?

Online or web forms are forms available on a web page such as an application form or a survey. Many forms available online as HTML pages or PDF documents can only be printed out by the user to fill in by hand or on a typewriter and mail in. Fillable forms can be completed right on the computer by typing in or selecting information on the web page, and are sent instantly to a recipient or data file.

Advantages of fillable forms

  • Do not require any special software to use (other than a web browser and Internet connection)
  • Do not require a printer
  • If created properly, they are accessible to disabled users with screen-readers (see Creating Accessible Forms tutorial from WebAIM)
  • Form information is received immediately by the agency
  • Users can receive instant feedback that the form has been submitted and received by agency

How they work

Fillable forms may incorporate boxes for you to check, options to select, or boxes for you to type into. You will find a button or link at the end of every web form, often labeled "Submit". The Submit button calls on a form action to process the data that has been entered. The form action is most often a program or script on the web server that contains information about what should be done with the form data.

When you click the Submit button, several things may happen. From the user’s perspective, the browser will usually display a new web page with a message confirming that the form has been sent. Behind the scenes, two things are sent to the web server: the data you've typed into the form, and the form action, which tells the server where to find the program to process that form's data. The server runs that program and passes the form's data to it. The program may save the form data to a file, insert data into an email message, or many other functions.

Back to top

What are forms used for?

Common uses of online forms are surveys, order/request forms, feedback, or other services requiring collection of information from the user.

Examples of fillable forms in Maine state government:

Back to top

Can I create my own forms?

Anybody who can create a regular web page and has access to a web server for publishing HTML documents can create forms, since the form definition tags are just regular HTML tags. The complicated part of online forms is the server program that makes the form do something when the Submit button is clicked.

For information about how to create an HTML form, see the Basic HTML Forms section. If you use a web editor such as Dreamweaver, you may want to consult the user manual for instructions on creating forms using your software.

InforME has created AutoForms to assist webmasters whose sites are hosted on the maine.gov server. The tool will provide the functionality for your form and allows you to customize the way your form works. It will not create the HTML form page for you - that needs to be done prior to using the AutoForms tool. This program processes your form data and reads a configuration file that you create to determine what to do with the data. Some of the functions that you can set the program to perform are:

  • check the data for errors and reject it with a message to the user if there is a problem
  • save the data to a file
  • send the data in an email.

Back to top

Introduction to the InforME AutoForms Tool

InforME has created a flexible form program called AutoForms for State of Maine webmasters whose sites are hosted on the maine.gov server. The tool will provide the functionality for your form and allows you to customize the way your form works, without any programming knowledge.

You can use the form to do something as simple as email the form results to a specified email address, or you can set up more sophisticated handling of your form data.

Some of the available options using the form tool:

  • Set up specific fields as required (can’t be left blank)
  • Validate information entered in specific fields, such as number of characters, and display an error message if the user does not enter information correctly
  • Create a customized “thank you” page that appears after the form is submitted, including displaying the form data that was entered
  • Send form data in an email to one or more individuals in your agency
  • Send an auto-email response to the form submitter
  • Save form data to a variety of file types, available for downloading at any time

What AutoForms won’t do:

  • Generate the HTML form page for you. That needs to be done prior to using the AutoForms tool, usually by your agency’s webmaster.
  • Multi-page form applications (unless created as separate forms)
  • Credit card processing
  • Directly send form data into a database. However, you can download a data file and import it into a database.
  • Calculations based on data in form fields
  • Verify identity of the user
  • For complex form applications, please contact the InforME team to discuss your project, or see the Phase 3 InforME workbook.

Back to top

Basic HTML Forms

Required Elements in your HTML Form

HTML forms are part of regular HTML documents. Forms have some additional required tags, including:

Form tag

This HTML tag marks the beginning of a form in an HTML page, and specifies how the form will be processed. When using AutoForms, your form tag should look like this:

<form method="post" action="https://www1.maine.gov/cgi-bin/formproc-v2/username/config">

In the tag, “username” would be replaced by your AutoForms username, and “config” would be replaced by the name of the configuration file you created for this form. Note: the configuration file name is case-sensitive. If you named your configuration file ORDERFORM, you need to use all caps in your FORM tag as well.

Input fields:

These are the areas on the page that can be selected or filled out by the user. See your web authoring software manual or the online resources above for more information about form fields and tags. Some standard input field types are:

Text boxes

These are for entering free-form short text responses, such as your name.
a text box

Radio button

These are for selection one out of a series of options.

option 1 option 2

Check boxes

These are for selecting one or more out of a series of options.
option 1
option 2
option 3

Drop-down list boxes

These are for selecting one out of a series of options.

Submit button

Calls on a form action to process the data that has been entered. The form action is most often a program or script on the web server that contains information about what should be done with the form data.
The code for a Submit button looks like this: <input type="submit" value="Submit">

Closing form tag:

You must mark the end of the form with a closing </form> tag, which should be placed after all form elements including your Submit button.

Back to top

Getting Started with AutoForms

You will need a username and password to use AutoForms. Please complete the online account request form.

Three sample forms with configuration files have been posted for reference.

“Request” is an example of an order form configuration file where the data is sent to an email address and saved in a text file.

“Survey” is an example of a survey form configuration file where the data is saved to a spreadsheet file.

“Filing” is an example of a form for users to file or report data, where an auto-email is sent to the user and the data is saved to a text file.

You can view the sample forms from the AutoForms main page, and their associated configuration files from your AutoForms account.

STEP 1: Creating the HTML Form

Create your form page in HTML, using your web authoring software. Include the required form tags described above and all the data entry fields (text fields, radio buttons, check boxes, etc.) that you need.

Be sure that each form field has a logical name, such as “comments”, “first_name”, etc. Do not use spaces in field names. You may use an underscore character, as in “first_name”. Radio buttons and checkboxes should all be assigned the same name, but have different values. For example, if I have a question "Do you like blue?" with yes and no radio buttons, the field name for both buttons would be "like_blue" and the yes button would have value="yes", the no button would have value="no". This works so that when your form returns to you the value of "like_blue", it will be either "yes" or "no" depending on what the user selected.

The ACTION in the FORM tag of your form should be in the following format:

<form method="post" action="https://www1.maine.gov/cgi-bin/formproc-v2/username/config">

“username” will be replaced by your AutoForms username, the same one you use to login.“config” will be replaced by the name of the configuration or definition file you will create for this form. (You can make up the name now or come back and edit the form tag after you create the configuration file.)

Note: the configuration file name is case-sensitive. If you named your configuration file ORDERFORM, you need to use all caps in your FORM tag as well.

Example:

<form method="post" action="https://www1.maine.gov/cgi-bin/formproc-v2/joe/orderform">

Save and post the form to your website folder.

STEP 2: Login to AutoForms Administrator

Using your web browser, go to the AutoForms Administrator (log in to your AutoForms account on this page)

Login with your username and password

Create a new definition file by typing in a name for the form you want to set up. You can name it anything you want, as long as it is only one word, or two words separated by an underscore or dash (“my-form”) and something that you will recognize later. For example, the file for an order form might be “order”. Try to keep the name short.

Click the “Create” button

Your browser will display the form configuration page.

Note: Instead of creating a new file, you may choose to edit a definition file you have already created by selecting from the list. You may also open an existing definition file and then save it under a new name.

STEP 3: Using the Configuration Page

The configuration or definition page lets you customize your form. This is where you can set up certain fields as required fields, set up how your form data will be stored or processed, and set up a “thank you” page for the user.

Form Info

At the top of the page, enter the full URL for where your form is located online. For example: https://www.maine.gov/department/myform.html.

Field Validations

Field validations are used if you want any fields on your form to be required or validated according to specific criteria. If one of those fields is left blank or not filled in correctly, the user will get an error message.

Only the fields you want to validate need to be entered here. If you do not want to validate any fields, you may skip this section. You may specify as many field validations as you wish. If you have more than three, enter the first three, then click the “add more fields” button to enter more.

Steps:

Field Name:
For each field that you want to be validated, first enter the name of the field. The name must match exactly the name in the field tag on your HTML form. If you called the field “first_name”, enter first_name here.

Validation Type:
Select from one of our pre-set validations in the drop-down menu, or select “User-Defined” to enter your own criteria. The pre-set validations include:

  • Required: this field cannot be left blank
  • Alphabetic: the field can only contain alphabetic characters (letters)
  • Numeric: the field can only contain numerical characters (numbers)
  • Alphanumeric: the field can only contain letters or numbers (no other characters)
  • Phone #: checks for a standard phone number format, i.e., (207)123-1234.
  • Zip code: checks for a standard zip code format.
  • Email: checks for a standard email address format. This does not check whether the email account is valid, just the address format.
  • Date: the field can only contain a date entered in the format “mm/dd/yy”
  • Custom Validation: If you select “User-Defined” for Validation Type, enter your validation criteria in the third box. This option is for the advanced webmaster. You can enter a Perl expression to perform advanced validations for a field.

Error Message:
Here you can type in the error message that will appear if the user submits the form without meeting the requirements you have entered for this field. For example, if the first_name field is required, your error message might read “First name is required. Please enter your name.” You can repeat what was entered back to the user by including the <?fieldname?> in the error message text. For example: “<?date?> is not a valid date. Please re-enter the date in the format mm/dd/yy.”

Error Page

This section allows you to customize the error page that will be displayed to the user if any errors occur in the form, such as a failed field validation. If you do not have any field validations, or if you would like to use the default error page, you may skip this section (leave the boxes blank).

Error Page
Create your own error page template by pasting or typing HTML into this box. For example, you may want your error page to have the same template or header as the rest of your website.

Error Item
You can specify the formatting for the display of the error message text (within your error page) by entering HTML in this box. The placeholder for the error message text is “<? ErrorItem ?>”. For example, you may want the error messages displayed as a bulleted list, in red. This would look like: <li><font color=red><? ErrorItem ?></font>

Data Destinations

The Data Destinations section allows you to customize how your form data will be processed. Note: You may select multiple options.

A. Browser

The first choice to make is what should be displayed to the user after the form is submitted. Should they be sent back to the site home page? Should they see a “thank you” page? You can specify this function in one of two ways.

  • Redirect URL:
    Select this option if you already have a page in your site that you wish the display to the user after form submission. Enter the full URL of the desired page. This can be a “thank you” page that you create in your web editor and upload to the server, or you may want to send the user back to your home page.
  • Generate Page:
    Select this option if you want to create a new page dynamically. To generate a new page, you can type or paste in the HTML code for the page that should be displayed. HINT: create the page in your web editor, then copy the HTML source code for the entire page, and paste it into this box. If you want to display information entered into the form (for example, “You entered the following information:”, you will need to type in the form field names into the appropriate places in the HTML code using this format: <?fieldname?>, where “fieldname” is the name of a field on your HTML form page. Be sure that “send default HTTP header” is checked as well. Note: if you use this option, be sure that any image links in your HTML code for the page include the full URL to the image.

B. Email

If you would like the form data from each form submission to be sent in an email, check the “Email” box. There are two Email sections available to allow you to send two different email messages. For example, you can use the email feature to send the form data to yourself or someone in your agency to process, and you can also send an auto-email to the person who submitted the form.

From:
Enter the email address that you want to appear in the “from” line of the email message. If you want the form submitter’s email to show here, put the field name for email address, such as <?email?> (“email” should be whatever you called your email field on your form). Or, if you are creating an auto-email back to the submitter, you might want something like “webmaster@maine.gov” (your agency’s webmaster address) as the sender.

To:
Enter the email address(es) you want the message to be sent to. You can enter multiple addresses separated by commas. You can use <?email?> to create an auto-email back to the person who submitted the form (note: in this example, the form field to collect the visitor’s email address would have to be named “email”).

Cc:
Enter one or more email addresses that the message should be copied to. You may leave this blank if you do not need to “cc” anyone.

Bcc:
Enter one or more email addresses that the message should be blind-copied to. You may leave this blank if you do not need to “bcc” anyone.

Subject:
Type in the subject line you would like to display for the email message, such as “website feedback” or “thank you for your order”.

Message:
Here you need to indicate the text and form fields you want displayed in the body of the email message. Any plain text that you enter will be displayed in the email message as well as form fields (see the example below). You can display as many as much form data as you want, in any order. This is done by typing the field name as follows: “<?fieldname?>”. <?fieldname?> will be replaced in the message with whatever the submitter entered in that field. You can insert form data into a paragraph or add any type of message to your email.

Example:

Map request
---------------
<?name?>
<?address?>
<?city?>, <?state?> <?zip?>
<?email?>

Lighthouse.... <?Lighthouse?>
Island........ <?Island?
Map O' Maps... <?Map_of_Maps?>

Please complete this order as soon as possible.

C. File

Select this option if you wish your form data to be collected and stored in a file. This file will be stored on the server and can be downloaded at any time for use on your local computer or imported into a database. Saving your data to a file can also serve as a good backup method if you’re sending form data by email, in case email messages are accidentally lost or deleted. Check the “File” box if you want data saved to a file.

In the blank box, you need to indicate which fields will be included in the file, in what order, and how you want them separated.

Fields are inserted by typing the field name as follows: “<?fieldname?>”. The field names you enter must match exactly the names of your fields on the HTML form.
Fields can be separated by a line “|” or a comma.
For example: <?name?>|<?address?>|<?city?> or <?name?>,<?address?>,<?city?>

If you want to save your file as a spreadsheet, use commas for separators, and put quotes around the filenames. For example: “<?name?>”,”<?address?>”,”<?city?>”

After the last field in your list, use the “enter” key once to create a line break. This is important so that each form submission will show up as a separate record in your Excel or data file.

File Extension:
Enter the file extension you wish to use in the “File extension” box. For example, if you want to create a text file, use “txt” (no quotes). To create a comma-delimited file for a spreadsheet or database, use “csv”.

MIME Type:
MIME type is used to indicate what program you will use to read the file. The most common types you would use are:

  • Microsoft Excel: type “application/msexcel” (no quotes)
  • Plain text: type “text/plain” or “application/msword” (no quotes)

Select “Save Definition” when you’ve finished using the Configuration File.

STEP 4: Test your form

Try out your form by typing the URL for the form page in your browser. Type information into your form, submit, and then make sure it functions correctly. (Was an email message received? Was the data saved to the file? Did the “Thank You” pages display?) If your form has field validations, try entering data incorrectly to make sure the validation and error messages are working they way you intended.

STEP 5: Make your form public

Once you’ve tested your form and you know it is working correctly, you’ll want to make it available to the users. To do this, create a link on your website to the form page just as you would to any other web page. Entice users to your form by emphasizing how it will benefit them: “Tell us what you think!”, “Request a map”, or “submit your report online”. If the form submission requires an action from your agency, clearly state for the user how long they should expect to wait for a response. For example, “your order will be processed within 3-5 business days”, “please allow 10 days for delivery”, or “your information will be processed within one week and you will receive an email confirmation at that time”.

Back to top

Data Security

The standard configuration of AutoForms is not designed to collect secure data such as social security numbers. If your form must collect secure data, please contact InforME for assistance at creative@informe.org.

Back to top

Downloading Your Data

Login to your AutoForms account. You will see a list of the forms you have set up. For each one that saves data to a file, there will be a link next to the form name to “download data”. Click on that link to download the file to your computer.

If the file is a text (“.txt”) file, clicking on the link will bring up the data in your browser for viewing, or in Microsoft Word, depending on how you set up the MIME type. To download a copy of the file, right-click on the link and select “Save Target As”.

If your file is a “.csv” file and MIME type is set to “application/MSExcel”, you can open the downloaded file right in Excel.

To import a data file into a database, right-click on the data file (.csv format) and save it to your computer. Then open Access or your database program and import the data file.

You can reset your data file by clicking the “Clear” link next to the form name. Warning: This will delete all data in the file and start recording new submissions.

Back to top

Anti Spam

Is there a way to cut down on spam messages being sent through my Autoform?

Yes, to add some basic anti-spam protection to your forms add a field to your form and give it a tempting name - I like "critical". Hide that field through the use of css. Add a validation to the Autoform definition that requires that field be left empty.

Why does this work? Most spam-bots and spiders find forms and fill in all available fields. Since the spam-bots and spiders don't parse the css, they dont know that the field should be left empty.

Here are the detailed instructions.

  1. Add the field to your form. I like to wrap the field in a div, so that I can also give the field a label, so that it passes html validation. <div id="criticalinfo"> <input name="critical" id="critical" type="text" /> <label for="critical"> </label> </div>
  2. Add the css to hide the divs content. This is a good use of display:none, which we normally avoid using because many screen readers will also hide this. In this case we want as many people as possible to not see this content. div#criticalinfo {display:none;}
  3. Add the field to the Autoform. Under the Field Validations section, add the field critical; choose User-defined => from the Validation Type drop-down menu; enter ^$ into the text input directly following the drop-down menu.

Thats it

reCAPTCHA

Another option is using reCAPTCHA on your form. Download reCAPTCHA instructions (PDF)

Back to top