Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

To make sure your contact form is working, you will need to follow this step:

Enabling Visual Builder

Before you can edit your page, you will first need to jump into the Divi Builder. (Lean about it in Quick Edit)

 

Add, Edit, and Delete Contact Form Fields

Open the Contact Form Module: Click on the Contact Form module on your page or click the Gear icon to open its settings.

Edit an Item: Click the Gear iconnext to the Contact Form item you want to edit(1).

Add a New Item: In the Content tab, click Add New Contact Form Item (2).

Delete Item: Click the Trash icon (3)next to the Contact Form item to delete it.

 

Divi 5 - Add, Edit, and delete Contact Form fields

The Content tab

The Content tab lets you manage form fields, set the email address and pattern, choose submission actions, toggle spam protection, and more.

Divi 5 - Contact From module's Content Tab
  • Add, Edit, and Remove - Allows you to add new form fields, remove existing form fields, or edit a form field.
  • Text - Enter the Contact Form's Title text, Success Message, and the Submit Button's text.
  • Email - Enter the email address to which the form will be sent, as well as the Message Pattern.

IMPORTANT:
Make sure you input the email address where messages should be sent and set up your Message Pattern.

Email delivery and spam prevention are complex processes. We recommend using a delivery service such as Mandrill, SendGrid, or other similar services to ensure the deliverability of messages that are submitted through this form.

  • Redirect - Choose how the form should behave after a successful submission.
  • Spam Protection- Choose the type of Spam Protection.
  • Link - Make the entire Contact Form module clickable, creating a seamless way to direct users to another page, section, or external site.
  • Background - Choose the Contact Form module's background styles.
  • Admin Label - Choose the Contact Form module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.

The Design & Advance TabS

You can also update the design of your contact form by using the tabs.

Learn more about Design and Advanced Tabs here: https://help.elegantthemes.com/en/articles/10260983-the-divi-contact-form-module-divi-5

Make sure you edit the Default Preset if you wanted to make them consistent through out the site.

 

Understanding the Message Pattern Option in Divi 5

The Message Pattern option in Divi's Contact Form module allows you to customise the format of emails received from your website's contact forms. By defining a specific pattern, you can control which form fields are included and how the information is presented, ensuring clarity and relevance in your communications.

Divi 5 - Message Pattern Option

Where to Find the Field Content Options

  1. Open the Contact Form Module Settings: Click the gear icon or the module itself to access the settings.
  2. Navigate to the Content Tab: Expend the Email option group.

    How to use the Message Pattern

    The Message Pattern utilizes field IDs to include specific form data in the email. To incorporate a field's value:

    1. Identify the Field ID of each form field. You can find this by editing the individual field settings within the Contact Form module.
    2. In the Message Pattern field, insert the Field ID wrapped in double percent symbols. For example, to include a field with the ID "name," use %%name%%.

      You can combine multiple fields and add custom text to structure the email content. For instance:

      Name: %%name%% 
      Email: %%email%% 
      Message: %%message%%

      This pattern will format the email to display the sender's name, email, and message in a clear layout.

      Best Practices for Creating Custom Message Patterns

      • Use Descriptive Field IDs: Assign clear and concise Field IDs without special characters or spaces to ensure accurate data retrieval.

      • Maintain Readability: Incorporate labels and spacing in your pattern to enhance the email's readability. For example:

        You have received a new message from %%name%% (%%email%%): %%message%%

      • Test Your Pattern: After setting up, submit a test form to verify that the email content aligns with your expectations.

      Things to Avoid

      • Incorrect Field IDs: Ensure that Field IDs in your pattern match exactly, including case sensitivity, to prevent missing data.

      • Do not use special characters such as special characters like ±, !, @, #, $, %, ^, & in your field's ID.

      • Overcomplicating the Pattern: Keep the pattern straightforward to avoid confusion and potential errors in the email content.