Course Content
Apps – Expert
0/8
UI Logic – AI App Builder
00:00
Events – Conditional logic – AI App Builder
00:00
Variables – AI App Builder
00:00
Tables – AI App Builder
00:00
Modals – AI App Builder
00:00
Address Finder – AI App Builder
00:00
Kanban – AI App Builder
00:00
Course Exercise: Build a Secure Salesforce Customer Portal with OTP – AI App Builder
00:00
Apps – Expert

Academy Lesson: Building Address Autocomplete Forms with Prompts

Manually typing out a full address on checkout pages or sign-up sheets can frustrate users and lead to incorrect shipping or data entries. In this lesson, you will learn how to use Noca AI’s prompt builder to automatically generate a data capture form embedded with a real-time address autocomplete finder lookup API.

Step 1: Access the Prompt Box

To begin creating the form layout using AI, head into your workspace.

  1. Open your Noca Web project workspace.

  2. Locate the prompt text entry field at the bottom of your editing canvas.

Step 2: Prompt the Complete Form Layout

By defining your fields and your smart feature in a single natural language description, Noca will configure the underlying fields and integrations all at once.

  1. Click inside the prompt builder box.

  2. Type a clear instruction requesting your required contact inputs along with the smart address element.

  3. Example used in the video: > "Create a lead capture form with first name, last name, email, phone number, and full address. Make the address auto-complete."

  4. Click the submit arrow and allow Noca AI a moment to orchestrate the grid columns and connect the backend lookup APIs.

Step 3: Inspect the Generated Design

Once the build phase wraps up, inspect the UI to make sure everything looks aligned.

  1. Review your newly created card module (titled “Tell us about you” by default).

  2. Check that the responsive grid setup features fields for First Name, Last Name, Email, Phone Number, and your smart Full Address field stacked cleanly at the base of the layout.

Step 4: Test the Live Autocomplete Finder

Noca AI natively attaches an address lookup API underneath the input box so you can preview the active validation experience right away.

  1. Click into the Full Address input field within the preview window.

  2. Type a real-world location string (e.g., "1600 Amphitheatre Parkway").

  3. Observe the drop-down menu that appears below the field showing real-time geographical matches.

  4. Select one of the drop-down options to watch the input instantly autocomplete the full location parameters.

💡 Pro-Tip: If your backend database or CRM (like Salesforce) requires addresses broken into separate components (Street, City, State, Postal Code), you don’t need to reconfigure it yourself! Simply click into the prompt bar again and type: “Map this autocomplete field into separate hidden outputs for city, state, and zip code,” and Noca AI will rewire the payload parsing instantly.

Previous
Next