You will first need to Install the Plug-in, if you have not already done so.
Next, it is important to know that just installing a plug-in does not make it accessible to your website's visitors. Once it has been installed, you will need to go to the Page Editor and create a new page for each new form you wish to offer your users.
Creating a New Page for the Form
This step will need to be done for each and every form you offer.
Setting Up Your Plug-in
After clicking your Page Editor icon in your Admin Control Panel, you will need to click the text link for a New Page. In this example, we are going to set up a Feedback Form. In the Page title we have inserted the page name. This title is also what will be displayed in your navigation menus. In the Link title we have entered 'Feedback'. Remember, this is the name file that will be created and must be one word. Next decide where you wish the link to display. And finally, since this is a Plug-in, change the Page type from HTML to Plug-in. Click the Create Page button to continue.
To complete the activation of your new Plug-in, you will need to change the Status from Hidden to Active. Next you will need to change the Plug-in to display from the default to the 'Feedback Form', or whichever Plug-in you are actually installing.
See left example of changes.
Finally select Update Page.
After you have completed these steps, you can return to the Control Panel. You will now be able to see and select the Forms icon in your Administrators menu to set up your new Feedback Form.
Accessing the Forms Plugin In the Control Panel
Login to the Control Panel. You will now be able to see and select the Forms icon in your Administrators menu to set up your new Form.
To access your Forms, you will need to click on the icon that is circled in this image (Forms).
Once you have clicked the icon, you will see a menu similar to the one below...
After clicking on the Forms icon you will see the following:
Here you are able to access and administer forms you have already created and create new ones.
Creating a New Form
First you will need to click on the New Forms icon to create your first form. You will then see the below options.
Form Details
Form Title:
Display on Page:
CAPTCHA support:
The administrator will automatically receive a copy of all form responses by E-mail. You may optionally specify one or more addresses, separated by commas, to receive a copy of the form responses below.
Copy Form Responses to (CC):
You can hover your mouse over the tooltip icons (the blue questionmark) to learn more about what each field is.
Next are the FORM INSTRUCTIONS and the SUBMISSION MESSAGE fields.
You should place a bit of instructions in the Instructions field to further clarify for your visitors what the purpose of the form is and maybe what you will be doing with the results.
The Submission Message is the message that will be displayed to the visitor after they have completed and successfully submitted your form.
Click the 'Create Form' button to move on to the next step in setting up a form.
You will now see the message "This form currently has no questions". You will need to configure the question fields in order for the visitor to complete your form. Click the 'Add Question' link to continue.
You will now be able to insert the first question for the first field you wish to ask. Below is a quick run though off all the field choices and their purposes.
Almost all of the fields used share a common set of settings, plus each one generally has a few special settings which are specific to the field type. The "common" field settings are:
Field type: This just defines the input field type, eg: plain text, a selection list, a checkbox, etc.
Caption: The plain text caption that appears next to the field.
Field name: A short name for the field, composed of only the letters a-z and digits 0-9 -- no spaces or punctuation (Internally, this is used as the column name in the database table).
Field size: (used by most, but not all field types) Specifies the size (width) of the field on the screen. This is the equivalent of, for example, using <input type="text" size="xxxx" /> when creating a field in HTML.
Max length: (used by most, but not all field types) Specifies the maximum length of the text entered by the user. This can be longer than the "Field size", and if so, the field will just scroll horizontally. This is the equivalent of, for example, using <input type="text" maxlength="xxxx" /> when creating a field in HTML.
Required: If required, the user must enter a value for the field, otherwise an error will be displayed when the field is submitted.
Default value: Used to provide a default value for the field. For example, if you were creating a field called "Country", you may want it to default to "USA" to save your American users some typing. So you'd enter "USA" here, and the script will automatically put "USA" in the field for the user.
Don't forget to add a submit button at the bottom of the form!
Click the 'Create Form' button to move on to the next step in setting up a form.
Field Types, What They Do, and Descriptions of Their Settings
Here's a breakdown of the field types, what they do, and descriptions of their settings:
Cancel Button
Description
Provides a simple button which, when clicked, redirects the user to a specific URL. Used to return a user to a particular page when he clicks "Cancel".
Fields
URL: Specifies the URL to which the user will be redirected when he clicks the button.
Checkbox
Description
Provides a single checkbox field
Fields
Checked: Determines whether or not the checkbox will appear with a checkmark in it by default.
Checkbox Group
Description
Provides a group of checkbox fields. User can put checkmarks next to as many items as they like.
Fields
Options (one per line): Sets the options that will appear for the user to choose from. eg: entering:
Apple
Orange
Banana
Would provide 3 checkboxes, eg:
[_] Apple
[_] Orange
[_] Banana
Default item: Enter the name of the default item(s). eg: Entering Apple, Banana would put checkmarks next to Apple and Banana by default.
Date
Description
Provides a date field, allowing the user to select a month, day, and year from dropdown boxes.
Fields
Default value: The default value for the date field, in YYYY-MM-DD format.
Start year: The first year displayed in the "year" dropdown box.
End year: The last year displayed in the "year" dropdown box.
Time
Description
Provides a time field, allowing the user to select an hour and minute from dropdown boxes.
Fields
Default value: The default value for the date field, in HH:MM:SS format.
Date and Time
Description
Provides a date/time field, allowing the user to select a month, day, year, hour, and minute from dropdown boxes.
Fields
Default value: The default value for the date field, in YYYY-MM-DD HH:MM:SS format.
Start year: The first year displayed in the "year" dropdown box.
End year: The last year displayed in the "year" dropdown box.
Display Field
Description
Provides an easy way to display HTML text in a form. This is typically used to display instructions for filling out the form.
Fields
Text to display: The text to display on the form. HTML code is allowed.
E-mail Address
Description
Provides a field into which users can enter an E-mail address. This field is validated by the forms system; input MUST be in the format user@domain.tld or an error message will be displayed when the user submits the form.
Fields
None (all standard)
Floating Point Number
Description
Provides an input field for a floating-point number. A floating-point number is any number which includes a decimal point; for example, a dollar value (199.99) or a temperature (98.6).
Fields
Decimal places: The number of decimal places to store. For example, if the "decimal places" was set to 1 and the user entered a number with two decimal places (such as 92.49) this would be rounded up to 92.5.
Signed: Specifies whether or not signed (negative) numbers should be permitted. If this is not enabled, then all numbers must be positive.
Integer
Description
Provides an input field for an integer, or "whole number". An integer is any number which does not include a decimal point; for example, an age (27) or a quantity (4).
Fields
Maximum value: Specifies the maximum size of the number the user can enter. The options provided correspond to internal size limits, and there is a performance penalty for the larger sizes; always try to use the smallest limit possible for your data. For example, for something like an Age field, a maximum value of 255 is plenty; setting the maximum value to 4 billion would be wasteful and unnecessary.
Signed: Specifies whether or not signed (negative) numbers should be permitted. If this is not enabled, then all numbers must be positive. Note that allowing signed integers reduces the maximum a value by half.
Multi-line Text Field
Description
Provides a multiple-line text field into which users can enter freeform text. This corresponds directly to an HTML <textarea> tag, and is commonly used for submitting comments, special instructions, and so-on.
Fields
Rows: Specifies the number of rows (vertically) that will be provided for text input.
Columns: Specifies the number of columns (horizontally) that will be provided for text input.
Password
Description
Provides a masked field into which a user can enter a password. Note that this is generally reserved for internal use only; saved passwords cannot be retrieved as they are stored using a one-way hash.
Fields
None (all standard)
Radio Buttons
Description
Provides a group of radio buttons fields. User can select only one option from the list.
Fields
Options (one per line): Sets the options that will appear for the user to choose from. eg: entering:
Apple
Orange
Banana
Would provide 3 radio buttons, eg:
( ) Apple
( ) Orange
( ) Banana
Default item: Enter the name of the default item(s). eg: Entering Banana would place a bullet next to "Banana" by default.
Reset Button
Description
Provides a button to reset the form (clearing all form fields).
Fields
None (all standard)
Selection List
Description
Provides a dropdown selection list from which the user can select one (or more, depending on settings) item(s).
Fields
List size: Sets the vertical size, in lines, of the selection list. Generally you would set this to 1 for single-selection lists, or a reasonable number such as 5 for multiple-selection lists.
Multiple selections: Specifies whether or not the user is allowed to select multiple items from the list (by holding Ctrl while clicking on items). If not, the user can only select a single item from the list.
Options (one per line): Sets the options that will appear in the dropdown box for the user to choose from. eg: entering:
Apple
Orange
Banana
Would provide a dropdown box containing those three items.
Default item: Enter the name of the default item(s). eg: Entering Apple,Banana would highlight Apple and Banana by default.
Submit Button
Description
Provides a button on which the user can click to submit the form.
Fields
None (all standard)
Text Field
Description
Provides an input field into which the user can enter a single line of text. This is the most common type of input field, used for entering names, addresses, and so-on.
Now you will see the current questions available for this form. I have gone ahead and completed the next question in this example. I created a place for them to enter their Comments and made sure to allow them multiple lines of text (Textarea field).
Here you can also Edit or Delete questions, move the question up or down in the list, or add new questions to this form if needed.
Don't forget to add a submit button at the bottom of the form!
Example Form
Below is how the new form looks on my new Contact page for my visitors.
Contact Us
Managing Your Form Contacts
Upon a visitor completing a form, you will be notified of the results via email. This information is also stored online for your review at anytime, and edit or delete any or all aspects of this form. Clicking the Forms icon will allow you to do this.
Edit Form | Delete Form | Form Questions | Form Responses
Click the Form Responses link to see a log of all submissions related to a particular form.
Here you can view the name of the person submitting the form, the date it was submitted, and the IP address of the submitter. Clicking the View link will allow you to view the individual results of this form. Clicking the Download in Excel Format will allow you to download the results in a spread sheet format that you can open in Microsoft Excel.
Upon clicking the view link, the results will layout like this:
You can use your Forms Plug-in to create all types of forms! Feedback, contact us, contest entries, subscribing to your newsletters, or whatever. Have fun!
