Contact Forms on Hover

Contact Forms on Hover layout & tutorial

This free Divi layout and tutorial is from the Elegant Themes website blog post “Creating Multiple Targeted Contact Forms on Hover in One Design with Divi”.

This layout is great for websites that want to make a clear distinction about contact forms that are for different departments of their business. The layout has 4 contact call-to-action buttons that will reveal the corresponding contact form on hover. If you wanted to save some space an alternative would be to  just have a single form and a drop-down option to select which department the inquiry should be sent to.

The tutorial will show you how to;

• Create your CTA using blurbs and add contact forms
• Hide & reveal the contact forms using row heights for default & hover states
• Place rows inline using display: grid CSS

Download this layout on the Elegant Themes blog

To download the JSON layout file for this tutorial you will need to enter an email into the subscription box on the blog post. If you are already signed up to the Elegant Themes mailing list you will not be re-added. This sign-up form is found just below the layout Demos near the top of the post.

To import the layout to your Divi website you will need to extract the zip file and drag-and-drop the JSON file into your Divi Builder page.

Affiliate disclosure* – Links to layouts on Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links. Thanks for supporting Divi Theme Examples.