Formidable Forms: Create an Invoicing system
Here’s a guide on how to use Formidable Pro to create an invoicing system that allows you to create itemised invoices, assign them to your clients and keep track of payments made.
What you’ll need:
- Formidable Pro (some pro fields & views are required)
- Print-O-Matic Plugin – Allows your customers to print / download the invoices.
- A client management plugin – I use WP-Client to give me extra options but this isn’t required.
- Formidable Payment Add-on – All of my customers pay via bank transfer or cheque but you could easily use any of the payment add-ons like PayPal to collect payments online.
The Set-up: Adding A New Customer Form
Before you begin you’ll need to do a little set up by creating a couple of forms which will be for Admin use only. One of these include:
Add a new customer form – This form is for adding your customers name & address information. I used the standard template ‘User Information’ form that comes with FP and added a ‘Business Name’ field.
NOTE: You will need to have a field in your form that you can use to assign your invoices to a customer. We have a field in the users profile called ‘Client Business Name’ and where we can make sure that the ‘Business name’ field in my form matches this entry exactly. You could use a standard field like ‘display name’ or ‘nickname’ to the same effect.
The Set-up: Adding A New Invoice Form
Once you’ve added the new customer form, we’ll need to add another:
Add a new invoice form – This form will be used to create your invoices. It will need to contain everything you want to show up on your invoice that’s customer specific. Some details you could include:
- Invoice Status: with options “PAID” or “UNPAID”
- Invoice Number – this could be a basic text field with the ‘increment’ default value [auto_id start=1]
- Invoice Date & Payment Due Date – The invoice date can use the [date] default value and the Payment Due Date can use an additional snippet to automatically set the 2nd date at +30 days. You can read more about it HERE
- Total – This is a text field which auto calculates it’s value from the itemised lines.
- Customer Details – The customer details section uses lookup fields from the ‘Add a new customer’ form so that you only need to select the customer name from the dropdown, and the rest of the fields auto-populate. You can read more about how to do this HERE
- Itemised lists – This can be a ‘section’ fields containing fields such as: Item description, Qty, cost & total. The total field is a calculation using the Qty & Cost fields. You can obviously add or remove as many as you will need.
One option to expand the functionality further is to have the itemised items as lookup fields that you can select from a pre-set list. Descriptions and item costs could all be stored in a DB and looked up to make things easier & faster.
That’s all that’s required for the new invoice form. Once you have the 2 forms completed you’ll need to create a view to display the invoice list and the invoices. It’s also a good idea to add an entry to each one of the forms so that you can test that everything is working.
You will then need to create a view to display your invoices. The view settings will be set as follows:
- Use entries from form: Add a new invoice
- View Format: Both (Dynamic)
Advanced Settings > Sort & Filter:
- Order: Invoice Date / Descending
- Filter Entries: Customer > Is equal to > [wpc_client_business_name] – This filter is important as it’s how the correct invoices will be shown to the right customer. The field ‘Customer’ should contain the exact same information as this field will look up. As we mentioned above we use a field in each customer profile called [wpc_client_business_name] but you could use the [display_name] short code instead.
- No entries Message: ‘No Invoices Found’
This just uses a simple HTML table to display some of the info from the form entry and the [detail_link] required to view each entry (invoice).
Our code for this section is below:
<table> <tr> <td><strong>Invoice Number</strong></td> <td><strong>Invoice Date</strong></td> <td><strong>Payment Due Date</strong></td> <td><strong>Total</strong></td> <td><strong>More Details</strong></td> <td><strong>Status</strong></td> </tr>
<tr> <td>CADS0000</td> <td></td> <td></td> <td>£</td> <td><a href="[detaillink]">VIEW INVOICE</a></td> <td>[if 167 equals="UNPAID"]<strong></strong>[/if 167][if 167 equals="PAID"]<strong><span style="color:green;"></span></strong>[/if 167]</td> </tr>
The View: Details Page
The details page is a little complicated as it uses some HTML tables and other short codes which can be specific to every individual. You can style the details view to your preference.
There’s a great article in the Formidable documentation about how to update a field in your form from within the view. We used this function to add a button to allow the client to mark the invoice as ‘Paid’ so we can keep track invoiced which have been paid or are outstanding. However, you may want to leave this out completely.
You can read more about it here: https://formidableforms.com/knowledgebase/insert-a-link-to-change-the-value-of-a-single-field/
You can further expand this functionality and get the form to send you an email each time this is done by adding this snippet:
You can download the XML of our view to import and play around with which may help you get started.
Hopefully this will help anyone who is thinking of using FP to create invoices for their customers and save you having to install another plugin.
Still have questions?
Still have questions or not sure where to start? Use our quick contact to ask us a question.
If you’re ready to get started click here to complete our Project Planner.