How to Create a Bill

FormSmarts offers a really simple way to create bills that customers can pay online: just create a billing form like the one below, then use a tool on FormSmarts.com each time you want to generate a bill for a specific client and amount.
Online Bill Example

Make a Billing Form

We only need to create the billing form once, we’ll then reuse it each time we need to create an invoice.

Here our example has two main input fields: an email field to uniquely identify the customer and a text box for the amount we want to bill them for. You can view and test the billing form. We’ve also made a slightly more elaborate example that allows a client to add a gratuity with a second amount box.

Note how both the Email and Amount Due fields are fixed: the values preset in the pre-filled URL can’t be changed by the client. We’ll cover how to do this in the next section, for now I need to explain how to set up the Amount Due input field so FormSmarts recognizes it as a fee to be paid by the bill recipient.

Add an Amount Box

  1. Add a Text Box form control (widget)
  2. Name the input field Amount Due ($ USD). The ‘Amount Due’ label can be whatever you prefer, but you must stick to the same format and specify the currency as shown.
  3. Set its Allowed Content value to Positive Number
  4. If you’ve already configured PayPal integration, you’re all set. Otherwise your need to associate your PayPal account with FormSmarts.

Create a Pre-Filled Bill

When you need to create a new bill, sign in to FormSmarts’ API Console to generate a new Pre-Filled URL with a fixed email and amount. Send the URL to the client in an email or text as a bill.

  • Set the Method to POST (Create)
  • Set the API Endpoint to https://formsmarts.com/api/v1/forms/Form_ID/prefilled_url, replacing Form_ID with the ID of your form.
  • Enter the Request Data as illustrated below and described in the documentation, then submit.
The ID of a form is the alphanumeric string in its FormSmarts.com URL. For example, if a form’s URL is https://formsmarts.com/form/2301?mode=h5, its Form ID is 2301.

Generate a Pre-Filled Bill URL

Preset Values & Make Fields Read-Only

We enter the preset value of the email and amount fields under Request Data, and make sure those can’t be modified by the user:

  • Pre-fill the first input field on the form (pf_f1) with the value blackhole@syronex.com
  • Preset the second input field (pf_f2) to 187.59
  • Prevent the user from modifying either fields by making them read-only (pf_ro1=1, pf_ro2=2)
pf_f1=blackhole@syronex.com
pf_f2=187.59
pf_ro1=1
pf_ro2=2

Find out more about how to pre-fill your forms and how to automatically generate pre-filled URLs if you need to create too many bills to do it manually.

Leave a Reply

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.