Skip to main content

CONNECT: Add Payment Forms and QR Codes to Your Website

Updated

There are numerous options to add Payment Forms to your Website. In this article we are focusing on Payment Forms, but you do have the option of adding PayQuick.ly forms (short-forms) as well. 

  • Direct Link – a hyperlink pointing to a Click & Pledge URL.
  • QR Code - a link for websites and printed materials.
  • Inline (iframe) / Embedded – the form appears directly within your webpage.
  • Overlay – the form opens on top of your webpage, optionally with a semi-transparent background.
  • Plugins - WordPress and Drupal users should use the appropriate Plugins for payment forms to ensure the forms appear correctly on websites.

This article provides instruction on how to navigate to access the necessary codes to post donation forms on websites, and descriptions of the different posting options. 

This Article Includes:

Navigation: How to Locate Form Code

  1. In the upper right corner, click on the Launcher icon (4 squares).
  2. Under that click on Fundraising.
  3. On the menu on the left, click on Campaigns & Forms.
  4. You will be presented with your list of Campaigns. Identify the Campaign name for which you need the link or code and click it. A subdirectory will open.
  5. Under the Campaign name, click Form Builder.
  6. You will see Templates, scroll down the page to Saved Forms.
  7. Find the thumbnail image of the Payment Form, and beneath it click the Code icon <⸱⸱⸱>.
Image of the Steps to Navigate to Payment Forms

 

  1. Select which option to use and click the appropriate circle.

Image of Code Options for Payment Forms

  1. Follow the instruction within the option you selected. (Note: right-click on the QR Code to save the image to your computer.)

     

Description of Payment Form Options 

 

Direct Link Forms

  • A Direct Link form is a standalone payment page hosted by Click & Pledge. This is the simplest way to add a payment option to your website.

  • Organizations often create a hyperlink from a “Donate Now” button or a text link. When clicked, the donor is taken to a secure Click & Pledge URL.

     

QR Code

QR Codes enable a patron to open the payment form through the camera on their phone, making for a frictionless donation experience. QR Codes can be placed in newsletters, fliers, posters, tabletop tent cards, and hand-outs as well as in websites. 

 

Inline (iFrame) / Embedded Forms

An Inline iFrame form is embedded directly into your webpage. It automatically adjusts its size so the form displays cleanly within your site layout, creating a seamless payment experience. Note - only one inline iframe form can be embedded per webpage.

WordPress or Drupal users will need to use the designated plugin.

Video instructions for Squarespace website users:

 

 

Overlay Forms

An Overlay Form appears on top of your webpage while keeping the same URL.  A Close button appears in the upper right corner. You may add multiple overlay forms to a single webpage. Using the form builder, you can choose a transparent or semi-transparent background, allowing donors to see your webpage behind the form. You may also choose to have the form cover the entire page.

Instructions for making a transparent or semi-transparent background.

Open the form builder and select the form for which you want to set a transparent or semi-transparent background.

 (Navigation to editing forms.)

transparent background.jpg
  1. In the Settings area to the right, click on General Settings to toggle it open.
  2. Click on the down arrow to open the Page Background Color.
  3. Select a medium-dark gray color, such as rgb 68, 68, 68. 
  4. Move the transparency slider under the color block to the left. The farther left you slide it, the more transparent the color will be. Note: It will appear as a light gray background in the editor.
  5. Click "choose" under the slider to save the color selection. 
  6. Click the pink "Update" button at the bottom to save.

Plugins - WordPress or Drupal

For WordPress and Drupal websites, use the appropriate Plugins for your Click & Pledge Payment Forms. This will ensure the forms appear appropriately on your websites.

With these plugins, an organization’s website administrator can create a Form. Once created, the plugin will provide a “Short code” that can be copied and placed in WordPress pages/blogs/posts. 

  • For more information on the WordPress, click here.
  • For more information on the Dupal plugin, click here.

 

 

Related articles