HubSpot Donation Module

Creating a donation page for nonprofits has never been easier, yet thorough. Donate Now – A donation page module that comes in handy with donation page styling and epic customization. Master appearance and donation page styles that help bring clarity in seconds, these are conveniently available with the drag-and-drop facility in this module. The module certainly gives you an upper-hand in creating the master page for your non-profit. 

Donate Now module contains all the elements that help you style a donation page that’s attractive enough for noble people’s attention and make your efforts worthwhile. Get the “Donate Now” module and you’d be able to:

• Use 2 Layouts – Hunger Relief & Nature’s Defender.
• Avail of multiple payment gateways.
• Embed payment form using FormPay.
• Customizable Amount Cards.
• Personalizable designs and branding options for the Donation Card.

Let’s begin setting up the Donate Now module in a HubSpot website theme template.

• Open your HubSpot account.
• Under the Marketing tab, hover over Website in the drop-down & then click Website Pages.
• In the top-right corner, click Create drop-down button. Then, choose by clicking the Website page.
• Enter a Page Name.
  
  
• Next, Select Template from the drop-down.
  

• After this, on the next page, scroll or search to find the “Donate Now” module in the module bar on the left.
• Use the drag-and-drop facility to place it anywhere suitable in the preview that appears on the left.

• Once done with the placing, you’ll now be able to view all the customization and settings available with this module. These settings are bifurcated into 2 tabs Content & Styles.

You can choose two different layouts available with this module.

The settings are partially the same in both layouts, but a few differences are there.

Choose a Layout and click Apply Changes.

Let’s bring clarity and define some terminology which’re going to use in this documentation.

Above is an illustration of Hunger Relief Layout:

1. Background Image
2. Donation Card
3. Title
4. Icon Box
5. Amount Card
6. Donate Button

Above is an illustration of Nature’s Defender Layout:

1. Image
2. Donation Card
3. Title (Container) & Sub Title (Container)
4. Amount Card
5. Donate Button
6. Social Icons
7. Archived Target, Final Target & Progress Bar
8. Mini Title
9. Title (Content)
10. Subtitle (Content)

This section represents FormPay.

Content & Style Settings available with Hunger Relief Layout

Content & Style Settings available with Nature’s Defender Layout

First, we’ll discuss all the settings that come under the “Hunger Relief” layout – content & style settings. The second will be “Nature’s Defender”.

 

Let’s look at the setting when you choose Hunger Relief as your layout suited to your purpose.

Let’s discuss each setting in detail. Start by selecting the Layout, this will determine the settings you’ll be able to view.

Defining the payment method involves two options:

• The first is FormPay. Where you can embed code of the form which you have already created in the FormPay app.
• The second is Direct Link, Under this you’ll have the option to add Form URL obtained from the FormPay payment form (or any payment platform).

Creating a payment form in FormPay is easy.

Learn all about the process to create a FormPay Payment Form in the FormPay Documentation.

After you Embed Code or attach the Direct Link, you’ll be able to test the donation form.

Note: The payment gateway you choose while creating the payment form will determine the various payment methods that will be available for your customer to use. So, above you see the payment methods that are available with the PayPal payment gateway.

Below the title, you will have more space to define your purpose. You keep it long as you like.

The text box of the description of the donation page will also have the an icon. You can choose from about 1353 icon options that come with this module.

You can browse the icons from the search bar. Simply, click the Add/Replace button, if you do not want an icon you Remove it by clicking the respective button.

The category involves suggestions for donations that will appear on the screen as a choice for the donator (end-user).

Have “ONE TIME” & “MONTHLY” as the first and second categories, you can customize these as Monthly or Yearly as per your requirement.

Moreover, you will be able to customize the Amount Card options (with texts & donation amount) i.e. “25 Meals per Day” will incur $25 one time. You will also be able to customize the amount & text proportion.

All the customization of the options available for Amount Cards (suggestion options) are enabled under this tab. Add as many Amount Cards as you like. According to the theme, it’s ideal to choose 3 or 5 Amount Cards.

You can insert an Icon alongside the Amount Cards and also use the Description space to convey your requirement. 

Add Help Text to establish how and how much the contributions will help the cause.

 

All the customization of the options available for Amount Cards (suggestion options) are enabled under this tab. Add as many Amount Cards as you like. According to the theme, it’s ideal to choose 3 or 5 Amount Cards.

You can insert an Icon alongside the Amount Cards and also use the Description space to convey your requirement. 

Add Help Text to establish how and how much the contributions will help the cause.

The Second Category is the option to have a donation plan for donors that want to support your cause for a longer period of time instead of making a single donation.

All the settings and customization available for Second Category are identical to First Category.

And add then you’ll be able to add a description of the after-donation redirect. You can use this section to pay thanks for the contribution made by the donor.

To add a link to the description, select text and click Insert > Link. Or use the usual Ctrl + K to add the link to the text.

After this, scroll down and go to the Button section. There you will add-in Text for the CTA button, and also add a redirect URL for the button.

This section will help you customize the Title of the FormPay payment of the payment form that appears when the user clicks on the Donate CTA button.

The Container sector simply would let you customize the overall layout with spacing, positioning, text style, coloring, size, font, & etcetera settings of the Background Image, Title, and Description.

You can add/replace/remove the background image from here. Customize the alignment of the image.

Here in the Spacing tab, you will find a few more customization options to decide on the appearance of all the elements of this page module.

Find all the title customization in the next tab Title > Typography Desktop tab. As the name suggests, the font, color, size, text case, tet style (bold/italic) alignment & spacing of the title are all customizable here.

Icon Box gives you everything to customize the description mentioned in the box.

The Icon you chose, also has customizable settings i.e. background color of the icon image, its radius, & color of the icon you chose.

The Donation Card involves the description everything except background image, title & amount card.

You can decide the color, radius, and spacing of the donation card.

You can make the amounts more appealing by customizing the color, size and spacing of the amount cards. (Applicable to all amount cards.)

Furthermore, the tab (Example: ONE-TIME & MONTHLY) are also customizable with text and background.

The Donate Button, is also customizable with color and text style.

Under hover settings, you can decide if the text color & background color will change when cursor hovers over the button.

Help text can be customized with color.

The container & body text of the payment form of FormPay is customizable with color concentration.

Let’s look at the setting when you choose Nature’s Defender as your layout.

This is exactly the same as how we discussed it in Hunger Relief Layout (Payment section). Embed Code or Paste Direct Link for FormPay Payment Form.

Headings are displayed differently in Nature’s Defender. It’s on the top of the Donation Card (instead of on the left of it as in the Hunger Relief).

• Title – Keep it short and sweet. Make sure it fits the text size (you can always customize it in the style tab).
• Sub Title – This will be displayed below the Title. You can use it to create an emotional appeal to your donors.

This image brings more customization to the donation page and helps with the emotional appeal. You can use it to establish your brand value and send a message about your thought behind the cause.

You can create/edit the texts in the content of the donation box:

• Mini Title
• Title
• Sub Title

Under the progress bar, you can custom edit:

• Achieved Target
• Final Target
• Goal Achieved Label

Furthermore, you can customize the amount cards (suggested amounts) as above. They will be displayed as donation amount suggestions to the donor.

 

Show you reach with social proof and build credibility. Adding social proof linking to your official pages will bring trust among your donors.

This is exactly the same as discussed in the Hunger Relief Layout (FormPay section). You can customize the payment form by FormPay.

The Style settings are exactly the same as discussed in the Hunger Relief Layout for the respective sections.

You can customize the spacing, positioning, style (bold/italic/semi-bold), coloring, size, corner, font, & more settings in:

• Container
• Title
• Sub Title
• Image
• Button
• FormPay

Let’s now discuss what different styling options are available in Nature’s Defender Layout.

All the style settings displayed in the content of the Donation Card are same , but there are a few that you won’t find in the Hunger Relief Layout.

You will be able to customize the font, color, size, spacing, style, alignment, and background of the text in the following texts:

• Mini Title
• Title
• Sub Title
• Progress Bar Texts
• Amount

Note: The Title & Subtitle mentioned here are displayed on the Donation Card and are different from the general Title & Sub Title discussed earlier as separate part.

Customization to the Social Icons is available for Icon Color & Background.

• Go to the Settings Tab.
  

• Enter Page Title.
• Make sure you have a Domain connected. Then, edit the Page Slug.
• Review everything and hit Publish.

Note: You can Preview you finalized Donation Page. Simply click the preview button below the publish button. Review it in all the screen dimensions (phone, tablet & desktop).

You also have the option to view it in a separate tab. Simply copy the link of your HubSpot Donation Page from the top-right corner.

Look like, we’re all done. Cheers!