USP Pro makes it easy to add a “Post Content” field to any USP Pro Form. This guide shows how to do it with a click, and also explains how to customize the content field with custom attributes, markup, and text.

Add Post Content field

To add a Post Content field to any USP Pro Form, add the [usp_content] shortcode. You can either just copy/paste the shortcode directly into the form, or you can click the Quicktag button. Here are the steps:

  1. Visit the “Edit USP Form” screen for your form
  2. Above the content editor, click the USP:Content Quicktag
  3. That will open a dialog box, where you can customize the field (like enable the RTE/Visual Editor)
  4. Click “OK” to insert the field into the form

Done! Again, the above steps add the primary “Post Content” field to the form.

Important: Primary fields such as Post Content, Post Title, Post Categories, Post Tags, and so forth may be used only once per form. If you need to add more textarea fields, follow the steps in the next section, Add Custom Content Field.
Shortcode attributes

If you want to customize the “Post Content” field, you can add any of the following attributes to the [usp_content] shortcode:

  • class – any additional class names, comma-separated
  • placeholder – placeholder text (default: “Post Content”)
  • label – label text (default: “Post Content”)
  • required – should the input be required (“yes” or “no”)
  • max – maximum number of characters (default: “999999”)
  • cols – number of columns for textarea (default: “30”)
  • rows – number of rows for textarea (default: “3”)
  • richtext – enable WP richtext editor (“on” or “off”)
  • custom – any valid attribute, for example: custom="key='val'" (use single quotes)
  • fieldset – enable auto-fieldset: true, false, or custom class name (default: true)

As explained previously, you can add most of these attributes when using the USP:Content Quicktag.

Tip: You can find all available attributes for any USP Pro shortcode in the shortcode reference. For example, [usp_content].

Add custom content field

Let’s review. As explained in the previous section, the [usp_content] shortcode adds the primary “Post Content” field to your form. Whatever the user adds to that field will be used as the post content for the submitted post. This field can be included only once per form.

Now, what if you need to add another textarea/content field? Like for a user to add a product review or other text content. It can be done easily with custom fields. There are different types of custom fields: textareas, text inputs, checkboxes, dropdown menus, and such. USP Pro supports all types of custom fields. Here is a tutorial that explains how to add custom textareas to any USP Pro Form.

Note: USP Pro forms support any number of custom textareas and other types of custom fields.

Customize field markup (advanced)

While there are existing ways to modify the output field HTML/markup, it also is possible to customize markup directly. This is true for any USP Pro form field. For example, when editing our form, we can replace the Post Content shortcode:

[usp_content]

..with its output markup, right there directly in the form. That enables us to do things like use a text <input> instead of a <textarea> for the Post Content field. Or just minor changes like adding attributes, markup, text, etc.

Important: If you replace a shortcode with its markup, do not change any name or id attributes. And do not remove any hidden fields or values. Basically keep changes to a minimum and don’t change with any existing attributes.
Example

Although this is aimed at advanced users, it’s really not that complicated. Let’s look at a specific example. Say we want to use a text <input> instead of a <textarea> for the Post Content field. Here is how we would do it:

Step 1: Copy the default field markup

  1. View the form on the front end
  2. Use the code inspector in your browser to inspect the Post Content <textarea>
  3. Look at the surrounding code for the nearest <fieldset element
  4. Right-click and select “Copy Element”
  5. Return to edit your form
  6. Replace [usp_content] with the markup copied in the previous step

Assuming the default shortcode and plugin settings, the markup will look similar to this:

<fieldset class="usp-fieldset usp-fieldset-default">
	<label for="usp-content" class="usp-label usp-label-content">Post Content</label>
	<textarea name="usp-content" id="usp-content" rows="5" cols="30" data-required="true" required="required" placeholder="Post Content" class="usp-input usp-textarea usp-input-content"></textarea>
	<input type="hidden" name="usp-content-required" value="1">
</fieldset>

Now we can customize attributes, markup, etc. as needed. Continuing with the example, let’s replace the <textarea> with just a regular text <input>. After making the changes, the field code looks similar to this:

<fieldset class="usp-fieldset usp-fieldset-default">
	<label for="usp-content" class="usp-label usp-label-content">Post Content</label>
	<input name="usp-content" id="usp-content" data-required="true" required="required" placeholder="Post Content" class="usp-input usp-textarea usp-input-content"></textarea>
	<input type="hidden" name="usp-content-required" value="1">
</fieldset>

With this code added to the form, the Post Content field will display as a text input instead of the usual textarea.

Note: The above shortcode-replace-with-markup technique works with any type of field.

Related