How To Build An Online Bill Pay or Donation Form

Payment forms are a powerful tool you can use to let your customers pay custom amounts from an easy-to-use form. This is a great way to let customers pay their bill or recent invoice, or even to collect donations.

Before You Get Started

One of the most powerful features of online bill pay or donation forms is their ability to collect detailed information from the customer when they submit their payment or donation. This customer information can be synced up with your CRM and leveraged for things like automated email marketing. 

Before you start building your form, take a moment to think about how you segment your contacts in your CRM and what customer info you'd like to collect with their payment. You'll want to make sure you create contact types and contact fields in your CRM first so when you build your form, you can sync everything up with the CRM.

You may want to create specific contact types so any customer that submits a payment or donation form can be tracked as a specific type of CRM contact. 

You may also want to create specific contact fields so fields from your payment form can populate a certain contact field.

Need a refresher on how to add contact types or fields in your CRM?

• Click here to learn how to add new contact fields to your CRM.
• Click here to learn how to add new contact types to your CRM.

Once you've checked that all the necessary CRM contact types and fields have been created, follow the process below to build a payment form that can sync up with your CRM.

Building a Donation or Online Bill Pay Form

Add Form Fields

1. Navigate to Forms app and click Create Form. Select Basic from the pop-up that appears.
   
2. Enter a form title. This won't be displayed on the form, so choose something that best describes the type of purchase the customer will make and will be easily identifiable by your team.
3. Add form fields for things like name, email, phone number, and any other customer details that need to be collected when your customers submit their donation or payment. You'll have the option to sync these fields to your CRM, so take this opportunity to collect any information you'd like to use later to segment your customers or add them to email marketing lists. (See step 3 in 'Configure Your Form Settings' below)
4. Add a user-defined product field to your form. If needed, you can add other product fields to the form as well.
   Note: In order to process payments, your must include a Product field, Credit Card field, and a Total field. You may see an error message. This message will display until you add all three of these fields.
   
   

   Field	Field Description
   User-defined	Gives the customer a text field where they fill in the amount to pay. This is a great option for adding a tip, donation, or anything else where the customer gets to decide how much to pay. No options for quantity. Includes option to set minimum and maximum purchase amounts. Includes option to set custom error message when a user does not enter a value between minimum / maximum purchase amount.
   Single Product	Gives the customer one basic product to purchase. This is a great option for selling goods or services that have no need for custom options. Quantity option can be on or off. Has option for product description. Can be set as ‘hidden’ if the user has no reason to select a quantity or see the product details at all. (Good option for form that only sells one product with no need for a quantity)
   Drop Down	Gives the customer the option to select one product form a drop down list. This is a great option for selling a product with options like sizes for a t-shirt.  Each option can have its own price Quantity can be turned off or each dropdown option can display its own quantity. No product description. Instead, include descriptions of each option in the label fields.
   Radio Button	Gives the customer the option to select one product from a list of radio buttons. This field works just like the drop down option above, but it displays all the options to the customer without them having to open a dropdown menu. Each option can have its own price Quantity can be turned off or each radio option can display its own quantity. No product description. Instead, include descriptions of each option in the label fields.
   Checkbox	Gives the customer the option to select multiple options from a list of checkboxes. This is a great option when you need to allow your customers to select multiple options for a single product, like adding toppings to a pizza.  Each option can have its own price Quantity can be turned off or each checklist option can display its own quantity. No product description. Instead, include descriptions of each option in the label fields.

5. Once you've added all the Product fields, include a Credit Card field and a Total field.
   

   Field	Field Description
   Credit Card	This field will display fields to enter a card number, expiration, CVV, zip code, cardholder name, and receipt email. Has the option to auto-populate the cardholder name with the form’s 'name' field by default. Alternatively, if the standard 'name' field is included in the credit card field, a user could submit the form and enter someone else’s name as the cardholder.  No CSS options.
   Total	This field will display the overall total price of all products selected in the form.

Configure Your Form Settings

Now it's time to add settings to determine what will happen after the customer submits the form. To get started, select the Settings tab. To learn more about configuring form settings, click here to read the full article.

1. Choose what users will see after they submit your form. You can add a 'thank you message' that will appear, or you can select Send them to a different page to re-direct the user to a specific URL after submitting their payment.
2. Create email notifications to let people at your business know about a new payment submission.
3. Create submission rules to determine how the customer will be saved in your CRM after submitting their payment. Using these settings, you can add a Contact Type, Contact Status, Assignment, or Tag to any customer that submits the form. These CRM fields can then be used to trigger things like email marketing in the Nurture app.
4. Add Duplicate Submission Rules to determine what will happen if the same user submits their information more than once. (This is especially necessary if you expect your customers to use the form more than once for things like monthly invoice payments.)

Embed Your Form

Once the form has been built and settings are configured, the next step is to embed your form on your website. For more information about embedding your form, click here to read the full article. 

1. Select the Embed tab near the top of the form editor.
2. Click the Copy Embed Code button to copy the form's embed code to your clipboard.
3. Navigate to your website editor and paste the form embed code. If you're using iHeartSiteBuilder,  use an HTML block on the page you'd like the form to display.

Test It Out!

Once your new payment form is live on your website, it's a good idea to test it out so you can make sue the form you've built will be user-friendly for your customers and know what to expect to see in iHeart Business after a successful payment.

1. Submit a payment from your website.
2. Check your email inbox to see the email notification.
3. View the CRM to see the contact that was created. Be sure to check on things like Contact Type, Contact Status, Assignment, and Tag!
4. View the e-Commerce page in the Payments app to see a record of the payment. You can refund the payment here by clicking the three-dot 'more info' icon to the right of the payment details.
5. View the Leads & Sales Inbox in the Intelligence app to rate the conversion or leave a comment.