How can I create a pop-up form from a call to action button?

Store Design
1

Hi, how can I make the button that appears in the slide section open a pop up form right there on the page?

I have a form created in pipedrive for lead conversion and in addition to embedding it on the page, I would like to add it so that when they click on the call to action they can complete the form.

The button just gives me the option to send to a site page or to an external url, which could be the form, but I don’t want the user to leave the site.

Thank you so much!

2

you can use a popular library like “Magnific Popup” or “jQuery Modal” to achieve this. Here’s an example using Magnific Popup:

  • First, include the necessary CSS and JavaScript files for Magnific Popup. You can find the files on the Magnific Popup website or through a CDN. Add the following code to the section of your Shopify theme:
  • Create a button in your slide section that will trigger the popup. For example:
  • Add the popup form HTML code to your Shopify template or create a new Liquid file if needed. For example:

  ## Popup Form
  • Initialize Magnific Popup with JavaScript code. Add the following script to your Shopify theme:
jQuery(document).ready(function($) {
  $('.slide-button').magnificPopup({
    items: {
      src: '#popup-form',
      type: 'inline'
    }
  });
});

Make sure to replace ‘.slide-button’ with the actual class or ID of your button, and ‘popup-form’ with the correct ID of your popup form elem