Part 2 – Design the child form for expenses (Gravity Forms)

You can download the form and import it as per Gravity’s instructions (rename the file to .json) or create it as per steps 1 and 2:

Create a new form in Gravity and use fields that you will want to import from the exported bank transactions as specified your Finance team, such as:

• Amount billed (number field)
• Local charger amount (number field)
• Charged on (date field)
• Supplier Name (single text line field)
• Transaction Description (single text line field)

Add fields that your Finance team wants to collect from the users, such as:

• Project name (single text line field)
• Description / Justification (single text line field)
• Receipt from transaction (yes / no radio buttons)
• Attach your receipts (file upload field)

Mark fields that you want the users to enter as required.

• Add tooltips as per the Gravity Tooltips add-on if you like.

Set fields that are NOT to be edited as read-only. Use the Gravity Forms Read Only add-on for this purpose.

To modify the coloring (if desired), edit your theme’s CSS (under the ‘Customize tab’) and add the following code for each field that you want to edit.

• The first number (46) is the ID of the Gravity Form (you can tell from your URL) and the second number (i.e. 5) is the ID of the field, which you can see when editing the field.
• The color is in HTML coding – check websites such as this one to determine the right color for you.

#gform_wrapper_46 #input_46_5{background-color:#E1E1E1 !important}

Sneak peak into the final state of the child form when viewed from the parent form.

• Note: Data (entries) in the forms are yet to be created and data is to be yet imported). Quite nice, isn’t it?

Go back to course overview: Concur Alternative: Import Employees’ Credit Card Expenses to WordPress via an automated bank feed – Gravity Form/Flow & Make.com (Integromat)