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: Name 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: Title 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: Tags Please select.. Advertisement DESIGN Fashion POST TAGS Sea Smart Quotes Unique 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: Categories Please select.. blog Column Geen omschrijving inzending-hip-2021 Genomineerd HIP 2018 HIP 2021 inzending HIP 2021 longlist HIP 2021 shortlist Inzending HIP 2018 Partner 2018 Partner 2021 Partner 2024 Uncategorized Winnaar HIP 2018 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: Content 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: Excerpt 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: URL 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: Email 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: Subject 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: Files 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: Anti spam vraag: in welk jaar was de vorige editie van H.I.P.? 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: Agree to Terms 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 Option 1 Option 2 Option 3 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 Option 1 Option 2 Option 3 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: Select Field Please Select.. Option 1 Option 2 Option 3 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: Text Field 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: Textarea 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: Custom Files 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, et al). 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. Remember Form Info 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!