Course Content
Apps – Intermediate
0/5
Editing a web app – AI App Builder
00:00
Using discussion mode – AI App Builder
00:00
Revert Changes – AI App Builder
00:00
Previewing your app – AI App Builder
00:00
Edit & Update AI App Layouts with Prompts – AI App Builder
00:00
Apps – Intermediate

Course Exercise: Modifying App Layouts and Form Fields

Once you have built an initial page, you can easily modify its layout, add new input fields, and generate secondary pages (like success states) using simple conversational edits.

Follow this guide to update your Contact Us page with new layout changes, a priority field, and a dedicated success redirect.

Step 1: Open Your Existing App

  1. Go to your Noca AI Dashboard.

  2. Navigate to Apps and open the Contact Us app you created in the previous lesson.

  3. Ensure you are on the Preview tab so you can watch your layout update in real time.

Step 2: Submit Your Layout and Feature Edits

Instead of recreating the form from scratch, use the AI chat box on the left to submit a list of modifications.

In the prompt box at the bottom left, type or copy the following multi-step request:

“1. Extend the image all the way to the right. 2. Add a Priority field. 3. Add a success page.”

Click the Send button (the purple arrow) to apply the changes.

Step 3: Verify the Layout & Field Updates

Once the generator finishes building, review the immediate changes on the Preview screen:

  • Visuals: The floral image should now seamlessly expand to fill the entire right half of the screen.

  • New Fields: A new Priority dropdown field should now be present on the form just above the message box. Test the dropdown to see the default priority options.

Step 4: Review the New Success Page

Because you asked for a success page, Noca AI automatically generated a second view to handle form submission redirects.

  1. Above the active preview area, locate the Pages navigation menu.

  2. Click the dropdown (which currently says ContactPage) and select SuccessPage.

  3. Review the newly generated success screen, complete with a confirmation checkmark and a thank you message.

Step 5: Test the Interactive Flow

Let’s test how these two pages interact:

  1. Switch back to the ContactPage view in your preview editor (or click More > Preview Site to open it in a full tab).

  2. Fill out the contact form fields: enter a name, email, phone number, and message.

  3. Select an option from the newly added Priority dropdown.

  4. Click Send Message.

The interface will instantly trigger a redirect, taking you straight to the custom success page.

Note: While your form now successfully redirects users upon clicking send, the backend logic to store these submissions will be configured in the upcoming automation lessons!

Previous
Next