Many websites require the capability of creating and editing content from the front-end. Examples include classifieds, listings, real estate, and jobs sites. Forms plugin makes adding this capability easy. Forms 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 Forms plugin, we recommend that you get started with the Forms Training Course.

On this page:

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

Toolset form for submitting a new ad
Toolset form for submitting a new ad

The form can create new content or edit existing content. Toolset forms support WordPress pages, posts, and custom post types (see the instructions for creating Toolset 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 Toolset forms from within the Layouts editor

If you’re using Layouts plugin, you can create Toolset forms while you’re editing layouts. Watch this video to see how we build a Toolset form from scratch. This time, we’re creating the form from within a Layout:

Designing the Front-end Content Submission Forms

Toolset forms start empty. The easiest way to get started is using the Auto-Generate Form button.

Form Auto-generation Feature In Post Forms
Form Auto-generation Feature In 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 Toolset 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 Forms 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 Toolset 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

Forms 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 Toolset Forms

You can set up notifications for the form in the Notification Settings section.

Post Forms Notification Section
Post Forms Notification Section

Validating of Input Fields in the Form

Toolset forms will make sure that submitted content is valid. If you set any field as ‘required’ Forms will make sure that these fields are not blank. Some fields have required formats (like ’email’ and ‘numeric’ fields). Forms will display an error if fields are missing or are incorrectly formatted, asking the user to fix before submitting.

Post Forms Validation Fail Message Example
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

Forms 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 Post Forms.
reCAPTCHA field as featured in 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 Toolset 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 Toolset 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 Toolset forms directly into a page

You can insert Toolset forms into any WordPress content. This includes pages, posts and any custom type. When you edit content, click on the Toolset Forms button.

Toolset Forms button in WordPress editor
Toolset Forms button in WordPress editor

In the pop-up dialog that appears, select the form of your preference.

Toolset Forms insertion dialog.
Toolset Forms insertion dialog.

The form will then display inside the page.

Toolset form that powers a classifieds site.
Toolset 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 Toolset 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 Editing forms.

Forms 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 Forms button in the editor and then select the Delete option. You will see a dialog that offers additional options for the delete links.

Using Address Fields in Toolset Forms

The Toolset Maps plugin allows you to add custom Address fields to your Toolset forms. The form then allows to type-in the address manually, use the user’s location, or select the location by pointing on the displayed map.

Address field in a Toolset form
Address field in a Toolset form

To learn more, visit our page about how Address fields work in Forms.

Creating WooCommerce Products using Toolset forms

Toolset 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 Toolset forms documentation page for deatils.

Toolset form for submitting a new WooCommerce Product
Toolset form for submitting a new WooCommerce Product

Controlling Access to the Front-end Content Forms

You can control access to Toolset 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 Toolset forms.