Example: Contact Form
This example builds a contact form with validation, required fields, and email submission.
What We’re Building
A contact form that:
- Collects name, email, phone, and message
- Validates email format
- Requires name, email, and message
- Submits data via email
- Shows a thank-you message after submission
Step 1: Create the Excel Spreadsheet
Sheet1 (Form)
| A | B | |
|---|---|---|
| 1 | Contact Us | |
| 2 | ||
| 3 | Name | |
| 4 | ||
| 5 | Phone | |
| 6 | Subject | General Inquiry |
| 7 | Message | |
| 8 | ||
| 9 | [Submit] |
Sheet2 (Thank You)
| A | |
|---|---|
| 1 | Thank You! |
| 2 | |
| 3 | We’ve received your message and will respond within 24 hours. |
| 4 | |
| 5 | [Submit Another Message] |
Formatting
- Row 1: Bold, larger font
- B3:B7: Light background color to indicate input fields
- B9, A5 (Sheet2): Button styling (centered, colored background)
Step 2: Configure NExS.app
| A | B | C | D | E | |
|---|---|---|---|---|---|
| 1 | app | Contact Form | |||
| 2 | mode | open | |||
| 3 | submitList | contact@yourcompany.com | |||
| 4 | noViewNav | true | |||
| 5 | view | Sheet1!A1:B9 | |||
| 6 | name | Form | |||
| 7 | backgroundColor | #ffffff | |||
| 8 | input | B3 | required | # Name | |
| 9 | input | B4 | required, email | ||
| 10 | input | B5 | phone | # Phone (optional) | |
| 11 | input | B6 | # Subject | ||
| 12 | input | B7 | required | # Message | |
| 13 | button | B9 | |||
| 14 | view | Sheet2!A1:A5 | |||
| 15 | name | Thank You | |||
| 16 | button | A5 |
Step 3: Configure Button Actions
Submit Button (Sheet1, B9)
Cell content: Submit {disabled: %REQUIRED, sendData: 'B3:B7', setInputs: ['B3:B7', ''], setView: 'Thank You'}
This button:
- Is disabled until all required fields are filled (
%REQUIRED) - Sends form data to the submitList email
- Clears all form fields
- Navigates to the Thank You view
Submit Another Button (Sheet2, A5)
Cell content: Submit Another Message {setView: 'Form'}
Returns to the form view for a new submission.
Step 4: Upload and Test
- Save as
.xlsx - Upload to NExS platform
- Test the form:
- Leave required fields empty (Submit should be disabled)
- Enter invalid email (should show error)
- Fill all required fields (Submit becomes active)
- Click Submit (form clears, shows thank-you)
Step 5: Embed on Your Website
Basic Iframe
<iframe
src="https://platform.nexs.com/app/YOUR-APP-ID"
width="400"
height="400"
style="border:0;">
</iframe>
Adding a Subject Dropdown in Excel
To create a dropdown in the NExS app itself:
-
In Excel, use Data Validation on cell B6:
- Allow: List
- Source: General Inquiry, Support Request, Sales Question, Partnership
-
NExS will render this as a dropdown in the app
Complete NExS.app Worksheet
| A | B | C | D | E | |
|---|---|---|---|---|---|
| 1 | app | Contact Form | |||
| 2 | mode | open | |||
| 3 | submitList | contact@yourcompany.com | |||
| 4 | noViewNav | true | |||
| 5 | view | Sheet1!A1:B9 | |||
| 6 | name | Form | |||
| 7 | backgroundColor | #ffffff | |||
| 8 | input | B3 | required | ||
| 9 | input | B4 | required, email | ||
| 10 | input | B5 | phone | ||
| 11 | input | B6 | |||
| 12 | input | B7 | required | ||
| 13 | button | B9 | |||
| 14 | view | Sheet2!A1:A5 | |||
| 15 | name | Thank You | |||
| 16 | button | A5 |
What You Learned
- Using required field validation
- Email and phone format validation
- The
sendDataaction to email form data - Chaining multiple button actions
- The
%REQUIREDmacro for conditional button state - Multi-view forms with view navigation
Next Steps
- Sales Dashboard Example — Build a dashboard with charts
- UI Components Guide — More button actions
- Deployment Modes — Secure your forms
