How to add a floating bubble icon that opens contact form popup

Hello Divi Lovers! Here is my first tutorial I have ever created so please be understaning. I am aiming to post useful tutorials and articles regularly, so if you have any requests, please let me know in comments below.

In this tutorial 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 a form using 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 find more information about creating child themes on Elegant Themes blog.

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 or you can add any where:

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!

Maciej Ekstedt

Maciej Ekstedt

Creative Director

Get the best Divi child theme for real estate websites with a 10% discount! Use the coupon code ESTATE10 at checkout

16 Comments

  1. Lukas Sasso

    Wish there was a demo on this. I’m really thinking about trying this out. Thanks for putting the time into it.

    Reply
    • B3Multimedia

      Hi Lukas. Thank you for your comment. We have used the same method on our premium divi child theme. Check this page: https://bruno.b3multimedia.ie/ and click “Send Message” located in main menu.

      Reply
      • Max

        How to do the same in caldera forms? I mean Pop Up, pop-up when you click on the button CTA?

        Reply
        • Maciej Ekstedt

          Hi Max. If you create new page in your wordpress divi site, if you switch to Standard Visual Editor (disable Divi Builder) then you will see Caldera Forms button. After clicking modal popup with options will show up and you will be able to select “Modal Popup” from options. Hopefully this helps 🙂

          Reply
  2. Alpha Pixa

    Fantastic tutorial and something I’m going to try on my Divi site. Just noticed that in Step 3 your js file should be called contact_popup.js rather than contact_form.js so that it matches the code. I’ve got the bubble in place but just need to get the correct form popping up now. Thanks for sharing 🙂

    Reply
    • B3Multimedia

      Hi Victoria. I’m glad to hear it was useful and thank you for mentioning. Article fixed 🙂

      Reply
  3. Michal

    Dziekuje Macieju! 🙂

    Reply
  4. Dimitris

    This is really nice. 🙂 Instead of the icon would be possible to have a float button “Book now” ?

    Reply
  5. Jeff K

    Love it. Would this work for a donation window/button? Meaning…folks could give a donation in this window instead of subscribing to a newsletter, e.g.

    Reply
    • Maciej Ekstedt

      Hello Jeff,

      Thank you for your comment. For this tutorial we use Caldera Forms plugin to trigger this popup. I assume this would be straight forward to add donation code to the popup. Caldera Forms builder offers HTML/Text module so you can easily add custom code and display inside popup. Hopefully this helps 🙂

      Reply
  6. Carlos

    Hi, Do you have a tutorial on how to make a Popup Contact Form equal to what you use in your Call to Action buttons?

    Reply
    • Maciej Ekstedt

      Hi Carlos 🙂 Unfortunately not, there is no tutorial for that however we use the same method as mentioned in this tutorial. We just use different popup plugin that can be found here.

      Reply
  7. Kalpana

    nice, thanks for sharing.
    Keep updating.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
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.
This form collects the information you enter here so that we can provide you with exciting news in the future. Read our Privacy Policy to learn how we manage and protect your submitted information.
Hi there! We’d love to help you out. Leave us a message and we’ll get back to you as soon as possible.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your message has been sent.
We will get back to you in the earliest convenience.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
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 resell 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 resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout
Win Free Marvel!
Join our mailing list and get a chance to win 1 of 5 free licenses for Marvel Theme! All subscribers will also receive a huge discount code on the product release date!
    
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL3JrZmZsbXp3VUpvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkLzBGQzV6RG9aR2dnP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==