How to add extra fields

Question:
I want to use extra form fields for phone number, company name, etc. How do I add extra fields?

Answer:
All form field types are supported, as many as you need. You can add extra fields on the form edit settings page on the Fields tab.

Instructions for how to use Extra Fields:

Version 4.xx, instructions.

Navigate to the Fields tab on the form edit settings page.
You can change the order in which the fields appear on the form. Simply click on a field somewhere outside any of the text boxes and drag it into the position you desire. When you click ‘Save Changes’, the new field order will be saved.

Click on the “Show Details” button to the right of the field name to see the details for any field.

You can also add extra fields of your own design for phone number, company name, etc. To create an extra field, just click on the ‘Add New Field’ button on the right. Then choose the settings, including whether you want the field to be required or not.

There is a checkbox to temporarily disable a field. If you don’t need it any more, you can permanently delete a field with the ‘Delete Field’ button.

Field Names must be unique. The Names on the default standard fields (Name, Email Address, Subject, Message) cannot be changed on the Field tab, but you can change the label that displays on the form on the Labels tab.

Version 3.xx, instructions.

To enable an extra field, just enter a label. Then check if you want the field to be required or not. To disable, empty the label.

Text and Textarea fields:

The text field is for single line text entry. The textarea field is for multiple line text entry.

extra-fields-1

extra-fields-2

Checkbox field:
This is a single checkbox. The field name is displayed next to the checkbox.

Checkbox, Checkbox-multiple, Radio, Select, and Select-multiple extra fields:

These allow the user to select from a list of options. You can use select-multiple and checkbox-multiple to allow the user to select more than one option from the list.

The following instructions for adding options was for version 3.xx, for version 4.xx, see the next section.

Version 3.xx options:

To enable fields with multiple options like checkbox, radio, select, or select-multiple field types; first enter the label and a comma, then include the options separating each one with a semicolon like this example: Color:,Red;Green;Blue. To make “Green” the default selection: set “Default option” 2. The “Default option” setting can be used for for checkbox, radio, or select field types.

If you need to use a comma besides the one needed to separate the label, escape it with a back slash, like this: \,

You can also use fields that allow multiple options to be checked at once, such as checkbox and select-multiple like in this example: Pizza Toppings:,olives;mushrooms;cheese;ham;tomatoes. Now multiple options can be checked for the “Pizza Toppings” label.

By default radio and checkboxes are displayed vertical. Here is how to make them display horizontal: add the tag {inline} before the label, like this:
{inline}Pizza Toppings:,olives;mushrooms;cheese;ham;tomatoes.

The first option of a select field type can be in brackets to indicate that it must be selected,
example: Color:,[Please select];Red;Green;Blue.

extra-fields-3

extra-fields-5

Version 4.xx options are simplified:
In version 4.xx, you no longer have to enter the options in the label field. And you do not have to escape comas with a slash. If you upgrade from version 3.xx to version 4.xx, it will convert your settings automatically.

Now the options are entered in the “Select options” box, one per line.

You can also set the default selection with “Default option.” You can use select-multiple and checkbox-multiple to allow the user to select more than one option from the list.

By default, radio and checkboxes are displayed vertically, one per line. To make them display horizontally, check the “Inline” box.

The first option of a select field type can be in brackets to indicate that it must be selected,
example:
[Please select]
Red
Green
Blue

extra-fields-3-new

extra-fields-4

extra-fields-6

Attachment field:
The attachment field is used to allow users to attach a file upload to the form. The attachment is sent with your email, then deleted from the server after the email is sent. You can add multiple attachment fields. Tip: How to add attachment fields

Date field:
The date field shows a calendar pop-up to allow the user to select a date. This ensures that a date entry is in a standard format every time.

Time field:
The time field is used to allow a time entry field with hours, minutes, and AM/PM. The time field ensures that a time entry is in a standard format. If you want 24 hour time format, select the setting Time Format (12 or 24 hour) in the general field settings below.

Email field:
The email field is used to allow an email address entry field. The email field ensures that a email entry is in a valid email format.

URL field:
The URL field is used to allow a URL entry field. The URL field ensures that a URL entry is in a valid URL format.

Hidden field:
The hidden field is used if you need to pass a hidden value from the form to the email message. The hidden field does not show on the page.
Version 3.xx: You must set the label and the value. First enter the label, a comma, then the value. Like in this example: Language,English
Version 4.xx: You must set the field name and default value.

Password field:
The password field is used for a text field where what is entered shows up as dots on the screen. The email you receive will have the entered value fully visible.

Fieldset:
The fieldset(box-open) is used to draw a box around related form elements. The fieldset label is used for a title (legend) for the group.
The fieldset(box-close) is used to close a box around related form elements. A label is not required for this type. If you do not close a fieldset box, it will close automatically when you add another fieldset box.
Tip: How to add border fieldsets to the form

Field Properties:

Some of these field properties apply only to certain field types. Properties irrelevant for the selected field type will be ignored.

Tag:
Version 4.xx: The field Tag is used to identify the field for email settings, shortcodes, and query variables. Field tags must be unique. If you leave the Tag entry blank, one will be generated for you based on the field name. If you change a field name, you might want to change the tag to match. Or just delete the tag, and a new one will be generated for you.

Default:
Version 4.xx: Use to pre-fill a value for the field. For select and radio fields, enter the number of the option to pre-select (1 = first item, etc.). For select-multiple and checkbox-multiple, enter the list item number(s) to pre-select separated by commas. For a checkbox, enter “1″ to pre-check the box.

Default as placeholder:
Check this setting if you want the default text to be a placeholder inside the form field. The placeholder is a short hint that is displayed in the input field before the user enters a value. Works with the following input types only: name, email, subject, message, text, textarea, url, and password. This setting is sometimes used along with the “Hide label” setting.

When using “Default as placeholder” setting with “Enable double email entry” setting enabled. The “Default” setting should be in this example format: “Email==Re-enter Email”. Separate words with == separators.

When using “Default as placeholder” setting with “First Name, Last Name” setting enabled. The “Default” setting should be in this example format: “First Name==Last Name”. Separate words with == separators.

When using “Default as placeholder” setting with “First Name, Middle Name, Last Name” setting enabled. The “Default” setting should be in this example format: “First Name==Middle Name==Last Name”. Separate words with == separators.

When using “Default as placeholder” along with the “Hide label” setting, you may want to add the required field indicator to the default text. Example: Name * or “First Name *==Last Name *”. This is necessary if you have the field required, and the label is hidden so the standard required indicators are also hidden.

Hide label:
Check this setting if you want to hide the field label on the form. This is sometimes used along with the “Default as placeholder” setting.

Default text:
Version 3.xx: Use to pre-fill a value for a text field. Can be used for text or textarea field types.

Default option:
Version 3.xx: The extra field “Default option” setting can be used to set the default(preselected option) for these field types: checkbox, radio, or select.

Like in this example for a select default:
Color:,Red;Green;Blue.
To make “Green” the default selection: set “Default option” 2.

Example of checkbox default:
You have a checkbox to “Subscribe to email newsletter” and you want it selected by default.
Set “Default option” 1

Select options:
Version 4.xx: List of options for select, select-multiple, radio, and checkbox-multiple field types. Type the options, one per line. This entry is required for these field types. The first option of a select field type can be in brackets to indicate that it must be selected, example: [Please select]. If you add options as a key==value set (use == to separate) the value will show on the form and the key will show in the email.

Inline:
Version 4.xx: If checked, checkboxes and radio buttons appear horizontally on one line instead of vertically one per line.

Max length:
Version 4.xx: Use to limit the number of allowed characters for a text field. The limit will be checked when the form is posted. Can be used for text, textarea, and password field types. This will not change the size of the field on the form. To change that, use the size attribute (see below), or your add a width attribute to the “Input text fields” setting on the Styles tab.

Required field:
The extra field “Required” setting can be used to set the form field so that it is required when filling out the form. Required fields will show a warning if the user submits the form without selecting the required field. If the field is not required, then the form can be submitted without selecting the field. The field is then considered optional. Can be used for any field type.

Attributes:
Use to insert input field attributes. Example: To make a text field readonly, set to: readonly=”readonly” Can be used for any extra field type.

Validation regex:
Use a regular expression to validate if form input is in a specific format. Example: If you want numbers in a text field type but do not allow text, use this regex: /^\d+$/ Can be used for text, textarea, date and password field types.

Regex fail message:
Use to customize a message to alert the user when the form fails to validate a regex after post. Example: Please only enter numbers. For use with validation regex only.

Label CSS/Input CSS :
Use to style individual form fields with CSS. CSS class names or inline style code are both acceptable. Note: If you do not need to style fields individually, you should use the CSS settings on the Styles tab instead.

HTML before or after field:
Use the HTML before or after field settings to print some HTML before or after an extra field on the form. This is for the form display only, not E-mail. HTML is allowed.

Follow previous field:
Version 4.xx: Check this setting if you want this field to show on the form following the previous field on the same line. For example, you could put state, and zip on one line. This feature seems to be limited to two fields, and it is only compatible with the “labels on top” style.

Do you need help?

Donations by PayPal:

If you find this free contact form program/plugin useful to you, please consider making a small donation to help contribute to further development. My time is very limited and I get dozens of support emails every day. If you are not able to donate, that is OK. Thanks for your kind support! - Mike Challis

Donations by cash or check:
Mike Challis
PO Box 819
Long Beach WA 98631

Comments are closed.