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

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 find more information about creating child themes on Geno Quiroz’s 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

Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15
Learn More

13 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

Submit a Comment

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

Shares

Pin It on Pinterest

Share This
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.
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
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 email has been added successfully.
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 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
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