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)

Optional Extras:

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

The View

You will then need to create a view to display your invoices. The view settings will be set as follows:

Basic Settings:

  • 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’

Listing Page

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:

Before content:

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

Content:

<tr>
<td>CADS0000[115]</td>
<td>[116]</td>
<td>[126]</td>
<td>£[129]</td>
<td><a href="[detaillink]">VIEW INVOICE</a></td>
<td>[if 167 equals="UNPAID"]<strong>[167]</strong>[/if 167][if 167 equals="PAID"]<strong><span style="color:green;">[167]</span></strong>[/if 167]</td>
</tr>

After content:

</table>

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:

https://formidableforms.com/knowledgebase/insert-a-link-to-change-the-value-of-a-single-field/#kb-send-an-email-after-field-is-updated

You can download the XML of our view to import and play around with which may help you get started.

Download here: https://www.dropbox.com/s/mn9l6lhvl1cer9t/cadsdigital.formidable.2017-03-20.xml?dl=0.

Summary

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.

Enjoy.

Still have questions?

Still have questions or not sure where to start? Use our quick contact to ask us a question.

Start Planning

If you’re ready to get started click here to complete our Project Planner.

You may also like…

FormidableTutorials
26 Mar 2019

Formidable Forms: File Upload Folder

Formidable Forms: Changing the File Upload Folder The Problem: You may want to change the folder that files will be…
FormidableTutorials
26 Mar 2019

Formidable Forms: Create an Invoicing system

Formidable Forms: Create an Invoicing system Here’s a guide on how to use Formidable Pro to create an invoicing system…
FormidableTutorials
26 Mar 2019

Share a form entry between users

Formidable Forms: Create a shared entry & view The Problem In some cases you may need to build a form…