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	Email
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]

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		submitList	contact@yourcompany.com
3		noViewNav	true
4	view	Sheet1!A1:B9
5		name	Form
6		backgroundColor	white
7		input	B3	required	# Name
8		input	B4	required, email	# Email
9		input	B5	phone	# Phone (optional)
10		input	B6		# Subject
11		input	B7	required	# Message
12		button	B9
13	view	Sheet2!A1:A5
14		name	Thank You
15		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>

Custom Styled Form

<!DOCTYPE html>
<html>
<head>
  <title>Contact Us</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 40px 20px;
    }
    .container {
      max-width: 500px;
      margin: 0 auto;
    }
    h1 {
      color: #333;
      margin-bottom: 10px;
    }
    .subtitle {
      color: #666;
      margin-bottom: 30px;
    }
    .form-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .field {
      margin-bottom: 20px;
    }
    .field label {
      display: block;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }
    .field label .required {
      color: #e53935;
    }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 12px 15px;
      font-size: 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      transition: border-color 0.2s;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: #2196f3;
      outline: none;
    }
    .field textarea {
      min-height: 120px;
      resize: vertical;
    }
    .submit-btn {
      width: 100%;
      padding: 15px;
      font-size: 18px;
      font-weight: 600;
      color: white;
      background: #2196f3;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .submit-btn:hover {
      background: #1976d2;
    }
    .submit-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .thank-you {
      text-align: center;
      padding: 40px 20px;
    }
    .thank-you h2 {
      color: #4caf50;
      font-size: 28px;
    }
    .thank-you p {
      color: #666;
      font-size: 18px;
      margin: 20px 0 30px;
    }
    .another-btn {
      padding: 12px 30px;
      font-size: 16px;
      color: #2196f3;
      background: white;
      border: 2px solid #2196f3;
      border-radius: 8px;
      cursor: pointer;
    }
    .another-btn:hover {
      background: #e3f2fd;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>Contact Us</h1>
  <p class="subtitle">We'd love to hear from you. Send us a message!</p>

  <div class="form-card" id="form-view">
    <div class="field">
      <label>Name <span class="required">*</span></label>
      <input type="text"
             class="nexs__input"
             data-nexs-cell-addr="B3"
             placeholder="Your full name"
             id="name-input">
    </div>

    <div class="field">
      <label>Email <span class="required">*</span></label>
      <input type="email"
             class="nexs__input"
             data-nexs-cell-addr="B4"
             placeholder="you@example.com"
             id="email-input">
    </div>

    <div class="field">
      <label>Phone</label>
      <input type="tel"
             class="nexs__input"
             data-nexs-cell-addr="B5"
             placeholder="(555) 123-4567">
    </div>

    <div class="field">
      <label>Subject</label>
      <select class="nexs__input" data-nexs-cell-addr="B6">
        <option>General Inquiry</option>
        <option>Support Request</option>
        <option>Sales Question</option>
        <option>Partnership</option>
      </select>
    </div>

    <div class="field">
      <label>Message <span class="required">*</span></label>
      <textarea class="nexs__input"
                data-nexs-cell-addr="B7"
                placeholder="How can we help you?"
                id="message-input"></textarea>
    </div>

    <button class="submit-btn" id="submit-btn" onclick="submitForm()">
      Send Message
    </button>
  </div>

  <div class="form-card thank-you hidden" id="thank-view">
    <h2>Thank You!</h2>
    <p>We've received your message and will respond within 24 hours.</p>
    <button class="another-btn" onclick="resetForm()">
      Send Another Message
    </button>
  </div>
</div>

<!-- Hidden NExS app (required for Declarative/JavaScript API) -->
<div style="display:none;">
  <script class="nexs"
    src="https://static.nexs.com/js/nexs_embed.js"
    data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
  </script>
</div>

<script>
  let nexsReady = false;

  document.addEventListener("nexsappinit", function() {
    nexsReady = true;
    updateSubmitButton();
  });

  // Track required fields
  document.addEventListener("nexsappupdated", function() {
    if (!nexsReady) return;
    updateSubmitButton();
  });

  function updateSubmitButton() {
    const name = NEXS.cell("B3").data;
    const email = NEXS.cell("B4").data;
    const message = NEXS.cell("B7").data;

    const isValid = name && email && message && isValidEmail(email);
    document.getElementById("submit-btn").disabled = !isValid;
  }

  function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  function submitForm() {
    if (!nexsReady) return;

    // This example only switches views. It does not trigger the in-spreadsheet
    // button action (e.g. `sendData`) from JavaScript.
    NEXS.setView("Thank You");

    // Show thank you view
    document.getElementById("form-view").classList.add("hidden");
    document.getElementById("thank-view").classList.remove("hidden");
  }

  function resetForm() {
    if (!nexsReady) return;

    // Clear inputs and show form
    NEXS.setInputs(["B3", "", "B4", "", "B5", "", "B6", "General Inquiry", "B7", ""]);
    NEXS.setView("Form");

    document.getElementById("thank-view").classList.add("hidden");
    document.getElementById("form-view").classList.remove("hidden");
  }
</script>

</body>
</html>

To create a dropdown in the NExS app itself (not just custom HTML):

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
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 sendData action to email form data
Chaining multiple button actions
The %REQUIRED macro 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