1.Overview

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. 

2.What’s included?

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.

3.Module Settings

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.

    Module Setting
  • Next, Select Template from the drop-down.
hubspot module
  • 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.
donation module
  • 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.

3.1.Layouts

You can choose two different layouts available with this module.

layout

3.1.1.Hunger Relief

Hunger Relief

3.1.2.Nature’s Defender

Nature’s Defender

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

Choose a Layout and click Apply Changes.

3.1.2.Terminology

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

hunger relief

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
illustration of Nature’s Defender Layout

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)
FormPay

This section represents FormPay.

Content & Style Settings available with Hunger Relief Layout

Content & Style Settings available with Hunger Relief Layout

donation module

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”.

 

4.Hunger Relief

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

4.1.Content

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

4.1.1.Payment Method

payment-method

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.

payment-method1

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.

4.1.2.Heading

heading

On the left, you can create/edit the title or appeal you want to construct through the donation page. You will be able to view it as on the left in the preview.

Under the Style tab, you will be able to customize the font, text color, text size, and appearance.

Note: Create an appealing title and keep it short.

4.1.3.Icon Box

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

icon

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.

icon

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.

4.1.4.Category

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.

4.1.5.First Category

 

category

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.

4.1.6. Second Category

category-2

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.

modal

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.

modal-1

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.

4.1.7.FormPay

FormPay

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.

4.1.2.Styles

4.1.2.1.Container

container

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.

container-background

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

container-spacing

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.

4.1.2.2.Title

typography-desktop

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.

typography-mobileYou can customize the Title as per the mobile-friendliness of the page in the section below i.e. Typography Desktop.

4.1.2.3.Icon Box

style-donation-card-description

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

style-button-text-background

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

4.1.2.4.Donation Card

style-donation-card

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

style-donation-card 1

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

style-donation-card-spacing (1)
style-donation-card-inactuve-tab

4.1.2.5.Amount Card

style-amount-card-menu

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.

4.1.2.6.Button

style-button

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

style-button-hover

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

4.1.2.7.Help Text

style-help-text

Help text can be customized with color.

4.1.2.8.FormPay

style-formpay

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

4.1.2.3.Nature’s Defender

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

4.1.2.3.1.Content

4.1.2.3.1.1.Payment Method

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.

4.1.2.3.1.2.Heading

natural defender heading

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.

4.1.2.3.1.3.Image

nature

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.

4.1.2.3.1.4.Content

image Nature’s Defender

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

  • Mini Title
  • Title
  • Sub Title
content-progressbar

Under the progress bar, you can custom edit:

  • Achieved Target
  • Final Target
  • Goal Achieved Label
content-amount

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

 

4.1.2.3.1.5.Social Icons

natural defender social-icons

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

4.1.2.3.1.6.FormPay

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

4.1.2.3.1.2.Style

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.

4.1.2.3.1.2.1.Content

natural defender content

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.

4.1.2.3.1.2.2.Social Icons

natural defender stylesocial icon

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

4.1.2.3.4.Finish Page Setup

  • Go to the Settings Tab.
page setup
  • 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!

 

Suggest Edit