6.9a Design a Contact page with Divi

The contact page is one of the website’s most important pages. We’ll create:

• A hero area
• A contact form with a link to the privacy policy
• Protect your form from spam with Google Recaptcha V3
• Create a FAQ with tabs
• Embed a map from Google Maps without having to enter an API key or credit card
• Create responsive content and display different content for computers (desktops), tablets and mobiles

The “Contact Us” page holds a vital place on your website, serving as a critical channel for clients and potential customers to reach out to you. It’s important to keep this page user-friendly and uncluttered to ensure you don’t miss out on leads. We’ve crafted a sleek “Contact Us” page that features a minimalistic contact form created using the Divi module. In this form, users must agree to your privacy policy by checking a checkbox before they can send their message, and we’ve thoughtfully included a direct link to the privacy policy.

Additionally, we’ve implemented Google reCAPTCHA version 3 to protect the form from spam. I’ll guide you step-by-step on how to set up these elements.

Now, let’s get started with reusing some of the design elements from the “News” page you worked on in the previous chapter. We’ll keep the hero section and the sidebar, but we’ll replace the rest of the content. Follow along as I take you through the process.

1. Begin by accessing your development site.

2. Click on the “Contact Us” page in your menu.

3. Enable the visual builder to start building your content.

4. Select “Clone Existing Page” to save time. In this case, we’ll clone the “News” page.

5. Remove any elements from the cloned page that you won’t need. In this case, the blog feed should be removed, while the rest of the layout will be retained.

6. Change the background image in the hero section.

7. Modify the copy in the hero section, adjusting it to suit your “Contact Us” page.

8. Next, we’ll add contact information using blurbs, featuring icons to add visual appeal. You can choose which information to include, such as phone numbers, email addresses, street addresses, and links to maps and social media channels.

9. Create an FAQ section that allows visitors to expand or collapse the boxes to view answers to frequently asked questions.

10. Embed a map from Google Maps on your page, a process I’ll guide you through without requiring a Google account, Google API, or credit card information.

As for the contact form, we’ll build a beautiful and minimalistic one using the Divi builder’s Contact Form module. This form will feature fields for name, email, a dropdown for categories, a message field, and a mandatory checkbox for agreeing to your privacy policy. The form will also provide a link to your privacy policy and use Google reCAPTCHA version 3 for spam protection. We’ll explore each of these steps in detail.

Let’s create a functional and stylish contact page that ensures a seamless user experience and encourages interaction with your website. You can customize and adapt these design elements to match your website’s unique style and branding.

All links, files and code snippets mentioned in the chapter is available below.