Prefill Form Fields Using Information from A Business Card Image

This guide will explain how to automatically extract contact information from business card images using the “AI OCR Prefill” field. When you upload a business card image, the system analyses it, and prefills form fields with the extracted data. This streamlines contact management and reduces manual data entry.

  1. INITIAL SETUP:
  • Drag and drop an "AI OCR PreFill", a "Hidden", and an "API Prefill" field onto your form.
  • Rename the fields as needed.
  • The "Hidden" field will store the OCR response data.
  • The "API Prefill" field is used to map the OCR response data to form fields.
image
image
  • Drag and drop the required fields inside a Repeat Group to display the business card data. In this example, we are using four “Text” fields and one “TextArea” field inside a “Repeat” field to show the extracted business card information in rows.
  • Rename the fields as needed.
image

2. CONFIGURE THE "AI OCR PREFILL" FIELD:

  • Click the pencil icon of the "AI OCR PreFill" field.
  • Add OCR Prompt: Contains instructions to extract name, designation, company, phone, email, address, website, and social media.
  • Add OCR Response Field ID: Set to the ID of the “Hidden” field.
  • Enable the Run on File Upload: Enabling this option automatically triggers OCR processing when a business card image is uploaded.
image
  • Here is an OCR Prompt example we are using:

3. CONFIGURE THE "API PREFILL" FIELD:

  • Click the pencil icon of the "API Prefill" field.
  • Set API Type as "Get".
  • Add “Repeat Group Field ID” option: Add the Repeat Group field ID from your form.

image
  • Set “Yes” to the “Disable API Call on Page Load” option.
image
  • Add “Local Data Field” option: Add the “Hidden” field ID (where OCR data is stored).
image
  • Create Prefill Mappings that match OCR response fields to form fields:
    1. Form Field "Name" → Data Key "name"
    2. Form Field "Designation" → Data Key "designation"
    3. Form Field "Email" → Data Key "email"
    4. Form Field "Address" → Data Key "address"
    5. Form Field "Company" → Data Key "company"
image

4. TEST YOUR FORM:

  • Try your form.
image
  • Upload a clear business card image to the "AI OCR PreFill" field.
  • Wait for automatic OCR processing to complete (usually 2-4 seconds).
  • The form will automatically extract business card data using AI OCR and populate the Repeat Group fields with the extracted information.
image
  • You can upload multiple business card images in a single upload.
  • The OCR will extract each business card as a separate entry.
  • Each business card will appear as a new row in the Repeat Group.
  • All entries can be edited, added, or deleted as needed.
image
Example Form.json10.1 KiB
  • Here are some examples of Business cards we used in this guide.
image
image

For any questions, please contact us - [email protected] or the Formyoula in-app chat.