The page we're looking at in front of us is a simple donation page constructed inside of Squarespace. Over the course of this video, we'll be adding a button right below the Give Once column, as well as a button right below the Give Monthly column. And when clicked, these buttons will open up a Donation Form right on top of this page where your supporters can make a donation right on your website.
Okey dokey. First things first, let's jump right into Funraise. in Funraise, I'm looking at our Giving Form section. If you're new to Funraise, you can always access your Giving Forms from the side menu. In order to access the code snippets to embed this form, I need to open up the form editor. So I can click the form, and I've already made configurations to my Settings as well as to the Design that I'd like to see on my form, so now I'm ready to publish it.
There are several different ways to publish your form. If you're adding a form to your website, the most recommended method is to use the button launcher. The button launcher has three code snippets that we'll need to place on our site in a few specific places. We'll copy the Funraise Aware Code. This code should only be placed once across your entire website. In order to do that, we'll jump back into Squarespace and we'll want to place this inside our code injection in our header element in Squarespace, we can get there from Settings > Advanced > Code Injection. Now, here, we can add code to the header of our website that will be loaded on every single page. So we can just paste the code that we just copied. Easy.
Next step, we need to configure and create this specific form on our website. Now, this is a general form that we'd like to load on every single page and be able to call to it with buttons across our site. So we're going to do is we're going to copy this code, and we're going to place it in the header in the same place. Now, it's important that this is placed below the Funraise Aware Code.
There are also other options for placing the script. This could be placed on the page. But in this case, because it's a general form that we want to use across our website, it's a great idea to place it right in the header so it's there and available. If you're a web developer, there's a whole lot more you can do with the configuration code, but we won't cover that in this video. OK, so that's it for code injection, we'll go ahead and press Save.
So now we'll jump back over to our page here and our page is ready to go. It's just waiting for a button to be clicked to open a specific form. So let's go ahead and grab that button code. Here we can see the button code. Now all I've done is change the button color. If you are web developer, you might want to add your own classes to this, but you can certainly configure the styles inline as well. We'll just copy this button code, and then jump back over to Squarespace.
Now, inside of Squarespace, I want to add this inside a Code element on my page. So inside the column that I have, I can look for the Code element. And I can pull it here and we'll just place the button code that I just copied right inside this code element. And now we can see we've got a beautiful button right where we want it, right underneath the Give Once column.
Let's go ahead and test this out before we start adding more items. So I'll click save and then let's go ahead and expand this to take a look. Now when I click this button... Wonderful, the form pops open, just as I expect.
Now, next, what we'd like to do (and this is a bit more advanced, but it's easy enough anyone can accomplish) is to add a monthly donation button. Now, we want this button to open up the exact same form, but we'd like it to open with the frequency preset to monthly. So what we're going to do is jump back into the editing section, and we're going to place a code block just like we did before. And we're going to paste our button code into this area.
Now, let me go ahead and open this up a little bit so we can see more. Now, this is the exact same code from the previous column and all I'm going to do here is I'm going to add an additional attribute. This would be data-frequency. And if I put an M for monthly, that means when this button is clicked, it will open up with monthly preselected on your Donation Form. Now, there's a few more attributes (I should say, there's many more data attributes) that you can add to your HTML elements—this is just one of them. All of these items are detailed in length at our developer documentation. I'll go ahead and close this out here so we can test this.
Alrighty, let's make sure we save that. And then we'll test. Excellent! I now have a Donation Form that opens up preselected to monthly. And that's it! Now, once you add those elements into your website, you can basically place buttons just like this on any page you'd like, as well as add multiple forms to your website based on your strategy. Alrighty. I hope that was helpful. Have fun!
