Using a simple Form editor you can easily create different types of web forms that can help you interact with your site visitors or gather user information. The Form editor is very similar to the Text and Image editor, but has a set of additional options for customizing your forms. It lets you add all types of form fields you may need, and arrange them as you like to create any type of web form - Feedback form, Product / Service Information Request forms, Subscription forms, Surveys and Questionnaires. You may also define the actions triggered by the submission of the form - it may send an email, post the information filled in the form to a Forum or Blog on your site or may join the users who submitted the form to a mailing list.
To add a form to your website simply reach for the top menu and click Add Content > Form. Green rectangles will appear to indicate the locations where a form may be added. Select the desired location by clicking on a green rectangle and the Add Form popup will be displayed.
Inside the empty Add Form editor a button will be automatically added. The Submit button is a mandatory part of each form and you may not delete it. Above the Submit button you may add any type of form fields you may need - text field, text area, select field, checkboxes, radio buttons and may arrange them as you like. You may also add a button just next to the Submit button to clear the form fields, if needed.
Review of the different types of fields you may have in your form
|1. Text Field |
The Text Field may be used in your form to type text which is fairly short, and does not need to be split in lines. To add a Text Field press the button from the Form editor tools menu. Now click over the Text Field you have added and you will see a set of options displayed in the right pane of the Form editor.
- Type determines what information users should fill into this field.
1. Text: the text users fill in will appear just as they typed it
2. Password: the text will appear as **** so other users may not see it
3. File: visitors can upload image, audio, video and other binary files to your site. When your site visitors submit to the form on your site you will receive an email with the information and a click-able link to the "File" they uploaded.
4. Hidden can be used when you need to gather system-related information (like IP or browser used to submit the form) or add data which users should not see. A hidden field will not be visible on the page.
- The Name, just like the name of a person, is used to identify the form field when you need to refer to it anywhere inside the form editor as well as in the email / blog entry generated by this form. That is why each form field should have a unique Name.
- You may adjust the Width of the text box either by typing a different width number or by just dragging the resize controls of the field text box (the resize controls will appear when you click over the form field).
- Max Length is the maximum number of symbols this form field can accept. Your form may visually be very short, but it will accept as many symbols as you define in Max Length.
- Validate As field will let you define the type of content users are required to fill into this form field. If they don't fill in the proper content type - they won't be able to submit the form. E.g your form field Email may be validated to accept just content type Email. Thus if some user submits a form with incorrect email address (like me@yahoo or meyahoo.com) on trying to submit of the form the user will see a notice to correct the email.
- Default Value - This value will be pre-filled upon opening of the form and the visitor will be able to change it. The following special strings will be replaced with the corresponding values:
$date - Date in format YYYY-MM-DD
$date_time - Date and time in format YYYY-MM-DD HH:MM
$browser_ver - Browser version and type of operating system
$referrer - The page the visitor came from (referrer page)
$ip - Visitor's IP address
2. Text Area
The Text Area form field is similar to the text box field but can hold longer, multi-line text. Add a Text Area from the form editor > . Click over the Text Area field you have added to see its customization options displayed to the right.
The options Name, Width, Validate As and Default Value are identical to those of the Text Field. In addition, here we have :
- Height of the text area - you may change it either by changing the number in the height field or by dragging the text area size controls.
- Wrap - defines the wrapping of the submitted form field text when displayed in an email or forum / blog. Choose Default value to have your browser and mail client (Outlook, etc) wrap the text according to their default settings. Set wrapping Off to disallow the wrapping of the text when it is typed. Choose Physical to display the text in the mail the way it was wrapped in the text area. Choose Virtual to allow the mail client to decide how exactly the text should be wrapped.
3. Select Field
The Select Field is a box with a dropdown list inside, or a box with several options displayed one below the other. Add a Select field from the Form Editor > button. Click on the select field you have just added and you will see its properties again to the right. The new options displayed here are:
- Type - if you choose Menu type the select field will be a dropdown with options. If List is selected, the available field options will be listed one below the other.
- The Options will be displayed as variants for selection in your Select Field. The Option Name is the exact text to appear in the dropdown / list, and the Option Value is the text that will be sent to you in an email or posted to a forum when the respective option is selected. Using up/down arrows you may rearrange the options in the dropdown or list. You may also delete options as well as choose a specific option to be selected by default.
Checkboxes are used when there is a list of possible options and the user may select any number of choices from them. A stand-alone checkbox may also be used for a single option that the user may turn on or off.
Add a checkbox from the form editor > and select it to see the customization options in the right pane.
- The checkboxes, just like all other form fields, have a Name which identifies the field in the form template editor as well as in the email/blog entry generated by this form. You may consider the Name as the question your users will have to answer by checking or un-checking the checkboxes associated with it.
- The Value of the checkbox is the answer you will get on your question. I.e if you set the checkbox value to Yes when the users checked this checkbox this means they answered your question affirmatively.
- If you check the Default State option, your checkbox form field will be initially checked when the users load your form.
- And finally, if you make a checkbox mandatory users will be required to check it before being able to submit the form. E.g if you want them to agree to your Terms and Conditions before they may submit the form - add an Agreement checkbox and make it Mandatory.
5. Radio buttons
Radio buttons are used when there is a list of several mutually exclusive options - i.e. the user can select just one option out of all available. Add a radio button from the form editor > . Now click the radio button to see the customization options for it displayed to the right.
- All radio buttons representing the options for one and the same question must belong to the same Group. I.e. the Groups are the questions which will have radio button answers. At any time only one radio button from a group may be selected - clicking another radio button will deselect the previously selected radio button in this group.
- The Values of the radio buttons are the actual answers to your questions. The value gets posted in the email / forum when this radio button is selected.
Imagine your question was Do you like my site and you want to give the users 3 options: Yes, No and Needs more work. Your radio button group may then be named 'LikeMySite' and the Values of the radio buttons will be Yes, No and Needs work. If a user selects the radio button with value Yes, in the email or forum where the results of the form get posted you will receive this information as LikeMySite: Yes
- The Default State and Mandatory options work the same way as described for the checkbox field.
6. Reset button
When pressed, the Reset button will clear all form information filled in by the user. To add a Reset button click the icon in the form editor. The only option associated with this form field is the Caption - this is the text that is displayed on the button. Usually the Reset button is positioned next to the Submit button.
7. Submit button
The Submit button is the main functional element of the form - it sends the form information filled in by the user to an email, forum / blog or mailing list, depending on the settings you have specified for your form. Your form will not work without a Submit button, that is why you are not allowed to delete it. A single form may only have one Submit button. Click on the Submit button to access the available customizations for the form as a whole.
As Name you can specify the name with which you will identify your form. As Submit Caption specify the text you wish to be displayed on the Submit button. From the Next page setting you can define which page from your site should open after successful submission of the form (it may be a Thank You page for example). The Actions listed in the Form properties panel define how the form information submitted by the user should be processed. We will review all available form actions and the settings for them in detail below.
To complete the form we need to specify what the Submit button should do.
- Should it post the information submitted to an email?
- Or maybe submit some of the content in this form to a forum or blog on your site?
- Or just join the email entered somewhere in your form to a mailing list on your site?
Lets review each of these options and then see how to set your form to do one or all of the above.
Click the already added button. The list of available Actions for the form will appear in the right pane of the Forms Editor - Send to Email, Submit to Forum, add an email filled in the form to a Mailing List added to your site, or Send Confirmation Email to the user. Checking any of these options will open a set of advanced preferences.
1. Send to Email
Lets say you want to send the contents of your form to your email. Check the Send to Email checkbox to expand all options in this section. The To block is used to specify the address to which all submitted forms should be addressed. The From block will specify the address from which the form will be sent.
Set a Subject of the mail that will be received on submission of the form (like New Information Request) and Format of the mail. If Plain is selected any formatting will be lost. If HTML is selected the submitted email will be displayed in HTML format if your mail client supports this option.
To display additional information and/or apply special formatting to the mail containing the form data submitted, choose Use Template option and a Template Editor will open.
The Template Editor resembles a simplified Text and Images editor, and has its own Save and Cancel links which will let you save the template or go back to the Form editor. The Template Editor will let you apply your own formatting and include in the email body the value of any field from the form. Use the Value dropdown on top right of the Template Editor to insert placeholders for the desired field values in your template. You will see that all form fields you have added to your form appear in this dropdown referenced by their Name. After your template is ready and saved, each submission of your form will result in an email sent to your email, and the content of the email will follow the content structure you have set in your Template.
2. Submit to a Forum or Blog
If you want to submit the form content to a Forum or Blog on your site select Submit to Forum checkbox and a panel with detailed preferences will expand. Select a forum / blog that you already have on your site. In the Fields Map section define the mapping between the form fields and the mandatory fields for each forum posting: Posting Title, Posting Content and User Email.
As with Send to Email option, you may choose to use a Template instead of the fields from the Posting Content dropdown. If you select Use Template you will be able to define your own formatting and may include any other field from the form.
3. Add to Mailing List
By selecting the Mailing List checkbox all emails submitted through your form will be added to a Mailing list on your site. In the set of options that will expand specify the mailing list to which the submitted emails should be added. In the Fields Map section specify which fields in your form should be mapped as the Email and Subscribe fields. If you wish that the users are added to your mailing list only after their email address is confirmed - check the Confirmation checkbox and they will receive a confirmation email with a link they need to click to confirm their subscription. Otherwise, users will be immediately joined to the selected mailing list.
These are the basic available Form Actions. Please note that depending on the purpose of your form, you may select a combination of actions to be performed on Submit. For example, your form may both post to a Forum / Blog, send a notification email with the results and subscribe the user to a Mailing List. For an example of combined actions - please refer to the sample usage of a Form in setting up a Guestbook on your site.
4. Send Confirmation Email
This will allow you to send a timely response to your visitors notifying that their information has been properly submitted and will be processed shortly. After you select the checkbox for Send Confirmation Email option, a section with additional parameters will expand. In the To dropdown select the name of the field in your form where visitors will fill in their email. This will assure that the confirmation will be sent to the email address provided by the user. It is recommended to set email validation for this field to make sure it will be a valid email address. Then, in the From field enter the address from which the confirmation message will be sent. In Subject fill in the desired subject of the confirmation message. Select Plain or HTML Mail Format. If you want to modify the text of your auto-response message, click on the Template Edit option.
The Form editor features two ready form wizards - Feedback form and Mailing list form. They come with ready fields and predefined settings that you can easily modify, if you need to. To add to your site a ready mailing list or feedback form use the wizard icons from the panel of the Form Editor - for Mailing list form, for Feedback form. Apply modifications if needed, move the already available button to the end of the form, specify appropriate action and you are all set!