Installing GiveForms on a Webflow website (Popup Style)

You can install your GiveForm on a Webflow website as a popup (modal).

Step 1. Copy your embed code

Sign in to GiveForms, then go to Forms. ‍

Select your desired form.

At the top right of your Form Editor page, click Embed My GiveForm.

Next, copy the embed code intended for a popup.

Step 2. Paste your embed code in Webflow

Open the page where you'd like to embed your GiveForm popup.

‍Paste the embed code into the Before </body> tag under page settings. Make sure to remove the Donate</a> text at the end of the code, as it won't be needed for this tutorial.

Step 3. Create a button

Drag a button onto your page and stylize it according to your preferences.

Step 4. Link your Form to the Donate Button

‍Copy the GiveForm URL from the popup embed code from Step 1. Only copy what is highlighted in yellow without the quotes.

In Webflow, paste the GiveForm URL in your button's Link Settings next to where it says "URL".

Step 5. Add a class to your Donate Button

Back to your embed code, copy the class called giveforms-donation-button without the quotes.

Add this class to your button by typing it in the Selector on the right hand side.

Step 6. Publish Your Project

You're done! You may want to publish to your domain.webflow.io site first to test and make sure the form is loading correctly.

Make sure SSL (https://) is enabled on your Webflow account. Learn more about how to do this in Webflow's support guides.