API Integration To Get 9-Digit ZIP Code

This guide walks you through integrating an external API with your Formyoula form to automatically fetch and populate a 9-digit ZIP code based on address inputs. It covers adding form fields, configuring the API Prefill and workflow components, and generating the required API key.

  1. INITIAL SETUP:
  • Drag and drop the required “Text” fields into your Formyoula form for capturing the parameters needed for the API.
image
  • Drag and drop three “Hidden fields”, an “API Prefill”, and a “Field Update Workflow” field.
  • Rename the fields as needed.
image
  1. CONFIGURING THE HIDDEN FIELD (embedded_auth_id):
  • Click the pencil icon of the “Hidden” field labelled “embedded_auth_id”.
  • Paste the API Key.
  • Note: Follow the Step 6 for detailed instructions on how to generate your API key.
image
  1. CONFIGURING THE “API PREFILL” FIELD:
  • We will use the API Prefill Field feature to automatically retrieve the zip code from the API.
  • Set “API Type”, “API URL”, and “Formyoula Parent Field” as shown below.
  • Here, the API URL is : https://us-street.api.smartystreets.com/street-address
image
  • Set “0” under the API Response Object Key.
image
  • Use Hidden Fields for ZIP Code Prefill: Use Hidden fields in the form to store the first 5 digits and the last 4 digits of the ZIP code retrieved from the API. Use prefill mapping data keys like components.zipcode and components.plus4_code to map the corresponding values from the API response to these fields.
    • First half part of 9 digit zipcode || components.zipcode
    • Second half part of 9 digit zipcode || components.plus4_code
image
  • Set “Content-Type” for API Headers: Configure the Content-Type header as application/x-www-form-urlencoded; charset=UTF-8 for the API request.
    • Content-Type || application/x-www-form-urlencoded; charset=UTF-8
image
  • Include all the required form fields as body parameters in the request.
    • auth-id || {{61ae-2dde-36c2}}
    • street || {{49b8-ba9b-5032}}
    • city || {{91ca-d076-eb7f}}
    • state || {{ec10-7638-a655}}

Here, {{61ae-2dde-36c2}} is the field ID of the field labelled “embedded_auth_id”,

Here, {{49b8-ba9b-5032}} is the field ID of the field labelled “Address”,

Here, {{91ca-d076-eb7f}} is the field ID of the field labelled “City”,

Here, {{ec10-7638-a655}} is the field ID of the field labelled “State”.

image
  1. CONFIGURING THE “FIELD UPDATE WORKFLOW” FIELD:

Set up a Field Update Workflow with Rule Criteria to check that both Hidden fields are not empty. Then, update the “9 Digit Zip Code” field by combining the values from the two hidden fields in the format: {{4f03-083a-4980}}-{{ad29-91b3-e62d}}

  • Set “Rule Criteria”:
    • First half part of 9 digit zipcode || not equal to ||
    • Second half part of 9 digit zipcode || not equal to ||
image
  • Set “Field Updates Success”:
    • 9 Digit ZipCode || value || {{4f03-083a-4980}}-{{ad29-91b3-e62d}}
    • Here, {{4f03-083a-4980}} is the field ID of the field labelled “First half part of 9 digit zipcode”,
    • Here, {{ad29-91b3-e62d}} is the field ID of the field labelled “Second half part of 9 digit zipcode”.
image
  • Save the changes.
  1. Test Your Form:
  • Filling in the address will automatically populate the 9-digit ZIP code.
image
  1. CREATE THE API KEY USING A THIRD-PARTY SITE:
image
  • After accessing the dashboard, navigate to the “API Keys” section.
image
  • Click the “+” icon to create your first API key.
image
  • Enter a name, optional description, and add app.formyoula.com as the allowed host, then click “Create Key” to generate your embedded API key.
image
  • Once the API key is generated, copy it and paste it into the “Hidden” field labeled “embedded_auth_id” on your form, as instructed in Step 2 of this guide.
image

Note: This API key will only work if you have an active paid subscription. For now, you can start a free 42-day trial.

  • To activate it, click “Subscriptions” in the left side menu on the dashboard.
image
  • Click the ”Add subscription” button.
image
  • Click the “Get it now”.
image
  • Click “Get a 42-day Free Trial” to activate your free trial.
image
  • A confirmation message will appear—once shown, you can now use the API key on your form.
image
Example Form.json9.4KB

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