Skip to main content

Building a "Create" Type Form with Divi Form Builder

The Divi Form Builder plugin allows you to create various types of forms, including those for creating posts, pages, custom posts, and more. This guide will help you set up a "Create" type form, which can be used to dynamically create content on your Divi WordPress website.

Video

Step 1: Add The Form Module

  1. Open the page where you want to add the create form.
  2. Click on the '+' icon to add a new module and select the Form Module from the list of options.

Add Form Module

Step 2: Define Form Settings

  1. Add a descriptive Form Title for your form, such as "Create Post Form".
  2. Assign a unique Form ID to the form to ensure it is easily identifiable.
  3. Select a "Create" form from the Form Type type options to specify that this form will be used for creating.
  4. Customize the text of the Submit button (e.g., "Create").

Form Settings Create Form

note

You can build various types of "Create" forms, including those for creating posts, pages, custom posts, and more. Simply select your desired form type from the Form Type dropdown menu.

Step 3: Add Form Fields

  1. Click on the Add New Field button to start adding fields to your form.
  2. Configure Each Field:
    1. Add a descriptive Field Title and Admin Title for your contact form.
    2. Ensure that each form field has a unique Field ID for proper data handling.
    3. Choose from various field types such as Email, Number, Date, Input, etc.

For more detailed information on our Field Types, click HERE.

Add Form Fields

note

These fields are what your user will interact with and will be mapped to your post, page, or custom post attributes. For example, you might have multiple ACF fields assigned to your custom post. Each form field will correspond to a specific ACF field.

Step 4: Map Your Fields

Mapping options are specific to Create type (and Login/Register) forms. These options allow you to map form fields to specific post attributes and ACF custom fields.

  1. Select Mapping Options:
    1. Choose the type of field mapping from Field Mapping Type based on the content you are creating. For example, map an input field to the Post Title.
      1. When using the post default field, select Post Default Field (Post/Page/Products/CPT Only) from the Field Mapping type.
      2. To map to an ACF field, select ACF Field from the Field Mapping type.
    2. Configure Default Mapping for fields such as post title, content, and custom fields. When mapping your form field to an ACF field, select the appropriate ACF field from the ACF Field Mapping input field.
    3. Ensure that at least one field is mapped to the Post Title field, as this is a required attribute for the "Create" type form.

Example Mapping

  1. Input Field: Map to Post Title.
  2. Textarea Field: Map to ACF Textarea field.

Default Post Fields Mapping

Default Post Fields Mapping

ACF Fields Mapping

ACF Fields Mapping

For more detailed information on field mapping, click HERE.

Step 5: Customize Post Form

Divi Form Builder offers extensive customization options for both the entire form and individual form fields.

A Few Features

For more detailed information on our features, click HERE.

  1. Form-Wide options include:
    1. Customize the appearance of the entire form, including colors, fonts, and borders.
    2. Set up redirection rules to take users to a specific page after form submission.
  2. Field-Specific options include:
    1. Customize the appearance of individual fields, including font size, color, and background.
    2. Apply conditional logic to show or hide fields based on user input, enhancing the form's interactivity and relevance.
note

Some features are not available for the "Create" type of form.

Additional Tips

By following these steps, you can create a functional "Create" type form that allows users to dynamically add content to your Divi WordPress website. This setup is particularly useful for user-generated content, guest posts, or any scenario where you need to collect and publish data directly from the front end.