Forms

Allows you to create various pages with forms such as a contact us or a feedback form for your visitors to complete and submit.


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.

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. 

 

 

 


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


First you will need to click on the New Forms icon to create your first form. 

 The Title should be the name of the Form you are creating.

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.

Use the Page dropdown bar to select which page the form should appear on in your website. In the first few steps of this chapter, we created the Feedback Page, and set it up to accept the Forms plug-in. NOTE: You cannot add a form to any other Plug-ins type page or a page that is set as an HTML page. It must have the plug-in Forms associated with it in order for the form to display.

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.
      

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.

Fields

  • None (all standard)

 

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.


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.


Below is how the new form looks on my new Feedback page for my visitors.


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.

 

Click the 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!



Copyright 2009 - All Rights Reserved.