Course Content
Apps – Basic
0/4
Styles – AI App Builder
00:00
Building your first web app – AI App Builder
00:00
Writing a good prompt – AI App Builder
00:00
Course Exercise: Build a Custom Contact Us Page – AI App Builder
00:00
Apps – Basic

Step-by-Step Guide: Building Your First Contact Us Page

In this hands-on exercise, you will practice using Noca AI’s prompt-to-app generator to build a responsive, styled Contact Us page.

Follow these steps to generate your first custom web page from a simple prompt.

Step 1: Open the App Builder

  1. Log in to your Noca AI Dashboard.

  2. From the left-hand sidebar menu, click on Apps.

  3. Click the New button in the top right corner to open the AI generation prompt window.

Step 2: Write Your App Prompt

In the central text input field, write out exactly what fields and structure your contact form needs.

Copy and paste or type the following prompt:

“Create a simple contact us page. Collect contact details such as first name, last name, email, phone number, subject, and message.”

Step 3: Attach Your Visual Style

Before running the build, ensure your form matches your company’s brand guidelines.

  1. Click the Style icon (the palette icon) at the bottom left of the prompt box.

  2. Select your preferred style (for example, your custom-generated brand style).

  3. Click Apply Style to lock in your color palette, typography, and layout rules.

Step 4: Build the App

  1. With your prompt written and style attached, click the Send button (the purple arrow icon) on the right.

  2. Watch the code editor on the right generate your React components and theme files.

  3. Wait a few moments for Noca AI to finalize the visual layout of your page.

Step 5: Preview and Test the Form

  1. Once the build is complete, the Preview tab in the main center panel will display your fully structured Contact Us page.

  2. To test the page in a clean browser window, click More in the top right corner and select Preview Site.

  3. Try typing sample information into the fields (First Name, Last Name, Email, Phone Number, Subject, and Message) to see how the responsive form fields adapt and display your inputs.

Note: In this stage of the academy, the frontend layout is fully functional, but it is not yet connected to a database or automated email flow. In the next course, you will learn how to integrate this exact page with background workflows to process submitted messages!

Previous
Next