Skip Navigation
Comprar Ahora
Home » Course » WordPress Directory and Classifieds Sites » Forms for Front-end Submission and Editing of Directory Items » Front-end Forms for Adding Content in WordPress

Front-end Forms for Adding Content in WordPress

With Toolset Forms, users can create content from your website’s front-end.

Duration

Creating the form

Go to the Toolset → Post Forms page and click the Add New button at the top. A wizard will guide you through the steps.

First, you need to give your form a name.

In the next step, you need to select the main form options. This includes selecting a post type, status of the post created by the form, and other.

Using the wizard to create front-end forms
Using the wizard to create front-end forms

Designing the form

In the next step, you need to design the form’s contents. You will see two main areas on your screen:

  1. Form area
  2. Available form fields and elements
Building form
Building form

Based on the post type, you will see that some fields were already added to your form. You can delete and reorder fields. You cannot delete mandatory form fields and you will see a lock icon next to them. To add elements to your form simply drag-and-drop them to the desired location.

When you are done, click Continue to proceed to the final step.

Displaying Toolset forms

To display Toolset forms on the front-end, use the Toolset Form block. You can insert it into any WordPress content including pages, posts, and templates.

Inserting a Toolset Form block into a page
Inserting a Toolset Form block into a page

Display form elements side by side

You can easily arrange form elements side by side. Simply drag-and-drop them next to each other.

However, for this to work, Bootstrap must be enabled on your website. Toolset forms use Bootstrap’s responsive grid system and some other components.

By default, Toolset sites should have Bootstrap enabled. If you cannot drag-and-drop form elements next to each other, go to the Toolset → Settings page and find the Bootstrap loading section. There, make sure that the Toolset should load Bootstrap option is selected. You can select between Bootstrap version 3 and 4.

Once your site is loading Bootstrap you will be able to arrange form elements next to each other.

Style the form

Toolset forms look good and are responsive out-of-the-box. However, you might want to adjust their style to fit your website design even more.

Check out the detailed lesson to learn how to style Toolset forms.

Go to next step

Main Toolset Block Used in this Lesson

Form

Formularios para el envío de contenido y edición en la interfaz de usuario

Dario
Updated
mayo 19, 2021
Send feedback to our documentation team