Creating Your First Form

This step-by-step guide will walk you through creating your first form with NexusForm.

Starting a New Form

Option 1: Start from Scratch

1. Open NexusForm from your Shopify Apps
2. Click Forms in the navigation
3. Click Create Form button
4. You’ll be taken to the form builder with a blank canvas

Option 2: Use a Template

1. Open NexusForm from your Shopify Apps
2. Click Templates in the navigation
3. Browse templates by category:
   • Contact - Customer inquiry forms
   • Registration - Sign-up and registration forms
   • Survey - Feedback and survey forms
   • Feedback - Product review and feedback forms
   • Newsletter - Email subscription forms
   • Custom - Other template types
4. Click Preview to see the template
5. Click Use Template to create a form based on it

The Form Builder Interface

The form builder has three main areas:

┌─────────────────────────────────────────────────────────┐
│  Header (Form Name, Actions, Undo/Redo)                 │
├───────────┬─────────────────────────────┬───────────────┤
│           │                             │               │
│  Fields   │        Form Canvas          │  Properties   │
│  Palette  │    (Drag & Drop Area)       │    Panel      │
│           │                             │               │
└───────────┴─────────────────────────────┴───────────────┘

Left Sidebar - Fields Palette

Contains all available field types organized by category. Drag fields from here onto the canvas.

Center - Form Canvas

The visual editor where you arrange and preview your form. Shows a live preview of how your form will look.

Right Sidebar - Properties Panel

Configure the selected field’s settings, validation rules, and appearance. Also contains form-wide settings tabs.

Adding Fields to Your Form

Drag and Drop

1. Find the field type you want in the left sidebar
2. Click and drag it onto the canvas
3. Drop it where you want it to appear
4. The field is now added to your form

Quick Add

1. Click the + Add Field button on the canvas
2. Select a field type from the popup menu
3. The field is added at that position

Configuring Field Settings

Click on any field to select it. The right panel shows its settings:

Basic Settings

• Label - The text shown above the field
• Placeholder - Hint text inside the field (disappears when typing)
• Description - Help text shown below the field
• Field Name - Technical identifier (used in exports)

Validation Settings

• Required - Make the field mandatory
• Min/Max Length - Character limits for text fields
• Pattern - Custom validation using regex
• Custom Error Messages - Override default error messages

For Choice Fields (Dropdown, Radio, Checkbox)

• Options - Add, edit, or remove choices
• Default Value - Pre-select an option

Arranging Your Form

Reordering Fields

• Drag and drop fields to reorder them
• Grab the field by its drag handle (left side)

Deleting Fields

• Select the field
• Click the Delete button in the toolbar
• Or use keyboard shortcut: Delete / Backspace

Duplicating Fields

• Select the field
• Click the Duplicate button
• A copy appears below the original

Saving Your Form

Auto-Save

Your form automatically saves as you work. Look for the “Saved” indicator in the header.

Manual Save

Click the Save button in the header to force a save.

Naming Your Form

1. Click the form name in the header
2. Type a descriptive name (e.g., “Contact Us”, “Product Inquiry”)
3. Click outside or press Enter to save

Example: Simple Contact Form

Let’s create a basic contact form:

1. Create new form - Click “Create Form”
2. Add fields:
   • Drag Text field → Set label to “Full Name”
   • Drag Email field → Set label to “Email Address”
   • Drag Dropdown field → Set label to “Subject”, add options
   • Drag Textarea field → Set label to “Message”
3. Set validation:
   • Make Name, Email, and Message required
   • Email field auto-validates email format
4. Name your form - “Contact Us Form”
5. Save the form

Your first form is ready to publish!

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Delete / Backspace	Delete selected field
Ctrl/Cmd + D	Duplicate selected field