Here I've got a simple donation page with two columns for one-time donation or monthly donation. We've got everything in place, including the buttons, they just don't click or connect to anything yet. So over the course of this video we'll be connecting these buttons to a Funraise form so that when the button is clicked, the form will appear in the center of the screen, where a supporter can make a donation without leaving the site.
So let's take a peek at the editor to see how we've built this so far. Right now, we've just got a basic layout with two columns and then a simple button element. I have not connected this button to a link or anything yet, so it's just sitting there waiting, ready to go.
What we'll do in the future step is to connect this button with a specific Funraise form through a custom attribute. But before we're ready to connect it through an attribute, we need to add a few code snippets into the head code of this website.
You can access your head code from the project settings and then custom code. Now, here, we need to place a few snippets. To get those snippets we'll jump into Funraise, and here we're looking at Giving Forms. If you're new to Funraise, you can always access your Giving Form settings from the side menu. Alright, we'll go ahead and open up this Giving Forms editor and inside the editor, you can configure Settings and Design for the form, which we've already done. So now we're ready to publish this form.
There's a few different ways to publish the form. The most recommended option, and the use case for this example, will be the Button Launcher. So we'll go ahead and copy the Funraise Aware Code. The Funraise Aware Code should only be placed once across your entire site.
But now we need to load a specific form for your site. You can do that with the Form Configuration code. So we'll copy this code and we'll place it right below the Funraise Aware Code. We're placing this here because this is a general form that we would like to use across all pages of our website. If you're only using a form on a specific page, you probably want to place that form configuration code on that page specifically, so that it's not being loaded on pages it doesn't need to be. As well, developers, you can do a lot more through the form configuration code, which you can learn about at our developer documentation. For now, we'll just leave it like this. We'll save these changes and return to our designer.
Now, inside the Designer, we're going to end up connecting these buttons to the form through a custom attribute. So if I add a custom attribute, I'll need a name and then a value. Well, this is where we can jump back into Funraise, and I can see that if we were just placing this in a code block, this is the code that we'd be suggesting for you. The only magic here is that it's being connected through a data attribute to a specific form. Now the ID for the form is "498" and the attribute is data-formId. So that's easy. We can place that information, the name, and then add our value here, and go ahead and save that. Wonderful. So now that we have everything added and saved, we should be able to see this on our live site. So to do that, let's go ahead and wait for this to save here... There we go. And then we will publish our changes, and then let's take a peek. Wonderful! So when the buttons clicked, the form pops open, just as expected. That's what we want.
Now, what we want to do is, for our next button, we want this form to open with a monthly frequency. You can see that it's defaulted to One Time, but we'd like to do is have this item selected when the other button's clicked. So to do that, it's actually really fun and simple. So let's go ahead and set up our button here the same way we did for our one time. We're going to do the attribute and then place the ID here. So now this button is connected to a specific form.
What's great about Webflow is that you can connect a bunch of attributes on the element. Funraise has a lot of attributes that can be added to HTML elements to default the form in various ways. One of those is frequency, so we can say data-frequency and then for the value we can place M for monthly. And then we'll save that. Now, once our page saves, we can publish it. And this will open our form with a monthly frequency. Great. That's exactly what we wanted.
So now you can have buttons like this across your entire site. You can see all that's required. If you have both the Funraise Aware Code and the form configured in the head of your website, all you need to do is add buttons and then add a simple custom attribute that's linking to a specific form. Awesome. I hope that was helpful. Have fun!
