Signup flow with file upload for KYC documents

Today we will see how to use the file upload field in a form inspired by the type of information and documents that fintech companies usually request.

This is an example to explain how you can use the file upload fields in this type of form that you can then fully adapt to the needs of your business.

1. Basic data

First, we will add a step to request the user's basic data: name, email and company name, configured as required fields. These will be the basic data of our new contact.

After this, we can add all the steps and fields that we need to profile the user. However, to improve conversion, it is better to keep the form as short as possible. For example, you can achieve this by creating a flow to connect the form to a data enrichment service.

2. Bonus tip: Data enrichment + Conditional logic

You can ask for a corporate email and send it to this service, to check what data is available and then build the form based on this. Asking only for user information that you don't really have will greatly improve the UX and the conversion rate.

You can add conditional logic to the form to show different steps based on the data you already have from the user, or simply not ask for more data and send it directly to a CRM.

You decide what the important data is and how to manage it. Just remember to test different options to see which one works best for your business.

3. Upload a single file

Once we have obtained all the data we need, using any of the above options, we can use the file upload field to request documentation. The ‘File upload’ field allows uploading from 1 to 10 files of up to 20MB each. Let's see how to configure it in each case. 

When adding the 'File upload' field to the form, by default, it is configured to upload a file of up to 20MB of any type and it will not be mandatory. You can change this configuration by clicking on the field to open the settings and make the changes you need:

• Required: enable this checkbox to make it mandatory.
• Max. file size (MB): set the maximum weight of the file to upload, up to 20 MB.
• Specify allowed file types: select this option to define the type of files that can be uploaded. You can indicate the media type, the extension (or extensions) that you want to allow, or combine both options.
  

Once the form is submitted, you can check the data structure and get the URL to download it in the ‘Executions’ tab of the flow editor.

{
 "YOUR_FIELD_ID": {
   "fileUrl": "https://public.files.arengu.com/forms/.../files/.../company-document.pdf",
   "fileName": "company-document.pdf",
   "mediaType": "application/pdf",
   "size": "4709"
 }
}

4. Upload multiple files

Finally, we have added another step with a 'File upload' field configured to upload multiple files in it. For example, to ask for the ID cards of the founders of the company.

The settings of this field would be the following:

• Required: enable this checkbox again to make it mandatory.
• Max. number of files: set the maximum weight of the file to upload, up to 10.
• Max. file size (MB): set the maximum weight of each file, up to 20 MB.
• Specify allowed file types: as we have seen in the previous example, set the mediatype, the extension (or extensions), or combine both options.
  

In this case, once the form is submitted, you will notice a slightly different data structure, a list like the one below. You can check it in the ‘Executions’ tab of the flow editor.

{
 "YOUR_FIELD_ID": [
   {
     "fileUrl": "https://public.files.arengu.com/forms/.../files/.../company-document.pdf",
     "fileName": "company-document.pdf",
     "mediaType": "application/pdf",
     "size": "4709"
   },
   {
     "fileUrl": "https://public.files.arengu.com/forms/.../files/.../id-card.pdf",
     "fileName": "id-card.pdf",
     "mediaType": "application/pdf",
     "size": "796580"
   }
 ]
}

Taking into account this difference in the data structure, you can better decide how to organize the file upload fields of your form, depending on how you want to process them.

5. Preview, test and iterate

Building the form that your business really needs is a complex challenge, especially if you want to achieve a good conversion rate. The ability to iterate quickly is the key to achieving it and that is exactly what Arengu allows you to do.‍

Would you like to build a form like this? Create it in record time thanks to Arengu’s form editor and its set of native actions. Sign up free or schedule a demo with our team.