In this tutorial, you will learn how to use the Toolset CRED plugin to create front-end forms for content submission.

We will show you how to build a form for adding Ads. Ads are posts based on the Ads Custom Post Type, created using the Types plugin.

This is how the page with the form will look like:

Outcome of this tutorial – a page with a form
Outcome of this tutorial – a page with a form

Once a new ad is submitted, it will be saved in your WordPress as a post under Ads.
Once a new ad is submitted, it will be saved in your WordPress as a post under Ads.

For your convenience, the Ad Post Type has already been set-up in the CRED Training Site.

The Ad Post Type is associated with the Ad categories (a custom taxonomy) and a group of custom fields called Ad details, which includes Price, Image, Advertiser E-mail, and Phone Number.

Step 1: Creating a page with a form

Switching to editing with Layouts
Switching to editing with Layouts

In your training site

  1. Go to Pages -> Add new
  2. Enter your page title, e.g., Place your free ad.
  3. Click on Save draft.
  4. Click on Content Layout Editor.

Drawing a full width cell
Drawing a full width cell

  1. Add a full width cell.

CRED Post Form cell
CRED Post Form cell

  1. Choose the CRED Post Form cell and insert it.

Creating a new Post Form
Creating a new Post Form

The Create new Post Form cell screen will be displayed.

  1. Set up the screen options as follows:
    • Make sure the Create a new CRED Post Form option is selected.
    • In the This form will: field, select Create content.
    • In the Content type field, select Ads.
    • Click on Create cell

Setting up the form
Setting up the form

The Edit CRED Post Form screen will be displayed. You can set up your form here.

  1. Give your form a meaningful name, for example “Add new ad.”

Instead of publishing new ads immediately, we will save them with the “Pending in Review” status. This will allow site admins to decide if the content submitted by the user requires some extra editing and approval.

  1. In the Settings section:
    • In the Status of content created or edited by this form dropdown, select Pending review
    • In the After visitors submit this form: dropdown, select Display a message instead of a form

Setting up a message
Setting up a message

After submitting the form, we want to display a message informing the user that the ad has been submitted but awaits moderation.

In the Display a message instead of a form section:

  1. Type in your message, for example,
    Your ad has been submitted and is waiting for moderation.
    Next, we will include the ad title in our message.
  2. Position your cursor inside the message before the “ad” word.
  3. Click on Fields and Views.
  4. Select Post title with a link and click on Insert shortcode

The post title will be inserted as the [wpv-post-link] shortcode:

When the message is displayed on the front-end, you will see the ad title provided by the user.

Form content
Form content

  1. Scroll down to the Content section.

Your form content has been pre-populated with some default markup that renders the HTML form as well as the form input fields.

The input fields are based on what was defined previously in the Types plugin.
Visit the Auto-generated shortcodes documentation page to learn the functions of each shortcode.

Hint: You can delete the content and autogenerate the form again by using the Auto-generate Formoption.

For the time being, we leave our form as-is and will revisit it later to make some edits.

  1. Click on Save and Close this form and return to the layout.

Previewing the form
Previewing the form

  1. Preview your layout.

Your form displays.

    Press Update to save your Layout.

Step 2: Testing your form

Filling out the form to test it
Filling out the form to test it

  1. View the page that includes your form.
  2. Fill out your form to test it.

Once your form is submitted, you should see the Your ad has been submitted and awaits moderation message.

If you go to Ads on your site backend, you should see a new ad waiting in the pending status.

 

Step 3: Making the Form Available for all Visitors

Thus far, you have been testing the form while being logged in as the site administrator. Regular visitors would need to see the form as well.

To make the form visible for every site visitor, we need toto set up appropriate privileges – modify the Toolset Access default settings.

Setting up the form access control
Setting up the form access control

To make your form visible to all users:

  1. Go to Toolset->Access Control.
  2. Choose the CRED Forms tab. Scroll down to the Post Forms Front-end Access Group section.
  3. Click on it to expand.
  4. Locate the form you have just created.
  5. Check all the roles to make the form visible to everybody.
  6. Save your changes.
  7. Logout.
  8. Visit the “Place your free ad” page as a regular visitor.

You should be able see your form now.

Step 4: Setting up E-mail Notifications

To complete our form, we will add notifications.

Each form you create using Toolset can trigger any number of notification emails. For this tutorial, we want the form to send a single notification email, to the site’s admin when a new ad is submitted.

Opening the form cell for editing
Opening the form cell for editing

  1. Go back to your layout.
  2. Click on the CRED cell to open it for editing.

Adding email notifications to your form
Adding email notifications to your form

  1. Scroll down the screen to reach the E-mail notification section.
  2. Press the Add another notification button.

The Notification Setting dialog opens.

  1. Fill out the Notification Settings according to the following table:

Table: How to Fill Out Notification Settings

Section What to choose/insert
Notification name New ad submitted – sent to the admin
Hint: Use a meaningful name. If you have more than one notification, the name will help you identify the purposes of each.
When to send this notification Select: When submitting the form
Where to send this notification Check: Send notification to a WordPress user

Start typing in your user name until you see your user name. Click it to select. You should see your email.

Set From details Email – leave the field empty
Name – type in: CRED Training Site
Subject of email->Notification mail subject Type in: A new ad is waiting for your approval
Body of emails->Notification mail body In the mail body editor:
  1. Type in the following text: A new free listing has been submitted:
  2. Click the Insert Body Code button and choose Post title
  3. Add another line: You may review it here:
  4. Click the Insert Body Code button again and choose Post Link
  1. Click Save and Close this form and return to the layout

Learn more about Email Notifications.

Your form for adding ads will now include notifications. In the next tutorial, you will learn how to customize your form further.

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 how to customize your form.

Part 2: Customising the form content