In this tutorial, we’ll build a simple form using USP Pro. The form will include three fields: Name, Email, and Telephone. Required time: about 10 minutes. Skill level: beginner.

Related: You may also want to check out the video tutorial on Creating & Displaying USP Forms →

Step 1

Visit USP Forms and click on “Add New”.

Step 2

It the Form Title field (the first blank field at the top of the screen), enter a title to use for the form. Note that this title will only be seen by the admin. After adding the title, click the “Publish” button to publish the form (it will not be seen anywhere on the frontend at this point).

Step 3

In the Form Content Field (the large field located beneath the Quicktags), add the following shortcodes:

[usp_name label="Name" placeholder="Name" required="true"]
[usp_email label="Email" placeholder="Email" required="true"]

Note that you can customize the shortcode attributes as desired.

Step 4

Now to add the field for Telephone. This will be a custom field. Beneath the published form, look for the “Custom Fields” panel. In it will be displayed fields that look like the following:

[usp_custom_field form="123" id="1"]
[usp_custom_field form="123" id="2"]
[usp_custom_field form="123" id="3"]

Note that form="123" and id="1" will be different for each form that you create. For the Value of the first Custom Field, replace the following code:

data-required#true

..with this:

data-required#true|name#Telephone|label#Telephone|placeholder#telephone

Click the grey “Update” button there on the Custom Field to save the changes, and then also click blue “Update” button to save changes on the entire form. Here is a list of attributes that you can use to customize your Custom Fields. For more help with adding Custom Fields, check out this video tutorial.

Related: You may also want to check out the video tutorial on Adding Custom Fields →

Step 5

Now that your Custom Field is ready, you can add it to the form. After doing so, your form will look something like this:

[usp_name label="Name" placeholder="Name" required="true"]
[usp_email label="Email" placeholder="Email" required="true"]
[usp_custom_field form="123" id="1"]

Notice that we added the Custom Field Shortcode to the form. Again click the blue “Update” button to save changes made to the form.

Step 6

Your form now is complete. You may now view the form on the front-end by clicking the “View post” link that is displayed above the Post Title field (near the top of the screen). On the front-end, your form will include three fields:

  • Name
  • Email
  • Telephone

To customize your form, check out this tutorial.

Going further

After successfully building your form, you’ll probably want to display it on one of your Pages. Here is a guide that explains how to do it.

References