In most cases, a call-to-action (CTA) button whisks a visitor to a new page where they can place an order or get more information.

However, often the objective is to get the visitor to contact the business. In these instances, either a contact form is placed in the page or a button is used that links to a different page with a contact form.

Each of these solutions has advantages and disadvantages. The inline form eliminates the need for the visitor to wait for another page to load, but it falls as a call-to-action.

You can have the best of both worlds if you place a contact form inside a Toggle module and to style it to look like a button when closed and resize it to full width when open. Here’s how.

Example

Click the bottom to see this in action.

Click the title to close the toggle module. (We’re not worried that’s not intuitive because we don’t really want visitors to close the form.)

I'm Interested

Or request more information using the form below.

 

Instructions

Step 1. Create a Contact Form using a plugin.

It would be great if we could use a Divi Contact Module, but Divi doesn’t permit nesting one module inside another. So you’ll need to create the contact form in Contact Form 7, Gravity Forms, or any other form-generating plugin that provides a shortcode to display the form.

In our example, we used Contact Form 7.

Step 2. Add a Divi Single Column Row to a page and add a Toggle and a Code Module.

Your Divi Builder should look like this.

Divi Single Column Row Module containing Toggle and Row Modules

Step 3. Configure the Toggle Module with your website’s colors.

In our example, we populated these fields:

  • Title: I’m Interested
  • Open Toggle Text Color: #444444 (dark grey – our normal font color)
  • Open Toggle Background Color: #F2B72E (gold – our section background)
  • Closed Toggle Text Color: #444444 (dark grey – our button font color)
  • Closed Toggle Background Color: #a80204 (burgundy – our button background color)
  • Use Border: Yes (This, and the next two, match our button settings)
  • Border Color: #FFFFFF
  • Border Width: 2px
  • Content:
    Image showing Toggle Module's content field contents.

Notes:

  1. The link-button shortcode is an internally develop tool that converts a link into a button.
  2. The third line is the Contact Form 7 shortcode for the form.

Step 4. Add CSS code to the Code Module.

Open the Code Module and insert the following into the Content field.

<style>
/* Style the closed toggle to look like a button */
.interested.et_pb_toggle_close {  
  padding: 0 20px;
  width: 210px; /* Modify to fit text in closed position */
  margin: 0 auto;
  border-radius: 6px; /* Modify to match your buttons */
}
.interested.et_pb_toggle_close h5.et_pb_toggle_title {
  margin-bottom: 0;
}
/* Style the closed toggle hover properties to match your buttons */
.interested.et_pb_toggle_close.et_pb_toggle_item:hover {
  background-color: #fff;
  border-color: #a80204;
}
.interested.et_pb_toggle_close h5.et_pb_toggle_title:hover {
  color: #a80204 !important;
}
/* Hide the toggle icon */
.interested.et_pb_toggle .et_pb_toggle_title::before {
  display: none;
}
/* Add padding to the bottom of the open toggle */
.interested.et_pb_toggle.et_pb_toggle_open {
  padding-bottom: 20px;
  border: 0;
}
</style>

Follow the directions in the CSS code to configure the settings to match your website.

That’s all it takes!

Summary

We prefer to add the CSS code to a Code Module in the manner shown above because it allows us to save the row to the Divi Library where it can be easily reused on the same website or exported for use on another website.

If you prefer, the CSS code could be added to the child theme’s CSS file, the theme’s Custom CSS setting, in the page’s Custom CSS field or any number of other methods.

If you decide to incorporate this concept into one of your website, please share with us, in the comments below, your success or let us know of any problems you encounter.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This