Signup Forms

Choosing an approach

Approach	When to use it	Complexity
Subscribe to List field	Quickest option — drop an email-only signup on any existing CampaignCanvas form	Lowest
Inline signup view component	Drop-in signup widget for pages or partials — no form builder needed	Low
Add to Mailing List workflow	Richest option — compose a multi-field form in the form builder, attach the workflow, and capture first/last name, custom fields, explicit consent	Medium
Mailing list checkboxes	Let visitors pick several lists from one form (multi-list opt-in)	Low

Subscribe to List field

A dedicated form field that binds to a specific mailing list. Add it to any form to collect email-only signups.

Setup

1. Open the form builder for the form you want the signup on.
2. Drag the Subscribe to List field onto the form canvas.
3. In the field inspector, pick the target mailing list, set a consent policy version, and optionally add source tags.
4. Save the form.

When the form is submitted, the email value is upserted as a subscriber and added to the chosen list. See the Subscribe to List field reference for full configuration details.

When to use it

• You want a quick signup without designing a dedicated form
• You’re using a single-field signup (email only)
• You want to embed a newsletter signup inside a larger multi-purpose form (e.g. “tick to subscribe to updates”)

Inline signup view component

The inline signup is a drop-in widget you invoke from any Razor template or partial. It renders a complete signup form with honeypot, CAPTCHA, and an AJAX-friendly response — no form builder configuration required.

Basic usage

@await Component.InvokeAsync("NewsletterSignup", new { listId = Guid.Parse("11111111-...") })

Or by alias:

@await Component.InvokeAsync("NewsletterSignup", new { listAlias = "weekly-digest" })

Parameters

Parameter	Purpose
listId	GUID of the target mailing list
listAlias	Alternative to listId — target by alias
heading	Heading text shown above the form (optional)
description	Short description / pitch (optional)
submitLabel	Submit button text (default: “Subscribe”)
returnUrl	URL to redirect to after a successful non-AJAX submission
captchaSiteKey	Cloudflare Turnstile or reCAPTCHA site key (optional)
source	Optional source label recorded on the consent entry (e.g. footer, blog-cta)
showNameFields	When true, renders first and last name inputs in addition to the email field

AJAX behaviour

If the request carries Accept: application/json or X-Requested-With: XMLHttpRequest, the endpoint responds with JSON:

{
  "success": true,
  "message": "Check your inbox to confirm your subscription."
}

Otherwise, the response is an HTML success fragment (or a redirect to returnUrl if configured).

Anti-abuse

• Honeypot— hidden field that bots fill in; non-empty honeypot silently drops the submission with a success-looking response (so the bot moves on).
• CAPTCHA— optional Turnstile or reCAPTCHA v3 check. Configure site keys globally in appsettings.json and pass the site key through the component parameters.
• Rate limit — the FormSubmission policy applies to the signup endpoint too, capping signup attempts per IP.

Add to Mailing List workflow

Attach the Add to Mailing Listworkflow to any CampaignCanvas form. On submission, the workflow upserts a subscriber and attaches them to a chosen list — optionally capturing first name, last name, and custom field values from form fields.

When to use it

• You want full control over the form fields and styling
• You’re capturing additional profile data (first name, last name, company, country)
• You need an explicit consent checkbox tied to the signup (e.g. GDPR opt-in language)
• You want to apply tags based on which form the signup came from

See the Workflow reference for the full configuration.

Example: compliant opt-in flow

1. Build a form with Email, First Name, and a Consent field
2. Add the Add to Mailing List workflow targeting a list with Double Opt-In Required enabled
3. Add a condition to the workflow: consent equals true— so the subscription only happens if the box is ticked

Now a signup requires both a ticked consent box and a confirmation clickon the DOI email — the belt-and-braces pattern regulators love.

Mailing List picker property editor

Content editors working in Umbraco can pick a mailing list from a dropdown when editing a page. CampaignCanvas ships a MailingListPicker property editor that wires up on any document type.

Setup

1. In Umbraco, open Settings → Data Types and create a new data type using the Mailing List Picker editor.
2. Add it as a property to a document type (e.g. a “Newsletter Signup” page type).
3. In your Razor template, read the property and invoke the inline signup view component with the picked list:

@{
    var list = Model.Value<MailingList>("mailingList");
}

@if (list != null)
{
    @await Component.InvokeAsync("NewsletterSignup", new { listId = list.Id })
}

This gives editors the power to pick a different list per page without touching the template.

Confirmation & landing pages

CampaignCanvas ships default landing pages for:

• Confirmation landing— where visitors arrive after clicking the double-opt-in link; confirms the subscription and optionally shows the welcome content
• Unsubscribe landing— shows a confirmation that the unsubscribe succeeded and optionally captures a reason

Customising the landing pages

Both landing pages are rendered by ViewComponents with default Razor templates. To customise:

1. Copy the default template from the package into your site’s Views/Shared/Components/ folder
2. Edit to match your branding — the ViewComponent hook in the copied location takes precedence over the package default

Multi-list opt-in & preference centre

Two field types extend signup beyond a single list:

• Mailing list checkboxes — renders one checkbox per list so a visitor can join several at once. Pair it with the Add to Mailing List workflow’s “pick lists from a form field” option.
• Mailing list preferences — a self-service preference centre. It pre-ticks the subscriber’s current lists (read from the signed {{newsletter.preferencesUrl}} link in campaign footers) and, with the Update Mailing List Preferences workflow, writes their changes back.

Public endpoints

The signup and confirmation endpoints are public surface controllers. They’re the targets of the inline signup component and the confirmation / unsubscribe emails. You can also call them directly from your own front-end if you want to ship a fully-custom signup UI.

Endpoint	Purpose
POST /umbraco/surface/newsletter/subscribe	Create a signup. Accepts form-urlencoded, JSON, or multipart. Same anti-abuse pipeline as the inline component.
GET /umbraco/surface/newsletter/confirm/{token}	Double-opt-in confirmation. Called when a subscriber clicks the confirmation link.
POST /umbraco/surface/newsletter/unsubscribe/{token}	One-click and interactive unsubscribe handler.

Stick with the built-in UI if you can

The inline signup view component, default confirmation page, and default unsubscribe page are already wired up for honeypot, CAPTCHA, rate limiting, and GDPR-compliant messaging. Rolling your own saves you a skin but costs you compliance and anti-abuse guarantees — only do it when you really need the customisation.