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:
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.
In your training site
- Go to Pages -> Add new
- Enter your page title, e.g., Place your free ad.
- Click on Save draft.
- Click on Content Layout Editor.
- Add a full width cell.
- Choose the CRED Post Form cell and insert it.
The Create new Post Form cell screen will be displayed.
- 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
The Edit CRED Post Form screen will be displayed. You can set up your form here.
- 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.
- 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
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:
- 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.
- Position your cursor inside the message before the “ad” word.
- Click on Fields and Views.
- 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.
- 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.
For the time being, we leave our form as-is and will revisit it later to make some edits.
- Click on Save and Close this form and return to the layout.
- Preview your layout.
Your form displays.
Press Update to save your Layout.
- View the page that includes your form.
- 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.
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.
To make your form visible to all users:
- Go to Toolset->Access Control.
- Choose the CRED Forms tab. Scroll down to the Post Forms Front-end Access Group section.
- Click on it to expand.
- Locate the form you have just created.
- Check all the roles to make the form visible to everybody.
- Save your changes.
- Visit the “Place your free ad” page as a regular visitor.
You should be able see your form now.
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.
- Go back to your layout.
- Click on the CRED cell to open it for editing.
- Scroll down the screen to reach the E-mail notification section.
- Press the Add another notification button.
The Notification Setting dialog opens.
- 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:
- 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.
Go to the CRED Course Support page and leave your comment. Agnes, the tutorial’s author, will reply to you.
In the next tutorial, you will learn how to customize your form.