Maciej Ekstedt

Maciej Ekstedt

Creative Director

Hello Divi Lovers! Thank you for visiting our site. This is my first tutorial so please be patient with me. I am aiming to post useful tutorials and articles regularly, so if you have any requests, please let me know in comments below.

Today I would like to show you how to add a floating bubble button that opens a modal popup – it is exactly the same as you see on our website. We use a premium WordPress plugin called - Layered Popups. For this tutorial we will trigger Caldera Forms. This is available for free, and in my opinion, this is the best and the easiest form maker available for WordPress.

For all operations described in this article I would strongly recommend you use a child theme. If you don’t have a child theme in place, please consider creating one. You can use this free Child Theme Generator to create a child theme..

Are you ready?

Let’s get started!


1. Install Caldera Forms and create a contact form

We will use Caldera Forms for our popup. If you don’t have it yet, install the plugin and activate it.
Open the Caldera Form tab located in your WordPress Dashboard and add a new form. You can use a pre-built layout or build your own form from scratch. Once the form is created, copy the form shortcode to your clipboard.


2. Add code to footer.php

Navigate to your child theme folder and open the footer.php file using your favorite text editor (I use use Sublime Text). If you don’t have the footer.php file in your child theme folder, copy it from the parent Divi theme and paste it into your child theme root directory.

Firstly we will add the following code at the very top of your footer.php file:

Important: Replace CF58597509a07cb with the Caldera Form shortcode you copied in step 1.

Now we need to add another line of code. Search for the following code:

and paste the code just below it (remember to use your from id):

Before we save and close this file we will add one more code snippet. Add the following code before the closing body tag:


3. Create contact_popup.js file

Here we need to add a custom script that will allow us to trigger the Caldera Form popup after the bubble icon is clicked.
1. Create a js folder in your child theme directory (if you already have one then skip this step),

2. Inside the js folder create a new file called contact_popup.js

3. Add the following code to the newly created contact_popup.js file (remember to use the proper form ID that you created in step 1)


4. Enqueue the contact_popup.js  in your function.php file

Open the functions.php file located in you child theme root directory and add the following code:


5. Style your button

In this step we will add some css to style your bubble to fit your brand. Add the following code to your style.css file.

You can find more icons here.

That’s it. Enjoy! In the next article I will show you how to style the form to make it more professional and elegant. Stay tuned!


Pin It on Pinterest

Share This
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Get in touch
We are ready to talk about your project. Please leave your message and we will get back to you shortly.
Your Information will never be shared with any third party.
Write a review
Please take a moment and fill out this form.
Your Information will never be shared with any third party.
Your Information will never be shared with any third party.
Thank you!
Your email has been added successfully.
License details
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resale “as is”. It is allowed to distribute/sublicense the source files as a part of a larger project.
Regular license