Customer onboarding form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="company">Company name</label>
  <input type="text" name="company" id="company" required />
  <label for="contact_name">Main contact</label>
  <input type="text" name="contact_name" id="contact_name" required />
  <label for="email">Contact email</label>
  <input type="email" name="email" id="email" required />
  <label for="phone">Contact phone</label>
  <input type="tel" name="phone" id="phone" />
  <label for="billing_email">Billing email</label>
  <small id="billing_email-help">Where invoices should go, if different from the contact email.</small>
  <input type="email" name="billing_email" id="billing_email" aria-describedby="billing_email-help" />
  <label for="vat_number">VAT number</label>
  <input type="text" name="vat_number" id="vat_number" />
  <label for="website">Website</label>
  <input type="text" name="website" id="website" placeholder="https://" />
  <label for="goals">What should the first three months achieve?</label>
  <textarea name="goals" id="goals" required></textarea>
  <label for="start_date">Preferred start date</label>
  <input type="date" name="start_date" id="start_date" />
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function CustomerOnboardingForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="company">Company name</label>
      <input type="text" name="company" id="company" required />
      <label htmlFor="contact_name">Main contact</label>
      <input type="text" name="contact_name" id="contact_name" required />
      <label htmlFor="email">Contact email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="phone">Contact phone</label>
      <input type="tel" name="phone" id="phone" />
      <label htmlFor="billing_email">Billing email</label>
      <small id="billing_email-help">Where invoices should go, if different from the contact email.</small>
      <input type="email" name="billing_email" id="billing_email" aria-describedby="billing_email-help" />
      <label htmlFor="vat_number">VAT number</label>
      <input type="text" name="vat_number" id="vat_number" />
      <label htmlFor="website">Website</label>
      <input type="text" name="website" id="website" placeholder="https://" />
      <label htmlFor="goals">What should the first three months achieve?</label>
      <textarea name="goals" id="goals" required />
      <label htmlFor="start_date">Preferred start date</label>
      <input type="date" name="start_date" id="start_date" />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

Can clients send logos and brand files with the form?

Yes, with a file field and Professional or above. For large brand packs, a link to a shared folder is usually easier for both sides.

Should I ask for system access in the onboarding form?

No. Ask who will grant access, and handle the credentials through a password manager or the client's own invitation flow. Form submissions are stored and emailed, which is not where secrets belong.

Related

• Formward for agencies

  A workspace per client, one bill.

• Vendor application template

  Onboarding suppliers instead of clients.

• Form submission API

  Webhooks and REST to push answers into your tools.

• Registration templates

  More forms for signing people up.