All Tutorials

Your One-Stop Destination for Learning and Growth

Creating a Contact Form Widget with Elegant Theme's Divi Builder (No Images)

In this blog post, we will guide you through creating a contact form widget using the Divi Builder from Elegant Themes. If you don't have the Divi theme or the Divi Builder plugin yet, make sure to get it first from their official website.

Prerequisites

Before we start, ensure you have the following:

  1. An active Divi Theme subscription or a standalone Divi Builder license.
  2. Installed and activated the Divi theme or the Divi Builder plugin on your WordPress site.

Creating a New Contact Form Module

Follow these steps to create a new contact form module using the Divi Builder:

  1. Log in to your WordPress admin dashboard and navigate to Pages > New Page.
  2. Give your page a name, such as "Contact Us". Click on the Use Divi Builder template, then click Create Page.
  3. Once the page is created, you'll be taken directly into the Divi Builder interface. Delete any default elements by selecting them and clicking the trash can icon in the right-hand panel.
  4. To create a new contact form, click on the plus (+) button at the top left of the builder to add a new element. Search for Contact Form in the available modules, then drag and drop it onto your page.
  5. A default contact form will be added, which includes fields such as Name, Email Address, Message, etc. You can modify these fields by editing their properties in the right-hand panel. For example, you can change the label text or make a field required.

Customizing Your Contact Form

You can customize your contact form further by using various settings and CSS. Here are some common customizations:

  1. Form Styling: You can change colors, fonts, borders, and other visual aspects of your contact form by adjusting the form's global styles in the Design > Contact Form tab.
  2. Form Messages: Customize the messages that appear when a user submits the form, such as "Your message has been sent successfully" or "There was an error submitting your message".
  3. Form Processing: If you want to process contact form entries using an external service like Mailchimp or Google Sheets, you may need to use third-party plugins or custom code. Check the Divi documentation and available plugins for more information.

Saving and Publishing Your Contact Form Widget

Once you've finished creating and customizing your contact form, save your changes by clicking Save in the top left corner of the builder interface. After saving, navigate to the Pages > All Pages list to view your newly created "Contact Us" page. Make sure it's set as the static front-page or sidebar widget if you want it to appear publicly. Finally, click on the Publish button at the top of the page editor to make your contact form live and accessible to your visitors.

That's it! You've now created a contact form widget using Divi Builder from Elegant Themes without any images. If you have any questions or need further assistance, please leave a comment below.

Published April, 2014