How to Automatically Add a Bottom-Page Contact Form to All Pages with Divi’s Theme Builder

How to Automatically Add a Bottom-Page Contact Form to All Pages with Divi’s Theme Builder

When you’re busy setting up all pages you want to include on your website, chances are high you’ll want to include a contact form at the end of each page to make your visitors’ journey easier. With Divi, you can, of course, add a contact form to the page itself, but if you’d rather streamline the process, that’s possible as well. In today’s Divi tutorial, we’ll show you how to automatically add a bottom-page contact form to all your pages at once. We’ll also automatically add a fixed bottom-right icon with an anchor link that’ll automatically redirect people to the contact section of the page they’re on. You’ll be able to download the page template for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

bottom-page contact form

Download The Page Template for FREE

To lay your hands on the free page template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Tutorial Overview

  • Set up the pages on your website using a layout pack of your choice
  • Once your page design style is set, you can reuse the design style in the bottom-page contact form
  • To add the bottom page contact form, you’ll first need to create a new template dedicated to all pages
  • Once the template has been created, you can start building the template’s body using Divi’s visual builder
  • To make sure all unique page content shows up on each page, we’ll add the post content module
  • The post content module contains your entire dynamic page design
  • Below the post content module, we’ll add another section for our contact form
  • We’ll design the contact form and make sure we add a unique CSS ID to the section, we’ll use this CSS ID to create an anchor link
  • Bonus: we’ll add a fixed icon in the bottom right corner of each one of our pages and link the icon to the contact section of that particular page

1. Set up Website Pages Using Layout Pack of Choice

The approach we’re taking on works on any kind of website you build. But for this particular tutorial, we’re using the Magazine Layout Pack‘s

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top