Funraise's WordPress plugin is the easiest way to add a form to your site. Although if you're a web developer and you'd like full flexibility over Funraise's Giving Form, you might want to dig in directly to our advanced documentation.
Alright, over the course of this video, we'll be adding a button right below the headline here so that when the button is clicked, Funraise's form will appear in the center of the screen where a supporter can make a donation without leaving the site. Let's jump in and take a look.
So here we're inside WordPress and we're looking at a basic page layout. Now, it's worth pointing out that the theme that you were using with your WordPress website will determine the view that you have when editing your pages, although the principles we'll discuss will apply to any WordPress site.
What we'll end up doing is adding a shortcode that will add a button that will launch a form right below our headline. But before we add the shortcode, we'll need to connect with Funraise's plugin. So if you're familiar with WordPress, you're familiar with plugins. We'll click over to the plugin menu and then we can click Add New. We can search for Funraise's plugin, and then we can install it. Once the plugin is installed, we'll need to activate it. Great. And that's it!
Now we're connected with Funraise, we're ready to use Funraise shortcodes to add Donation Forms to our website. So let's jump back into the page that we'd like to add our button to. And what we want to do is simply add a shortcode element, so click to open the element adder and then click shortcode. And this is where we're going to place our shortcode snippet. Now, to get this snippet, we'll need to go into Funraise to copy it. So I'll do that now. Now, here, we're inside Funraise, I'm looking at our Giving Form list. If you're new to Funraise, you can always access your Giving Forms from the side menu. In order to grab the snippet, we'll go ahead and open the Giving Forms editor. This is where you can edit the settings or the design for the Giving Form, but we've already done that. So now we just need to publish the form.
There's several different ways to publish your form, but for this example, we'll be using a WordPress plugin. The plugin has two options. We can copy a shortcode that will add a button to our website. And when this button is clicked, the form will open in the center of the screen. This is the most recommended option because it's mobile-friendly out of the box.
The second option is to place an open form directly in your page layout. This may require additional configuration if you'd like this to work perfectly on mobile devices.
Alright, so we'll go ahead and copy the button launcher shortcode, and then jump back into our page editor in WordPress. We'll just place this right here and that's it. So I'm not going to be able to see this in my editor. But if I update this page and then jump over to my live preview and refresh... we'll see that a button has been added right below the headline. I can click that button and my form pops up. That is exactly what I want. Wonderful.
Now, it's worth noting that the colors for the embedded button come from your Giving Form's design. So you notice the green is the same green as the form and you can set that in the Design settings of your Giving Form editor. Alright, that's it. I hope this was helpful. Have fun!
