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.

If you are new to the CRED plugin, we recommend that you get started with the CRED Training Course.

On this page:

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.

CRED form for submitting a new ad
CRED form for submitting a new ad

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.

Form Auto-generation Feature In CRED Post Forms
Form Auto-generation Feature In CRED Post Forms

The auto-generator creates a completely functional form and includes all fields that belong to the content.

Basic auto-generated form content.
Basic auto-generated form 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)
  • [/credform] – mandatory

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.

CRED Post Forms Notification Section
CRED Post Forms Notification 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.

CRED Post Forms Validation Fail Message Example
CRED Post Forms Validation Fail Message Example

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.

reCAPTCHA field as featured in CRED Post Forms.
reCAPTCHA field as featured in CRED Post Forms.

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.

CRED Forms insertion dialog.
CRED Forms insertion dialog.

The form will then display inside the page.

CRED form that powers a classifieds site.
CRED form that powers a classifieds site.

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 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.

CRED form for submitting a new WooCommerce Product
CRED form for submitting a new WooCommerce Product

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.