Starter Form Demo

by
This Starter Form Demo includes extra information to help beginners get started with creating and customizing their own forms.

Primary Form Fields

The shortcodes used to display fields in this section are referred to as “primary fields”. Most WP themes include primary fields when they display posts on the front-end. Also, in the Admin Area, primary fields each have their own special location on the Edit Post screen. It is important to understand that primary shortcodes/fields may be used only once per form. For additional fields, like multiple content textareas, you can use Custom Fields, which are explained further along in this demo.

Name Field

The following shortcode displays the “Name” field when this form is viewed on the front-end of your site. You can click the Preview button to see what it looks like. Notice that we are using several attributes to customize the Name field:
The Name shortcode may be customized with various attributes, including:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • required = whether or not the field is required
Documentation for the Name shortcode and its attributes. Note that the Name shortcode may be added to any form using the “USP:Name” Quicktag.

Title Field

Next up, here is the shortcode used to display the Title field:
Just like with the Name shortcode, the Title shortcode may be customized with various attributes:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • required = whether or not the field is required
Documentation for the Title shortcode and its attributes. Note that the Title shortcode may be added to any form using the “USP:Title” Quicktag.

Tags Field

Here is the shortcode used to display the Tags field:
Here are the attributes we are using to customize the Tags field:
  • label = the field label
  • type = the type of field is specified as a dropdown menu
  • multiple = do not allow the user to select multiple tags
  • required = whether or not the field is required
  • include = which tags to include (overrides general setting)
Note that if no tags are displayed in the Tags field, you may need to create some tags via Posts > Tags. Once your site has some tags to display, you can enable them via the USP General Settings > Post Tags. You can also use the “include” attribute to specify which tags should be included for each form. Documentation for the Tags shortcode and its attributes. Note that the Tags shortcode may be added to any form using the “USP:Tags” Quicktag.

Category Field

Here is the shortcode used to display the Category field:
Here are the attributes we are using to customize the Category field:
  • label = the field label
  • type = the type of field is specified as a dropdown menu
  • multiple = do not allow the user to select multiple categories
  • required = whether or not the field is required
  • include = which cats to include (overrides general setting)
Note that if no categories are displayed in the Category field, you may need to create some categories via Posts > Categories. Once your site has some categories to display, you can enable them via the USP General Settings > Post Categories. You can also use the “include” attribute to specify which categories should be included for each form. Documentation for the Category shortcode and its attributes. Note that the Category shortcode may be added to any form using the “USP:Category” Quicktag.

Content Field

Here is the shortcode used to display the Content field:
Here are the attributes we are using to customize the Content field:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • richtext = indicates that the field should use the WP Rich Text Editor
  • required = whether or not the field is required
Remember, only one primary content field may be used per form. So if you want to add more content fields, use a Custom Field, as explained further along in the demo. Documentation for the Content shortcode and its attributes. Note that the Content shortcode may be added to any form using the “USP:Content” Quicktag.

Excerpt Field

Here is the shortcode used to display the Excerpt field:
Here are the attributes we are using to customize the Excerpt field:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • richtext = indicates that the field should use the WP Rich Text Editor
  • required = whether or not the field is required
Remember, only one primary excerpt field may be used per form. So if you want to add more excerpt fields, use a Custom Field, as explained further along in the demo. Documentation for the Excerpt shortcode and its attributes. Note that the Excerpt shortcode may be added to any form using the “USP:Excerpt” Quicktag.

Secondary Fields

The shortcodes provided in this section display secondary fields. Secondary fields are used to collect data such as URL, Email, Files, Taxonomy, and more. Secondary fields actually are Custom Fields that have their own Quicktags to make them easier to add to forms. If your form includes any secondary fields, they may be viewed in the Custom Fields panel located on the “Edit Post” screen for each submitted post. As with primary fields, secondary fields may be included only once per form.

URL Field

Here is the shortcode used to display the URL field:
Here are the attributes we are using to customize the URL field:
  • label = the field label
  • placeholder = the field placeholder
  • required = whether or not the field is required
Documentation for the URL shortcode and its attributes. Note that the URL shortcode may be added to any form using the “USP:URL” Quicktag.

Email Field

Here is the shortcode used to display the Email field:
Here are the attributes we are using to customize the Email field:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • required = whether or not the field is required
Documentation for the Email shortcode and its attributes. Note that the Email shortcode may be added to any form using the “USP:Email” Quicktag.

Subject Field

When included in a Contact Form, the Subject field is used as the email subject. Here is the shortcode:
Here are the attributes we are using to customize the Subject field:
  • label = the field label
  • placeholder = the field placeholder
  • max = the maximum number of characters allowed for the field
  • required = whether or not the field is required
Documentation for the Subject shortcode and its attributes. Note that the Subject shortcode may be added to any form using the “USP:Subject” Quicktag.

Taxonomy Field

If your theme supports any Custom Taxonomies, you can use this shortcode to include a Taxonomy field in your form:
No terms found for people
Here are the attributes we are using to customize the Taxonomy field:
  • label = the field label
  • tax = the name of the taxonomy
  • terms = the term IDs to be included in the field
  • type = the type of field is specified as a dropdown menu
  • multiple = allow the user to select multiple categories
  • required = whether or not the field is required
The trick for this tag is making sure to include the taxonomy name for the “tax” attribute, and the taxonomy term IDs in the “terms” attribute. So, if the previous shortcode/field is displaying “No terms found for people”, it means that the “people” taxonomy is not supported by your theme. Tip: to include all tax terms automatically, use “all” as the value for “terms” (e.g., terms=”all”). Check out the Taxonomy Shortcode reference for more useful attributes and tricks. Documentation for the Taxonomy shortcode and its attributes. Note that the Taxonomy shortcode may be added to any form using the “USP:Taxonomy” Quicktag.

Files Field

The Files shortcode displays a Files field that enables the user to upload files. Here is the shortcode:
Here are the attributes we are using to customize the Files field:
  • label = the field label
  • placeholder = the field placeholder
  • types = allow only gif, jpg, and png file types
  • multiple = whether to allow user to select multiple files
  • method = method of selecting multiple files
  • required = whether or not the field is required
For the allowed file types, you can specify global and local types. To customize other global options, you can visit the USP Uploads settings. Then to override the global settings for each form , you can use attributes such as “files_min”, “files_max”, and many others. Also, each form may include only one Files shortcode, but you can use Custom Fields to add multiple Files/upload fields. Documentation for the Files shortcode and its attributes. Note that the Files shortcode may be added to any form using the “USP:Files” Quicktag.

Captcha

To protect the form from spammers, we add a captcha field. Here is the shortcode:
Note that the label and placeholder are determined automatically, based on the value of the plugin option, “Antispam/Captcha”, which is located under the General settings tab. Instead of using the default challenge question/answer for the captcha, we can enable Google reCaptcha. Documentation for the Captcha shortcode and its attributes. Note that the Agree to Terms shortcode may be added to any form using the “USP:Captcha” Quicktag.

Agree to Terms

The “Agree to Terms” field actually is a checkbox field that is associated with a toggling “terms” box. To include it, add the following shortcode:
Toggle Terms
Put your terms here..
Here are the attributes we are using to customize the Agree field:
  • label = the field label
  • toggle = the text used for the toggle link
  • terms = the terms displayed in the toggle box
  • alert = the text displayed in the popup alert (leave blank to disable)
For more attributes, check out the “Add an Agree to Terms Box” tutorial at Plugin Planet. Note that the USP Pro JavaScript must be enabled for this shortcode to work. Documentation for the Agree to Terms shortcode and its attributes. Note that the Agree to Terms shortcode may be added to any form using the “USP:Agree” Quicktag.

Custom Fields

In USP Pro, Custom Fields are used to add virtually any type of fields to USP Forms. We have seen several Custom Fields already in this Starter Form, including the URL, Email, and Subject fields. Custom Fields may be used to add other types of fields, such as textareas, select fields, radio fields, checkboxes, and text fields. Here is a list of all attributes for the Custom Field shortcode.

Checkboxes

To add a custom checkbox field, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a checkboxes field already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: field#input_checkbox|checkboxes#Option 1:Option 2:Option 3|checkboxes_checked#Option 1|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Checkboxes
Including that shortcode in the form results in the display of a checkbox field, as defined by its attributes:
  • field = the type of field
  • desc = description/label for the group of checkboxes
  • checkboxes = the options for the checkbox, separated by a colon :
  • checkboxes_checked = the option that should be checked by default
  • data-required = whether or not the field is required
Learn more about custom checkbox fields.

Radio Field

To add a custom radio field, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a radio field already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: field#input_radio|radio_inputs#Option 1:Option 2:Option 3|radio_checked#Option 1|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Radio Field
Including that shortcode in the form results in the display of a radio field, as defined by its attributes:
  • field = the type of field
  • desc = description/label for the group of radio inputs
  • radio_inputs = the radio options, separated by a colon :
  • radio_checked = the option that should be selected by default
  • data-required = whether or not the field is required
Learn more about custom radio fields.

Select Field

To add a custom select field, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a select field already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: field#select|options#null:Option 1:Option 2:Option 3|option_default#Please Select..|option_select#null|label#Options|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Including that shortcode in the form results in the display of a select field, as defined by its attributes:
  • field = the type of field
  • options = list of options (include null for an empty option)
  • option_default = text to use for the null/empty field (default: “Please select…”)
  • option_select = the option that should be selected by default
  • label = the field label
  • data-required = whether or not the field is required
Learn more about custom select fields.

Text Field

To add a custom text field, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a text field already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: label#Text Field|placeholder#Text Field|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Including that shortcode in the form results in the display of a text field, as defined by its attributes:
  • label = the field label
  • placeholder = the field placeholder
  • data-required = whether or not the field is required
Learn more about custom text fields.

Textarea

To add a custom textarea, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a textarea already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: field#textarea|label#Textarea|placeholder#Textarea|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Including that shortcode in the form results in the display of a textarea field, as defined by its attributes:
  • field = the type of field
  • label = the field label
  • placeholder = the field placeholder
  • data-required = whether or not the field is required
Learn more about custom textarea fields.

Custom Files Field

To add a custom Files field, we define a Custom Field on the “Edit Form” screen in the “Custom Fields” meta box. For this Starter Form, a Files field already is defined and ready for use. If you examine the Custom Fields meta box, you will notice a custom-field definition that looks like this: field#input_file|label#Custom Files|multiple#true|data-required#false To the left of that custom-field definition is its shortcode, which for this form looks like this:
Add another file
Including that shortcode in the form results in the display of a custom Files field, as defined by its attributes:
  • field = the type of field
  • label = the field label
  • multiple = whether to allow user to select multiple files
  • data-required = whether or not the field is required
Learn more about custom Files fields and visit the USP Uploads settings to set the default/global Files options (like min/max files, min/max size, etc.).

More types of custom fields

Check out the Custom Fields Shortcode Reference to add many other types of fields, including password, url, search, email, tel, month, week, time, datetime, datetime-local, color, date, range, and number. Tip: you can use the “USP:Custom” Quicktag to insert any Custom Field into the form.

Other Fields and Items

In addition to the fields we have covered so far, here are a few more fields and items that may be added to any USP Form.

Fieldset

By default, each form input is wrapped in a fieldset tag. If you disable this behavior in the plugin settings, you can use the “USP:Fieldset” Quicktag to add fieldset tags manually, anywhere in the form. Learn more.

Reset Link

The “USP:Reset” Quicktag makes it easy to add a “reset” link to the form. Learn more.

Remember Info

The “USP:Remember” Quicktag makes it easy to add a “Remember info” checkbox to any form. That way, if the form is submitted and returns an error, the user information will be “remembered” automatically. Learn more.

Custom Redirect

The “USP:Redirect” makes it easy to specify a custom redirect URL. Adding this to the form tells USP Pro to redirect the user to the redirect URL once the form is submitted successfully. Learn more.

Submit Button

By default, a submit button is added to each form. If you disable this behavior in the plugin settings, you can use the “USP:Submit” Quicktag to add a submit button manually, anywhere in the form. Learn more.

Notes

To learn more about USP Pro, check out the documentation at Plugin Planet. You also can find a list of useful resources in the plugin settings, under the “Tools” tab, in the “Helpful Resources” section. Before submitting this form (yes, it is an actual working form!), make sure to complete the few required fields: Post Title, Post Content, the Captcha, and Agree to Terms. You can fill out other fields as well, to see how they work. Note: this is a post-submission form. To create and customize other types of forms, like registration forms and contact forms, check out the other USP Form Demos, located on the USP Forms menu in the WP Admin Area. You can also make combo forms, as explained in this tutorial for making a combo contact, submit, and register form. One more note: if you try submitting this Starter Form without completing the required fields, an error message for each required field will be displayed at the top of the screen. You can customize these errors in the USP More settings, in the “Primary Field Errors” section. Learn more. If you notice any typos or errors in this Starter Form, please report them. Thank you!