Build A Product Payment Form

Payment forms are a powerful tool you can use to let your customers pay for products or services from an easy-to-use online form.

• Before you get started
• Create and name the form
• Add customer info fields
• Sync customer fields to your CRM
• Add customer payment fields
• Configure your form settings
• Embed your form
• Test the form

Before you get started

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

Before you start building your payment 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 form can be tracked as a specific type of customer. 

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

Create and name the form

1. Navigate to Forms app from the dashboard menu or Global App Menu.
2. Click Create Form, then select Basic Form from the pop-up that appears.
   
3. 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.

Add customer info fields

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

Sync customer info fields to your CRM

5. Select the option to Sync this field with the CRM if you'd like the value submitted by the user to automatically be saved with the contact in your CRM.
6. Once you've selected the sync option, a drop-down list of all the available CRM fields will display. Select the CRM field you'd like the data to be saved in.
7. Each form field that is set to sync to the CRM will display this icon next to the field label:

Add customer payment fields

8. Add at least one product field to your form. The type of field you use depends on what your customers will be paying for when submitting the form. There are options to allow them to select one product from a list, select multiple products from a list, or even enter their own payment amount. Remember, you can add multiple product fields to any form!
   In order to process payments, your must include a Product field, Credit Card field, and a Total field. An error message may appear. This message will disappear once you add all three fields to your form.
   

   Field	Field Description
   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.
   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.

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

10. 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.
    
11. Choose what users will see after they submit your form. You can choose Display a message over the form to add a 'thank you message' that will appear as a pop-up, or you can select Send them to a different page to re-direct the user to a specific URL after submitting their payment.
12. Create email notifications to let people at your business know about a new payment submission.
13. 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.
14. 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)

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. 

15. Click the Embed tab near the top of the form editor.
16. Click the Copy Embed Code button to copy the form's embed code to your clipboard.
17. Navigate to your website editor and paste the form embed code. If you're using Websites 360®,  you will use an HTML block on the page you'd like the form to display.
    

Test the form

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 Marketing 360® after a successful payment.

18. Submit a payment from your website.
19. Check your email inbox to see the email notification.
20. View the CRM to see the contact that was created. Be sure to check on things like contact type, status, assignment, and tag!
21. 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.
22. View the Leads & Sales Inbox in the Intelligence app to rate the conversion or leave a comment.