Subscription Form Builder

Summary

Zencity’s Subscription Form Builder lets you create resident signup forms with a built-in double opt-in workflow (form → confirmation email → confirmation page). When a resident confirms, their email and any captured fields are added to your selected contact list. You design the form, confirmation email, and confirmation page in one place; Zencity generates the embed code and handles the workflow.

If your website runs on WordPress, you can embed the form code directly into posts, pages, or widgets using a Custom HTML block.

How does it work?

1. Resident submits the signup form on your site.

2. Zencity sends a confirmation email with a unique link.

3. Resident clicks the link and lands on your confirmation page.

4. Zencity adds the resident to your chosen contact list with any fields you collected.

Create a Form

1. Go to Contacts → Form Builder.

2. Select Create new form.

3. Complete each section of the form setup. When all sections are complete, you can publish.

Form setup sections:

• Title: Internal name for your form (visible only to your team).

• Form design: Build and preview the form UI.

• Email details: Sender name, sender email, and subject for the confirmation email.

• Email design: Customize the double opt-in email (the button links to your confirmation page).

• Confirmation page: Use Zencity’s hosted confirmation page or set an external URL on your site.

• Contact list: Choose where signups will be stored.

Select Design form to choose a template and begin.

Embedded or pop-up form

You can build:

• Embedded forms: Visible on the page at all times (e.g., footer, sidebar, post-end). Non-intrusive and ideal for ongoing collection.

• Pop-up forms: Appear based on triggers (time on page, button click, scroll depth, or exit intent implemented on your site). Highly visible and conversion-oriented.

If you choose a pop-up form, a Trigger settings area appears so you can customize the button or behavior (text, appearance, and triggers).

Form Layout tools

Use layout controls to define 1–4 columns and their ratios. You can change the layout later as you refine your design.

Content Tools

Drag content blocks into your layout. Click any block to edit its settings.

• Text - Format headings and paragraphs, adjust alignment, background, margins, and typography.

• Image - Upload or link an image. Configure alignment, margins, borders/shapes, mobile scaling, background, and ALT text. Use the image editor to crop, resize, rotate, or flip.

• Divider - Insert a horizontal divider. Control background, margins, line style, weight, and spacing.

• Button - Customize corner radius, borders, alignment, padding, link target, font, and margins. You can personalize text using contact properties.

• Spacer - Insert blank space to separate elements. Control height and optional background color.

• Social Sharing - Add social icons (e.g., Facebook, X/Twitter, LinkedIn, Instagram, YouTube). Configure labels, links (share your newsletter’s online version or link to profiles), icon size/shape/colors, and section background.

• HTML Block - Insert custom HTML. Opens an editor where you can paste or write code.

• Video - Add a video URL (YouTube, Vimeo, Dailymotion generate previews automatically; otherwise upload a thumbnail). Choose a play button style and provide ALT text.

  Form Fields (Forms)

  Collect additional data as contact properties. Drag a field block into the form and configure it.

• Text - Single-line string, up to 255 characters. Options: alignment, padding, borders, background, contact property, required, placeholder, max length.

• Textarea - Multi-line string, up to 500 characters. Options mirror Text.

• Number - Integer or decimal with optional min/max and step. Options: alignment, padding, borders, background, contact property, required, placeholder, ranges.

• Radio buttons - Single choice from predefined options. Options: margins, typography, background and border colors, spacing, contact property, required, option labels.

• Web URL. - Stores a properly formatted URL. Options: borders, padding, background, required, placeholder, max length. Validates URL format.

• Date - Captures a date (e.g., birthday). Options: borders, padding, background, contact property, required, date format preferences.

• Dropdown - Single choice from a menu of options. Options: borders, padding, typography, arrow icon colors, background, contact property, required, option labels.

• Sections

  • Duplicate a section: Select the section and choose Duplicate.

  • Delete a section: Select the section, choose Delete, and confirm. You can also drag a section back to the content tools area to remove it.

• Global Style Settings

  • Set default styles for headers, paragraphs, and links in one place:

  • Open Settings (gear icon).

  • Use Global Style to define font families and colors.

  • Optionally override styles on individual blocks with the section toolbar.

• Logo options - If a “Powered by” logo appears in the footer, you can control its presence or color scheme in Settings → Logo Options. Availability of removal depends on your plan.

Success and Error messages

Customize the on-submit messages shown after form submission (success and error). These messages do not replace the double opt-in; residents must still confirm via email.

Consent types and text

Choose the consent model and customize the language:

• Explicit consent (recommended): Resident must actively agree (e.g., checkbox).

• Implicit consent: Submission implies agreement.

Save a template

Save your current form design as a reusable template:

• While designing, open the menu and select Save as Template.

• To use a template, click Design a form and pick from your saved templates.

Edit, duplicate, or delete a template

Open Template Management, click the gear icon, then choose Edit, Duplicate, or Delete. Deletions are permanent.

Integrate your form into your website

• From the form’s management page, copy the generated HTML/JS code.

• Paste into your site where you want the form to appear.

• If you’re using your own confirmation page, ensure the URL is correct in the form settings.

Integrate your form with WordPress

Add to a page or post

1. Pages → Add New (or edit an existing page).

2. Insert a Custom HTML block.

3. Paste the Zencity Subscription Form code.

4. Publish or Update.

Add via Widgets

1. Appearance → Widgets.

2. Add a Custom HTML widget in your desired area.

3. Paste the form code and save.

Preview Form

In Form design, select Preview to see how the form looks on desktop and mobile.

View Form Code

From the form list, open the gear menu for your form and select View Code to copy or review the embed snippet.

Edit a Form

From the form list, gear menu → Edit. After any change, re-embed or update the HTML on your website so the new version is live.

Archive, delete, or restore a form

• Archive a single form: gear menu → Archive.

• Archive multiple: select checkboxes → Archive.

• Delete an archived form: go to Archived, gear menu → Delete (permanent).

• Restore an archived form: Archived, gear menu → Restore.

Troubleshooting

• If a form stops working on your site, confirm the contact list linked to the form still exists and hasn’t been changed or deleted.

• After editing a form, re-publish or replace the embedded code on your site so changes take effect.

• For pop-ups, ensure any trigger scripts (e.g., exit intent) are installed correctly on your site.