In this tutorial, you will learn how to customize CRED forms.

In Part 1, we created a form using the Auto-Generate Form feature. Now, we will edit the form to have it function properly and with a desirable appearance.

Before
Before

After
After

Introducing the form with custom text

Let us begin by introducing our form with the following simple instruction: Fill out the form to place your free ad.

This instruction will be part of our form, so we will insert it into the layout as a new row.

Opening the layout for editing
Opening the layout for editing

In your CRED Training Site:

  1. Open the page that contains our form. The page in our example is entitled Place your free ad.
  2. Open the content layout for editing.

Adding a new row
Adding a new row

  1. In the Layouts editor, click on the plus icon on the right to add a new row.
  2. Draw a full width cell.
  3. Select the Visual Editor cell.
  4. Insert the following text: “Fill out the form to place your free ad.”
  5. Click Apply.

Moving the row up
Moving the row up

  1. Grab your row and drag it to a position before the row containing our form.
  2. Preview the layout.

You should see the text you have added (“Fill out the form to place your free ad”) above your form.

Toolset hint

[caption id="attachment_529111" align="alignright" width="300"]Conditional output Conditional output[/caption]

Hint

You can display different introductory text for both logged-in and non-logged-in users. For this, use a Visual Editor cell, the conditional output feature, and the wpv-current-user shortcode as shown in the following screenshot.

Now let us modify the form.

Opening the form for editing
Opening the form for editing

  1. Click on the cell containing the form to open it for editing.

Content section
Content section

  1. Scroll down to the Content section.

You can edit everything between the [credform class=’cred-form cred-keep-original’] and [/credform] shortcodes.

Changing Input Field Labels

Each of the input fields included in your form has a label. By default the labels are based on what you set in the Types plugin.

For the Ad post title and body CRED inserts the “Ad Name” and “Ad Description” labels, respectively. The labels of your Post Fields are exactly the same as you set in Types.

We want to change the labels and add additional descriptions as well as some custom styling:

Before
Before

After
After

Changing input field labels
Changing input field labels

  1. Locate the line with “Ad name” label
  2. Edit the line to replace “Ad name” with the following code:Title <span>Keep it short and simple</span>

Repeat the steps above to replace the following labels:

Before After
Ad Name Title <span>Keep it short and simple</span>
Ad Description Ad Content <span>Ideally two or three paragraphs</span>
Price Price ($) <span>Your product’s price</span>

Preview your form. New labels appear; however, they may need some changes. We achieve this using custom CSS.

Adding Custom Styling

We add some simple CSS to improve label formatting. We want the phrases that are wrapped in tags to begin from a new line.

  1. Scroll down to the bottom of your form editor.
  2. Click the “CSS and JavaScript for this form” to expand it.
  3. Insert the following CSS rules.

Use the Preview button to preview your changes. Your labels should be bolded and followed by additional descriptions starting from a new line.

Once you are satisfied with your changes press the Update button to save your form.

Removing the Group Field Title

When you generate your form with the Auto-Generate option, CRED automatically adds the name of your custom fields group. In our case, it reads “Ad details.” Now, let us remove it.

1. In your form body locate the following line:

<div class=”cred-header”><h3>Ad details</h3></div>

2. Remove it

Customizing the Category Block

When you generate your form with the auto-generate option, CRED automatically adds your taxonomy terms as a list of checkboxes and the “Add new” button allowing you to add a new term. See the Before picture below.

We remove the “Add new” button and turn the list of terms into a dropdown.

Before
Before

After
After

Removing the “Add new” button

  1. Locate the following block:
  2. Remove it

Changing the checkboxes into a dropdown

  1. Locate the following shortcode:
    Category as checkboxes
    [cred_field field='ad-category'  display='checkbox']
  2. Replace the display=’checkbox’ with display=’select’ single_select=’true’. Your shortcode displaying taxonomy terms should look like this

    Ad category as a dropdown
    [cred_field field='ad-category' display='select' single_select='true']

Changing the category label

  1. Locate the following HTML block: <div class=”cred-header”><h3>Ad categories</h3></div>
  2. Replace it with the following block:

Changing the Sequence of Input Fields

Let us move our category dropdown up, to the very beginning of our form.

  1. Locate the block for category:
    Category block
    <div class="cred-group cred-group-taxonomies">
    	<div class="cred-taxonomy cred-taxonomy-ad-category">
    		<label class="cred-label">Category</label>
    		[cred_field field='ad-category' display='select' single_select='true']
    	</div>
    </div>
  2. Select it
  3. Cut-and-paste it to the place before the Ad Title
  4. Preview your changes
  5. Once you are satisfied with the result, save your form


Toolset hintHint

When moving input fields, remember to move the entire block of code that comprises that field, including its wrapping divs and labels.

Your form should look like this:

Your form should look like this.
Your form should look like this.

Validating the Email Field

You can set any field as “required.” For some fields, CRED can also validate the correct format. Let us add some validation to the Contact email field.

We set the field as required and check whether that which a user enters resembles an actual email.

Form input fields that are based on Post Fields inherit the validation set for fields in the Toolset Types plugin. To add some basic validation to the Contact email field, we must edit that field in Toolset Types.

  1. Open the site in a new tab so that you can quickly return to the layout later.
  2. Go to Toolset->Post Fields.
  3. Locate the Ad details post field group and open it for editing

Validating the Email Field
Validating the Email Field

  1. Click the Contact email field to expand it
  2. Locate the Validation section.
  3. Check the Required field to set the email field as mandatory. You can also replace the default message with one you have customized.
  4. Check the Email field for a valid email. Again, you may replace the default message with your customized version.
  5. Save the group.
  6. Return to the tab containing your layout. Click the Save and Close this form and return to the layout.
  7. Update the layout to save your changes.
  8. View your page to test the form again.

Testing how the validation works

Testing how the validation works
Testing how the validation works

  1. Leave the email field empty and submit the form. A message will display indicating that the field is required.
  2. Enter a random string in the email field and submit the form again.

This time a message will appear requesting a valid email address.

Summary

In this tutorial, you have learned how to customize your form.

Remember:

  1. You can fully customize a form with markup included between the [credform class=’cred-form cred-keep-original’] and [/credform] shortcodes.
  2. You can change the order of your form fields and their labels including that of the submit button.
  3. You can modify the appearance of some of your form fields by changing the shortcode attributes, just as we did convert the category list from checkboxes to a dropdown list.
  4. Form input fields that are based on Post Fields inherit the validation set for fields in the Toolset Types plugin.

Need help? Questions?

Go to the CRED Course Support page and leave your comment. Agnes, the tutorial’s author, will reply to you.

What’s next

In the next tutorial, you will learn what Generic Fields and Conditional Groups are and how to add them to your forms.

Part 3: Adding generic fields and conditional groups to your form