Many websites require the capability of creating and editing content from the front-end. Examples include classifieds, listings, real estate, and jobs sites. CRED plugin makes adding this capability easy. CRED allows you to build front-end forms for creating and editing content. These forms can include custom fields, validate inputs, and send notification emails.
On this page:
- Creating CRED forms
- Designing the Front-end Content Submission Forms
- Email Notifications after Submitting a Form
- Validating of Input Fields in the Form
- Built-in SPAM Protection for Forms
- Displaying the Forms on the Site’s Front-end
- CRED links for deleting content or users
- Creating WooCommerce Products using CRED forms
- Controlling Access to the Front-end Content Forms
Creating CRED forms
To create a new front-end content editing form, go to Toolset -> Post Forms and click Add New. Choose the form type you want to create (“new content” or “edit content”) as well as various other options for the form.
The form can create new content or edit existing content. CRED front-end content forms support WordPress pages, posts, and custom post types (see the instructions for creating CRED forms for WooCommerce products).
To create forms for users, use the front-end user registration forms. If you need to allow to create content and edit it, you should create two forms, one for each.
Creating CRED forms from within the Layouts editor
If you’re using Layouts plugin, you can create CRED forms while you’re editing layouts. Watch this video to see how we build a CRED form from scratch. This time, we’re creating the form from within a Layout:
Designing the Front-end Content Submission Forms
CRED forms start empty. The easiest way to get started is using the Auto-Generate Form button.
The auto-generator creates a completely functional form and includes all fields that belong to the content.
You can use this default styling of a form or edit the HTML to apply your own look.
You can edit almost anything in the CRED form. The shortcodes (texts with square brackets around them) are the fields and the form controls. Do not edit them, but feel free to add classes, to control their styling. You can edit HTML around these shortcodes.
There are some special CRED shortcodes that control the basic functionality of every form. These shortcodes include:
[credform class='cred-form cred-keep-original']– mandatory
[cred_field field='form_messages' value='']– optional, used for rendering the validation messages
[cred_field field='form_submit' value='Submit' urlparam=]– mandatory (form cannot work without a submit button)
Removing the mandatory shortcodes from your forms will cause them to break.
You can insert additional fields, that belong to the post, using the Add Post Fields button. The Add Generic Fields button lets you add fields that don’t belong to the post. Try these two buttons and see what they offer.
Arranging form elements one next to the other
By default the CRED form will display elements one below the other. Use the Grid tool in the editor to create grids inside the form. Then, move fields into cells in the grid.
Email Notifications after Submitting a Form
CRED can send notification emails when forms are submitted. You can set up multiple email notifications to different recipients having different content. Notification emails can be sent to a content’s author, website administrator, or any specific user or email address.
Let’s look at two examples for email notifications.
Sending Email Notifications for Newly Submitted Drafts
When forms generate ‘drafts’, you probably need an editor or admin to review and publish the content. Of course, you need a way to notify the administrator or editor that a new post is awaiting approval. Create a notification, sent when submitting the content and select the site’s admin as the recipient.
Confirming Content Submission to the Submitter
Another typical example of using automatic notification is sending confirmations to users about content that was successfully submitted. After posting a form, users can receive an automatic “Thank you for posting!” confirmation email. You can include different information with theses notifications, such as a link to their post.
Setting Up Email Notifications for CRED Forms
You can set up notifications for the form in the Notification Settings section.
Validating of Input Fields in the Form
CRED forms will make sure that submitted content is valid. If you set any field as ‘required’ CRED will make sure that these fields are not blank. Some fields have required formats (like ’email’ and ‘numeric’ fields). CRED will display an error if fields are missing or are incorrectly formatted, asking the user to fix before submitting.
Automatic Input validation is also important for your site’s security, as it prevents injection of malicious code.
Use HTML and CSS to style the validation messages for the form and for fields.
Built-in SPAM Protection for Forms
CRED lets you prevent SPAM to your site using reCAPTCHA. When you set up the form, you can choose to include the reCAPTCHA field. You will need to enter your account credentials to use it.
To use reCAPTCHA, you first must register both the Public and Private keys through Google’s reCAPTCHA homepage. You can then insert the field into any form by using the CRED Auto-generate Forms feature or by manually inserting it using the Add Post Fields button.
In addition to the reCAPTCHA field used to fight SPAM, you can also limit access to forms using Access plugin.
Displaying the Forms on the Site’s Front-end
When you add CRED forms to the site’s front-end, it’s important to realize what these forms do and decide on the right place to include them.
There are several cases for you to consider:
|Kind of form||What the form will produce||Where you should include the form|
|Forms for submitting new content||This form will generate a new post (Post, Page or Custom Type). After submitting the post, you want to display a confirmation message and potentially redirect to the newly created content.||Create a new page and place the form in it|
|Forms for registering new users||This form will generate a new user (Post, Page or Custom Type). After submitting the post, you want to display a confirmation message and usually redirect to a different page (account or login).||Create a new page and place the form in it|
|Forms for editing content||This form will edit an existing post. The form needs to know which ‘post’ to edit. After editing, you should display a confirmation message and redirect back to the page that displays the post.||Create a template for editing posts and include the form in it. Add links to this new ‘editing mode’ from the posts that you want to allow to edit.|
|Forms for editing users||This form will edit an existing user. The form needs to know which ‘user’ to edit. After editing, you should display a confirmation message and redirect back to a different page.||Create a template for editing users and include the form in it. Add links to this new ‘editing mode’ when you list users with a View.|
|Forms for editing “my profile”||This form will edit a specific user – the currently logged in user. After editing, you should display a confirmation message and redirect back to a different page.||Create a new page and place the form in it|
Inserting CRED forms directly into a page
You can insert CRED forms into any WordPress content. This includes pages, posts and any custom type. When you edit content, click on the CRED Forms button and select the form.
The form will then display inside the page.
Displaying forms that edit posts or users
In most cases, forms for editing posts or users should go into a template. This can be a Layout or a Content Template. A CRED form for editing the currently-logged-in-user (like “edit my profile”), should go into a page.
For more information, please read our guide about displaying CRED editing forms.
CRED links for deleting content or users
CRED allows you to insert links that will delete a selected post or a page. Normally, you would add these links to “single item” templates or to Views that display lists of items.
Click on the CRED button in the editor and then select the Delete option. You will see a dialog that offers additional options for the delete links.
Creating WooCommerce Products using CRED forms
CRED forms can also be used to create new WooCommerce products from the front-end.
You can add all of the standard WooCommerce Product fields to these forms. Check the Creating WooCommerce Products using CRED forms documentation page for deatils.
Controlling Access to the Front-end Content Forms
You can control access to CRED forms using Access plugin, which is part of Toolset.
Using Access, you can control who can use different forms. Some forms can be open to everyone, some to certain roles and some forms to specific users.
To learn more, read Access control for CRED forms.