Collect sign-ups

A signup form turns visitors into contacts you can email: a waitlist, a newsletter or early access. Arc CMS verifies each email, confirms the sign-up on the page, sends a welcome email, and files every sign-up in your audience. The full references are Signup forms and Audience.

1. Connect an email provider

Forms send a verification code and a welcome email, so do this first. Open Settings, then Email Settings, choose a provider (Gmail, SMTP or Resend), fill in the Sender Information, and use Send a Test Email. Until email works, the Signup Forms screen shows an "Email not configured" warning. For the emails you build in the Composer and broadcasts, set your logo, colors and footer in Brand Kit, under Email + SMS in the admin menu (Email when SMS is off) (see Email engine).

2. Set up the form

The first-run wizard already created a form named Waitlist, with the slug waitlist-form. Use it, or add one per campaign:

Open Signup Forms in the admin menu. The page it opens is titled Waitlists: press Add Waitlist (or Edit on an existing form).
Fill in the Name; the Slug is filled in from it, such as product-launch. The slug you create the form with becomes its id for good: in URLs and in your page's markup. Editing the slug later does not change the id, and a form on your site that uses the new slug fails. Choose it once and keep it.
Under Feeds lists, tick any lists everyone who signs up should also join (the form always has its own list). Once the form has tags of its own (its Tags item in the menu), Edit also offers a Default Tag for every new sign-up.
Leave it Active. When you close it, the message you set is shown over the form. Press Create.

3. Put the form on a page

Add the form to your home page, src/custom/site/home.html (see Build your home page), or to any other page of your site: a template or a static page. Any form with data-waitlist-form and an email field works, styled however you like:

<form data-waitlist-form data-waitlist-id="product-launch">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" required placeholder="Your email">
  <input type="text" name="company" placeholder="Company">
  <button type="submit">Join the waitlist</button>
</form>
<p><span data-waitlist-count="product-launch"></span> people have joined</p>

Markup	What it does
`data-waitlist-form`	Arc CMS handles this form.
`data-waitlist-id="…"`	The form's id: the slug you created it with. Optional: without it, the default form `waitlist-form` is used. On an older install whose default form has another id, that form is used instead. An id that matches no form creates a new, empty form on the first visit, so check the spelling.
`name="email"` or `data-waitlist-email`	The email address. Required: without it the form shows "Email is required".
`name="firstName"`, `name="name"` or `data-waitlist-name`	The person's name. Optional: without it, the name is taken from the start of the email address.
`name="source"` or `data-waitlist-source`	Where the person came from. Optional: `direct` when missing. A hidden input works well here.
Any other field with a `name`	Sent with the sign-up as a form answer, such as `company` above.
`data-waitlist-count="…"`	Shows the number of sign-ups on that form. Left empty, it counts the form in the same `<section>`, else the first form on the page.
`data-legal-notice`	Your own terms notice, on any element inside the form (below).

Arc CMS takes over the submit: it asks for the emailed code, then shows a tick, "You're on the list!" and "We'll be in touch at" the person's address. Someone already on the list sees "Welcome back" and "You're already on the list." instead. While email is not set up (step 1), there is no code step: the person is signed up at once.

Word the confirmation your way

Three places can change the panels' text. The first one that has a text wins:

The form's own attributes, for this form only:

<form data-waitlist-form data-waitlist-id="webinar"
      data-waitlist-success-title="See you there, {name}!"
      data-waitlist-success-text="The joining link is on its way to {email}."
      data-waitlist-existing-title="You're already registered"
      data-waitlist-existing-text="Check {email} for the joining link.">

Your strings file, for every form on the site in that language: the signup_* keys of src/custom/site/strings/en.json (named after your default language), or of a translation's file. For example "signup_on_list": "Thanks, you're in!" and "signup_success_text": "Watch {{ email }} for news.". See Publish in more than one language.
Arc CMS's English, when neither has the text.

Text	Attribute	Strings key
Title after signing up	`data-waitlist-success-title`	`signup_on_list`
Line after signing up	`data-waitlist-success-text`	`signup_success_text`
Title for someone already on the list	`data-waitlist-existing-title`	`signup_welcome_back_name` (with a name), `signup_welcome_back`
Line for someone already on the list	`data-waitlist-existing-text`	`signup_already`

Where the person's name and address go, write {name} and {email} in an attribute, and {{ name }} and {{ email }} in a strings file, as its other keys do. Single braces in attributes, because a content template empties every {{ … }} its item does not fill when it is published. The code step, the loading text and the errors use the other signup_* keys in public/_site/strings/hi.json; an error message from the server always shows in English.

To style the panels, use their classes: .waitlist-verify-step (the code step), .waitlist-success-step and .waitlist-existing-step (the two confirmations), and inside those .waitlist-success-icon, .waitlist-success-title and .waitlist-success-text.

The terms notice

Arc CMS adds a terms notice above the form's button: "By signing up, you agree to our Terms of Service and Privacy Policy, and to receive emails from us." The two names link to your terms and privacy pages once you publish them: the standard pages /info/terms and /info/privacy-policy, or your own hand-written pages (see Write static pages). Until then the names show as plain text. On a translated page it uses the legal_notice, legal_terms and legal_privacy keys of that language's strings file (see Publish in more than one language).

To write your own, put an element with data-legal-notice inside the form. Arc CMS then adds nothing:

<p data-legal-notice>By joining you accept our <a href="/info/terms">terms</a>.</p>

The full markup reference is in Signup forms.

Alternative: link to the ready-made form page at /waitlist/{form-slug}, for example from a button in an article or an email.

A data-waitlist-form form works on every page built from your site files: the home page, your templates and your hand-written static pages, in every language. An item's body cannot hold one, because the editor keeps text, not forms: put the form in the type's template, or link to /waitlist/{form-slug}. A page published before you added the form needs publishing again.

4. Edit the emails

Each form has its own group in the admin menu, under its name. Open Email Templates there and edit the OTP Verification email (the code) and the Welcome Email. Insert Placeholder adds merge tags such as ##NAME##, ##OTP## or ##WAITLIST## (see Email merge tags). These two emails are edited as they are and do not use the Brand Kit: put your logo and postal address in them yourself, and keep the unsubscribe link in the welcome email.

To keep writing to the people who signed up, use broadcasts and drip campaigns (see Email marketing).

5. Find the people who signed up

Where	What you see
The form's group, Dashboard	Total and weekly sign-ups, verification rate, sources, devices and recent sign-ups
The form's group, Users	Everyone who signed up to that form, with their status and tags
The form's group, Audience & emails	The form's own list: its members and the emails sent to it
Audience, Contacts	Every person across all forms and accounts, one record each, with tags and consent
Audience, Lists	Each form's own list, plus the lists you create

Switch off what your website does not use: Choose your website's features.