Welcome to the Contactlist, let's grow together!

ContactList
ContactListNumletive

Forms Documentation

Complete guide to creating, managing, and using forms in ContactList.

Overview

Forms in ContactList allow you to collect data from users through a customizable interface. You can create forms with drag-and-drop, add various field types, set up conditional logic, and automatically sync submissions to email lists.

Key Features

  • Visual Form Builder: Drag-and-drop interface for easy form creation
  • 15+ Field Types: Text, email, number, file upload, and more
  • Conditional Logic: Show/hide fields based on user responses
  • Multi-Step Forms: Break long forms into manageable steps
  • File Uploads: Accept file attachments with validation
  • Real-Time Submissions: View submissions as they come in
  • Email Notifications: Get notified when forms are submitted
  • Form Embedding: Embed forms anywhere on your website
  • Auto-Sync to Lists: Automatically add submissions to email lists

Creating Forms

Step 1: Access the Form Builder

  • Navigate to Forms in the sidebar
  • Click the "Create Form" button (top right)
  • You'll be taken to the form builder

Step 2: Set Basic Information

  • Form Title: Enter a descriptive name (e.g., "Contact Form", "Newsletter Signup")
  • Description: Optional description for internal reference
  • Notification Email: Email address where you'll receive submission notifications
    • Defaults to your account email
    • You can disable email notifications if desired

Step 3: Add Fields

The form builder has three main areas:

  • Left Sidebar: Field library - drag fields from here
  • Center Canvas: Your form preview - drop fields here
  • Right Panel: Field properties - configure selected fields

To add a field:

  • Find the field type in the left sidebar
  • Drag it onto the canvas
  • Or click the field type to add it at the bottom

To configure a field:

  • Click the field on the canvas to select it
  • Use the right panel to configure:
    • Label
    • Placeholder text
    • Required status
    • Validation rules
    • Options (for select/radio fields)

To reorder fields:

  • Drag fields up or down on the canvas
  • Or use arrow buttons in the properties panel

Step 4: Save Your Form

  • Click "Save" button (top right)
  • Choose form status:
    • Draft: Not visible to users, still editing
    • Active: Live and accepting submissions
    • Archived: Hidden from main list, data preserved

Field Types

Text Fields

Text

  • Use Case: Single-line text input
  • Examples: Name, Company, Address
  • Properties: Label, placeholder, required, min/max length, pattern validation

Email

  • Use Case: Email address input
  • Examples: Email, Contact Email
  • Properties: Automatic email validation, required
  • Auto-Sync: Can automatically sync to email lists

Number

  • Use Case: Numeric input
  • Examples: Age, Quantity, Price
  • Properties: Min/max value, decimal places

Phone

  • Use Case: Phone number input
  • Examples: Phone, Mobile, Work Phone
  • Properties: Format validation, required

URL

  • Use Case: Website URL input
  • Examples: Website, Portfolio URL
  • Properties: URL format validation

Multi-Line Fields

Textarea

  • Use Case: Multi-line text input
  • Examples: Message, Comments, Description
  • Properties: Min/max length, rows (height)

Rich Text

  • Use Case: Formatted text input with toolbar
  • Examples: Detailed feedback, formatted content
  • Properties: Toolbar options, allow images

Selection Fields

Select (Dropdown)

  • Use Case: Single choice from multiple options
  • Examples: Country, Category, Priority
  • Properties: Options list, default value, required

Radio

  • Use Case: Single choice with visible options
  • Examples: Gender, Rating, Plan Selection
  • Properties: Options list, required

Checkbox

  • Use Case: Single checkbox (yes/no)
  • Examples: "I agree to terms", "Subscribe to newsletter"
  • Properties: Checked by default, required

Date & Time Fields

Date

  • Use Case: Date selection
  • Examples: Birth Date, Event Date, Deadline
  • Properties: Min/max date, date format

Time

  • Use Case: Time selection
  • Examples: Preferred Time, Meeting Time
  • Properties: Time format (12/24 hour)

DateTime

  • Use Case: Date and time selection
  • Examples: Appointment, Event Start Time
  • Properties: Date and time format

Special Fields

File Upload

  • Use Case: File attachments
  • Examples: Resume, Document, Image
  • Properties:
    • Max file size (in bytes)
    • Allowed file types (e.g., "image/*", "application/pdf")
    • Max number of files (for multiple uploads)
  • Supported Types: Images, PDFs, documents, etc.

Section

  • Use Case: Visual separator/header
  • Examples: "Personal Information", "Contact Details"
  • Properties: Title, description, styling
  • Note: Not a data field, just for organization

Calculated Field

  • Use Case: Auto-calculated values
  • Examples: Total Price, Discount Amount, Score
  • Properties:
    • Formula (e.g., "field1 + field2", "field1 * 0.1")
    • Fields used in formula
  • Note: Read-only, calculated automatically

Form Configuration

Field Properties

Each field has configurable properties:

Basic Properties

  • Label: Text shown above the field
  • Placeholder: Hint text inside the field
  • Required: Whether field must be filled
  • Help Text: Additional instructions below field

Validation

  • Min Length: Minimum characters required
  • Max Length: Maximum characters allowed
  • Pattern: Regex pattern for format validation
  • Custom Message: Error message for validation failure
  • Min/Max Value: For number fields
  • Date Range: For date fields

Options (Select/Radio)

  • Add multiple options
  • Set default selected option
  • Reorder options

Field Ordering

  • Drag fields to reorder
  • Use arrow buttons in properties panel
  • Order affects submission data structure

Conditional Logic

Conditional logic lets you show or hide fields based on user responses.

Setting Up Conditional Logic

  • Select the field you want to conditionally show/hide
  • In the properties panel, find "Conditional Logic"
  • Choose action:
    • Show If: Field appears when condition is met
    • Hide If: Field is hidden when condition is met
  • Configure condition:
    • Field: Which field to check
    • Operator: equals, not equals, contains, not contains, greater than, less than, isEmpty, isNotEmpty
    • Value: What to compare against

Examples

Example 1: Show Company Field for Businesses

  • Field: "Are you a business?"
  • Operator: equals
  • Value: "Yes"
  • Action: Show "Company Name" field

Example 2: Show Discount Code for VIP Members

  • Field: "Membership Type"
  • Operator: equals
  • Value: "VIP"
  • Action: Show "Discount Code" field

Best Practices for Conditional Logic

  • Keep conditions simple and clear
  • Test all conditional paths
  • Provide clear labels for conditional fields
  • Don't create circular dependencies

Multi-Step Forms

Break long forms into multiple steps for better user experience.

Creating Multi-Step Forms

  • Add all fields to your form
  • Click "Steps" button (top right)
  • Click "Add Step"
  • Configure each step:
    • Step Title: Name of the step (e.g., "Personal Information")
    • Description: Optional step description
    • Fields: Select which fields belong to this step
    • Order: Step sequence number
  • Assign fields to steps:
    • Drag fields into step sections
    • Or select fields and assign to step
  • Configure form settings:
    • Show Progress Bar: Visual progress indicator
    • Allow Back Navigation: Let users go back to previous steps

Best Practices

  • Keep 3-5 steps maximum
  • 3-5 fields per step
  • Use clear step titles
  • Show progress bar for long forms
  • Allow users to go back

Form Settings

Access form settings by clicking the "Settings" button (top right).

Submission Settings

  • Allow Multiple Submissions:
    • Yes: Users can submit multiple times
    • No: One submission per user (tracked by email or IP)
  • Require Authentication:
    • Yes: Users must sign in to submit
    • No: Anyone can submit (public form)
  • Redirect URL: Where to redirect after successful submission
    • Leave empty for default success message
    • Example: "https://yoursite.com/thank-you"
  • Submit Button Text: Customize button text
    • Default: "Submit"
    • Examples: "Send Message", "Join Now", "Get Started"

Display Settings

  • Show Progress Bar: For multi-step forms, shows completion percentage
  • Auto-Save: Automatically save form progress, users can resume later

Email Notifications

  • Notification Email: Where to send submission notifications
  • Email Notifications Enabled: Toggle on/off
  • Notification Format: Summary of all fields, includes submission timestamp, includes user information (if available)

Sharing & Embedding

Getting Your Form URL

  • Open your form
  • Click "Share" or "Copy Link" button
  • You'll get a URL like:
    https://form.contactlist.io/forms/[formId]/submit
  • Copy and share this URL anywhere

Sharing Options

  • Direct Link: Share the URL directly, works on any device, mobile-responsive
  • Email: Include link in emails, use in email campaigns, track clicks from email
  • Social Media: Share on Twitter, Facebook, LinkedIn, use in social media posts, track engagement
  • QR Code: Generate QR code from URL, print on flyers, posters, use at events

Embedding Forms

Option 1: Iframe Embed

  • Click "Embed" button
  • Copy the iframe code:
    <iframe 
  src="https://form.contactlist.io/forms/[formId]/submit"
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>
  • Paste into your website's HTML

Option 2: Script Tag (Recommended)

  • Click "Embed" button
  • Copy the script tag code
  • Paste before closing </body> tag
  • Add a container div where you want the form:
    <div id="contactlist-form-[formId]"></div>

Embedding Best Practices

  • Responsive Design: Forms are mobile-responsive by default
  • Custom Styling: Forms inherit some styles from your site
  • Loading: Forms load asynchronously
  • Security: Forms are served over HTTPS

Viewing Submissions

Accessing Submissions

  • Go to Forms in sidebar
  • Click on a form
  • Click "Submissions" tab
  • See all submissions in a table

Submission Details

Each submission shows:

  • Submission ID: Unique identifier
  • Submitted At: Date and time
  • Submitted By: User email (if authenticated)
  • Source: Web, mobile, etc.
  • All Field Data: Values for each field
  • File Attachments: Downloadable files

Submission Actions

  • View: Click submission to see full details
  • Export: Export all submissions as CSV
  • Filter: Filter by date, field values
  • Search: Search submissions
  • Delete: Remove submission (with confirmation)

Exporting Submissions

  • Go to form submissions
  • Click "Export" button
  • Choose format: CSV
  • Download file
  • Open in Excel, Google Sheets, etc.

CSV Format:

  • One row per submission
  • Columns for each field
  • Includes timestamp and metadata

Form Integrations

Auto-Sync to Email Lists

Automatically add form submissions to email lists:

  • Create or open your form
  • Go to "Integrations" tab
  • Click "Connect to Email List"
  • Select email list
  • Map form fields to subscriber fields:
    • Email field → Subscriber email
    • First Name field → Subscriber firstName
    • Last Name field → Subscriber lastName
  • Optional: Assign to subscriber groups
  • Enable "Auto-Sync"
  • Save

How It Works:

  • When form is submitted
  • Email is extracted from form
  • Subscriber is created/updated in list
  • Other fields mapped to subscriber metadata
  • Subscriber added to selected groups (if any)

Webhooks

Get real-time notifications when forms are submitted:

  • Go to form "Integrations" tab
  • Click "Add Webhook"
  • Enter webhook URL
  • Select events:
    • submission.created: New submission
    • submission.updated: Submission updated
  • Add optional secret for verification
  • Enable webhook
  • Save

Webhook Payload:

{
  "event": "submission.created",
  "formId": "form_id",
  "submissionId": "submission_id",
  "data": {
    "field1": "value1",
    "field2": "value2"
  },
  "submittedAt": "2024-01-01T00:00:00Z",
  "submittedBy": "user@example.com"
}

Best Practices

Form Design

  • Keep It Short: Only ask for essential information, remove unnecessary fields, use conditional logic to show relevant fields
  • Clear Labels: Use descriptive field labels, add helpful placeholder text, include help text for complex fields
  • Logical Order: Start with easy questions, group related fields, end with optional information
  • Mobile-Friendly: Forms are responsive by default, test on mobile devices, keep fields simple on mobile

Field Configuration

  • Use Appropriate Field Types: Email field for emails (not text), Number field for numbers, Date field for dates
  • Set Validation Rules: Required fields for essential data, format validation (email, phone, URL), length limits where appropriate
  • Provide Defaults: Pre-fill common values, set default selections, use placeholders for guidance

Submission Handling

  • Thank You Page: Set redirect URL, thank users for submission, set expectations (when will you respond)
  • Email Notifications: Enable for important forms, use clear notification email, include all relevant information
  • Auto-Sync: Connect to email lists, keep subscriber lists updated, use groups for organization

Common Use Cases

Contact Form

Fields:

  • Name (Text, required)
  • Email (Email, required)
  • Subject (Text, required)
  • Message (Textarea, required)

Settings:

  • Email notifications enabled
  • Redirect to thank you page
  • Auto-sync to "Contacts" email list

Newsletter Signup

Fields:

  • Email (Email, required)
  • First Name (Text, optional)
  • Interests (Checkboxes, optional)

Settings:

  • Auto-sync to "Newsletter" email list
  • Add to "Subscribers" group
  • Simple, one-field focus

Next Steps

Now that you understand forms, check out: