Add a payment form to a page {VIDEO}

Use the Forms + Payments module to easily build mobile-friendly forms and gather data with payments directly on your website.

IN THIS ARTICLE:

How to add a payment form to a page

1

Drag and drop the Forms + Payments module onto the page

Navigate to the page on which you'd like to create a payment form. Once there, click Add Content, locate the Forms + Payments module in the Add-ons section of the content tray, and drag and drop it onto the page.

2

Configure the Payment Settings

After payment fields have been enabled, you can adjust the settings listed below as needed.

Online Payment Form Settings

  • Account - Use the dropdown menu to select the account to which funds should be allocated.
  • Subaccount - Enter an existing Subaccount to define where the payments will be coming from. (e.g., The name of the subaccount is often identical to the name of the page or payment form. By default, the Page Title is listed as the Subaccount.) Avoid changing the Subaccount name once you begin accepting payments via the form on your website.
NOTE: See Accounts and Subaccounts for instructions on how to configure these important elements in your eCatholic Payments Center.
  • Require Payment - You can require immediate payment or allow visitors to choose to make their payment at a later date.
  • Payment Type - Select whether you plan to accept Credit Card payments, eChecks, or Both.
  • Enable Member ID - Select whether you'd like the form to include a field that would require visitors to enter a Member ID or envelope number. Once activated, you can:
    • Edit the name of the field. (e.g., "Envelope Number")
    • Choose whether the field should be required.
    • Add a short message to help visitors complete the field correctly.
    NOTE: If you already assign a Member ID or envelope number to individuals/families, using the Member ID field in your payment forms can allow for easy importing into your member database software.
  • Enable Comments - Select whether you'd like to add a text field in which visitors can enter comments. Once activated, you can edit the name of the field, choose whether the field should be required, and add a short message to help visitors complete the field correctly.
  • Payment Submit Button Text - Edit the text that appears on the form's "Make Payment" button. (e.g., "Pay Now")
  • Pay Later Button Text - Edit the text that appears on the form's "Pay Later" button if Require Payment is Off. (e.g., "Pay by Check")
  • Count Responses Toward Form Limits When - If Require Payment is set to "No, allow to pay later" you can toggle to determine if form limits are counted upon form submission or only upon payment

Once finished, click Save.

DON'T FORGET: This is where you can also edit general form settings as well, such as defining submission limits, adding an alert email address, and more.

How submission limits are counted on payment forms

In the Basic tab of the form settings, you can use the Limit Submissions setting to cap the number of form submissions at a specific amount. However, the Require Payment setting affects how submission limits are counted on a payment form. Here's how it works:

  1. If Require Payment is set to Yessubmissions are only counted toward the limit if the payment has been paid in full.
  2. If Require Payment is set to No, allow to pay laterall form submissions will count toward the limit, regardless of the payment status.

To learn how field limits are counted on payment forms see Form Field Limits.

3

Drag and drop fields into the form

Hover your cursor over the form to reveal three tabs: Basic, Prebuilt, and $. All three tabs contain fields that you can drag and drop into the "Drag Fields Here" area of the form. Continue adding fields as needed.

NOTE: Click the Copy icon to duplicate a single field or group. Rearrange fields or groups of fields by clicking and dragging the orange handle, which is located along the right edge of each form field.
4

Customize your fields

Hover your cursor over a field and click on the Settings icon to customize individual form fields. Use this method to edit field titles, set fields to "Required," enter field instructions, and much more. 

5

Publish the form

Once you've finished adding fields and editing the form's settings, click the Publish button at the bottom of the page. Your visitors will then be able to complete the form and submit their payment directly on your website.

Managing data from your Payment forms

The Form Results Manager allows you to easily manage data submitted via your online payment forms. In the Form Results Manager, you can:

  • View total paid and unpaid amounts
  • Update billed amounts
  • Record cash or check payments and much more.

See How to manage payments in the Form Results Manager for full details.

Next step

Now you know how to create an online payment form! Next, learn about the different types of Payment Fields you can use with every payment form. 

>> Go to Overview of Payment Form Fields

Still need help? Contact Us Contact Us