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

DiviEstate is a perfect choice for your real estate website. This child theme has all the features needed to run a realtor’s business successfully.
Get 10% discount with coupon code ESTATE10

23 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
  8. Okechukwu

    Awesome article!
    I am using a theme that is not Divi, can i get the same effect?
    I really need it and your article seems to be the only one close to answering my question.. Please help.

    Reply
    • Maciej Ekstedt

      Hello,

      I haven’t tried it on another themes but I think it should work the same. Please have a try 🙂

      Reply
  9. lona

    That’s exactly what I was looking for. Thank you.
    I am also interested in having a text ‘contact me’ instead of an icon. You said that it might need further coding. will it be complicated to achieve that? If you have any tips/links, I’d be grateful!

    Thanks so much,

    Reply
    • Maciej Ekstedt

      Awesome Billy 🙂 I’m glad to hear you like it!

      Reply
        • Maciej Ekstedt

          The fix would be quite simple. I would suggest to add custom class to your form at the bottom of the page, and then target :before element with the class added to that form only, so it won’t hide the icon in the button. So the code would look like the following:

          .your_class .et_pb_contact:before {display:none;}

          Please check and let me know.

          Reply

Submit a Comment

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

Sign up to our newsletter list

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood