Filling And Submitting Forms Using AI Voice Agent

In this guide, we will explain how to enter values into form fields using voice commands, allowing the AI Voice Agent to capture information through natural conversation and populate form fields automatically, without any manual data entry. Once all required information is collected, the AI requests confirmation and submits the form programmatically.

1. INITIAL SETUP:

  • Drag and drop a “Hidden” (AI Submit Form Action), a “Voice Agent”, and an “AI Prefill” field onto your form to set up the AI Voice Agent.
  • Rename the fields as needed.
image
  • Drag and drop some fields onto your form to prefill the data using the Voice Agent.
  • Here we are using some fields to capture the Opportunity details.
image
  • Drag and drop a “Hidden”, a “Field Update Workflow”, and a “Navigation” field onto your form.
  • Rename the fields as needed.
image

2. CONFIGURE THE “VOICE AGENT” FIELD:

  • Click the pencil icon of the “Voice Agent” field.
  • Set up the field:
    • Read Text From Field: Here, c824-7412-f3ad is the component ID of the Hidden field.
    • AI Prefill Component Id: Here, 84a8-09c3-67e0 is the component ID of the AI Prefill field.
    • Voice Agent Welcome Message: Enter the message users hear when the form loads (e.g., "Hi, my name is Emma, and I will be happy to help you fill out the form. Click the "Start Speaking" button and tell me what fields you would like to fill out or ask any questions about the form.")
image

3. CONFIGURE THE “AI PREFILL” FIELD:

  • Click the pencil icon of the “AI Prefill” field.
  • Add the AI Prompt.
image
  • Please use this example Prompt:
  • Map Data Key(AI output values) to Form field:
    1. AI Agent Response Text - voice_response
    2. Opportunity Name - form_data.opportunity_name
    3. Contact Email - form_data.contact_email
    4. Product - form_data.product
    5. Price - form_data.price
    6. Quantity - form_data.quantity
    7. AI Submit Form Action - form_data.submit_form
image

4. CONFIGURE THE “NAVIGATION” FIELD:

  • Click the pencil icon of the “Navigation” field.
  • Set up the “Button Action” to “Submit”.
image

Optional: You can hide the navigation button using CSS. This will ensure that the form can only be submitted through the AI Voice Agent.

  • Drag and drop an “HTML” field.
image
  • Click the pencil icon of the “HTML” field.
  • Add the CSS to hide the “Navigation” field.
image
  • Please use this code.
  • Here, 0751-9b9c-5217 is the field ID of the “Navigation” field.
<style>
#component-0751-9b9c-5217{

display:none;
}
</style>

5. TEST THE FUNCTIONALITY:

  • Try the Form.
  • Click the “Start Speaking” button.
image
  • Give the voice instructions to fill out the form fields.
image
  • Click the “Stop” button.
  • The “Voice Agent” will fill in the fields based on given instructions.
image
  • The user can also enter the details manually.
image
  • The user can submit the form using the voice command.
image
Example Form.json18.8 KiB

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