Using Toolset to submit content from the front-end

When you develop listing, directory, and classifieds sites, you need to allow your visitors to submit content. For example, they may need to submit a new property, a guest post, or some other type of content.

In this example, we will allow a travel guide to submit details of his tour on our travel site.

Please note that front-end forms created with Toolset use different styling compared to the ones created using the Divi builder.

Go to Toolset -> Dashboard and click the Create Form button for your post type.

Toolset automatically generates the complete form for you and selects its basic options. If needed, you can easily customize them.

  1. Use the Settings section to:
    1. Determine the status of a post once it is submitted: Pending review? Published on your Divi site?
    2. Determine what will happen once the post is submitted: Display a message? Go to a special page?

  1. Use the editor in the Content section to edit the form’s markup, add or remove fields and buttons, and more.

Do you remember how in part I of the documentation we created a set of custom fields for our Tours? Toolset works its magic again and generates the front-end form containing the exact same fields.

Form autogenerated by Toolset
Form autogenerated by Toolset

You can also style the form thanks to the CSS and JS editors located at the bottom of the Content section.

  1. Use the Email notifications section to set up emails to send when somebody submits the form on the front-end. This includes setting when to send an email and to whom.

Toolset allows you to set up email notifications for your forms

Inserting forms into your Divi Builder designs

Now that we have created our form, it is time to insert it into one of our pages and see how it looks on the front-end.

  1. To insert your form, use a Divi Text module. You will see a new button called Toolset Forms. Click on it.

  1. A pop-up dialog opens and lists all posts forms you can insert. Click the button for the form you wish to insert.

Save the Text module and your Divi design and visit the page on the front-end.

This is what our form looks like.

Our form for adding new "Tour" posts on the front-end
Our form for adding new “Tour” posts on the front-end

Using Toolset to register users from the front-end

Toolset allows you to register users from your site's front-end
Toolset allows you to register users from your site’s front-end

Toolset allows you to register a new user. This is very handy for membership or WooCommerce sites.

Go to Toolset -> User Forms and click on the Add New button. A wizard will be launched and you will be able to name your form, define its settings, build it, and decide which e-mail notifications you want to send or receive.

To learn more about User Forms and how to build registration and editing forms, please read our dedicated documentation.

Using Toolset to edit content from the front-end

With Toolset, you can also allow users to edit a post. In our example, a user could edit or even delete a tour. To learn more, visit our documentation page about front-end forms for editing content.

Toolset allows you to create forms for editing existing contents
Toolset allows you to create forms for editing existing contents

Who can access your front-end forms?

By default, forms for submitting and editing content are visible to everyone, including users who are not logged in (i.e., guests). However, forms for registering and editing users are only visible to users who are logged into your site.

Toolset features an additional plugin called Access that grants you complete control over which user roles can access your front-end forms. You can also use it to create your custom user roles and much more.

Visit the next part of this guide to learn more about using Toolset to control access to your site contents.

What’s next?

Next Displaying fields inside any Divi Module