How can I open a 3rd party popup form in Webflow when a button is clicked?

Published on
September 22, 2023

To open a 3rd party popup form in Webflow when a button is clicked, you can use custom code and the Webflow onclick attribute. Here's a step-by-step guide to achieve this:

  1. Choose a 3rd party popup form provider: There are many providers available, such as Mailchimp, Formstack, or JotForm. Select the provider you want to use and create your form.

  2. Get the embed code: Once you've created your form, look for the embed code provided by the 3rd party provider. Copy this code to your clipboard.

  3. Open your Webflow project: Log in to your Webflow account and open your project in the Webflow Designer.

  4. Add a button to your page: Drag and drop a button element onto your page where you want the form to be triggered. Customize the button's text and design to fit your needs.

  5. Add a div block for the form: Drag and drop a div block onto your page where the form should appear. This will serve as a container for the 3rd party form.

  6. Add the custom code: Go to the Site settings of your project by clicking on the gear icon in the top-right corner of the Designer. Select the Custom Code tab, and paste the embed code from your clipboard into the Footer Code section.

  7. Add the onclick attribute: Select the button element you added in step 4. In the settings panel on the right side of the Designer, scroll down to the Attributes section. Click the + button to create a new attribute, and enter onclick as the attribute name.

  8. Insert the custom code in the onclick attribute: In the Value field of the onclick attribute, enter the JavaScript code necessary to trigger the appearance of the popup form. This code depends on the specific provider you're using. Be sure to wrap the JavaScript code with quotation marks.

  9. Publish your site: After completing these steps, make sure to save your changes and publish your site for the changes to take effect.

By following these steps, you should be able to open a 3rd party popup form in Webflow when a button is clicked. Just ensure that you have the correct embed code and that the JavaScript code in the onclick attribute is properly formatted.