​
Forms

Gately provides a complete form management system that allows you to create, customize, and handle form submissions with built-in analytics and user tracking - all through Framer components.

​
Overview

The forms system includes:
  • Framer Components: Pre-built form components for Framer
  • Property Controls: Visual customization through Framer’s property panel
  • Advanced Field Types: Support for text, files, payments, and more
  • Form Submissions: Handle and process form data automatically
  • Analytics: Track form performance and user interactions
  • Notifications: Get notified of new submissions via email
  • Customization: Style forms to match your brand design

​
Creating Forms

​
Framer Component Setup

  1. Go to your Gately dashboard
  2. Navigate to Forms section
  3. Click Create New Form
  4. Configure your form settings
  5. Copy the form ID for use in Framer
  6. Add Gately form components to your Framer project

​
Form Configuration

Configure your form through the dashboard:
  • Form Name: Give your form a descriptive name
  • Description: Add context about the form’s purpose
  • Success Message: Custom message shown after submission
  • Redirect URL: Where to send users after submission
  • Email Notifications: Get notified of new submissions
  • Spam Protection: Enable CAPTCHA and rate limiting

​
Framer Form Components

Gately provides pre-built Framer components that you can add to your projects:

​
Form Container Component

The main form wrapper that handles submissions and styling:
  • Form ID: Connect to your Gately form
  • Styling: Match your brand colors and typography
  • Layout: Control form spacing and arrangement
  • Responsive: Automatically adapts to different screen sizes

​
Field Components

Individual field components for different input types:
  • Text Input: Single line text with validation
  • Email Input: Email field with format validation
  • Textarea: Multi-line text input
  • Select Dropdown: Dropdown selection with options
  • Checkbox: Boolean selection
  • Radio Group: Single choice from options
  • File Upload: File attachment with drag-and-drop
  • Payment Button: Stripe payment integration

​
Supported Field Types

Gately supports a comprehensive range of field types through Framer components:

​
Basic Text Fields

Text Input

Single line text input for names, titles, etc.
  • Use cases: Names, titles, short answers
  • Validation: Required, min/max length, patterns
  • Placeholder text: Custom placeholder messages
  • Framer controls: Width, height, styling, validation

Email

Email address with automatic validation.
  • Use cases: Contact forms, newsletters, registrations
  • Validation: Email format, required, unique
  • Auto-formatting: Automatic email validation
  • Framer controls: Styling, error states, validation

Textarea

Multi-line text input for longer content.
  • Use cases: Messages, descriptions, comments
  • Validation: Required, min/max length, word count
  • Resizable: Users can resize the text area
  • Framer controls: Rows, columns, styling, validation

Number

Numeric input with validation.
  • Use cases: Ages, quantities, prices, ratings
  • Validation: Min/max values, decimals, integers
  • Formatting: Currency, percentage, decimal places
  • Framer controls: Min/max values, step increments, styling

​
Selection Fields

Select Dropdown

Dropdown selection from predefined options.
  • Use cases: Categories, countries, preferences
  • Options: Add unlimited options through property controls
  • Search: Enable search within options
  • Multi-select: Allow multiple selections
  • Framer controls: Options list, styling, behavior

Radio Buttons

Single choice from multiple options.
  • Use cases: Single choice questions, preferences
  • Layout: Horizontal or vertical arrangement
  • Validation: Required selection
  • Custom styling: Match your brand colors
  • Framer controls: Options, layout, styling, validation

Checkboxes

Multiple choice selection.
  • Use cases: Multiple selections, agreements
  • Validation: Min/max selections
  • Layout: Grid or list arrangement
  • Terms: Include terms and conditions
  • Framer controls: Options, layout, validation, styling

Toggle Switch

On/off or yes/no selection.
  • Use cases: Settings, preferences, agreements
  • Styling: Custom on/off labels
  • Default state: Set default value
  • Accessibility: Screen reader friendly
  • Framer controls: Labels, default state, styling

​
Date and Time Fields

Date Picker

Date selection with calendar interface.
  • Use cases: Birthdays, appointments, deadlines
  • Format: MM/DD/YYYY, DD/MM/YYYY, etc.
  • Range: Min/max date restrictions
  • Presets: Today, tomorrow, next week
  • Framer controls: Date format, range limits, styling

Time Picker

Time selection with hour/minute interface.
  • Use cases: Meeting times, schedules
  • Format: 12/24 hour format
  • Intervals: 15, 30, 60 minute intervals
  • Range: Business hours, availability
  • Framer controls: Time format, intervals, styling

Date & Time

Combined date and time selection.
  • Use cases: Appointments, events, deadlines
  • Timezone: Automatic timezone handling
  • Duration: Set appointment durations
  • Conflicts: Check for scheduling conflicts
  • Framer controls: Combined settings, styling

​
File Upload Fields

Single File Upload

Upload one file with drag-and-drop interface.
  • File types: Images, documents, videos, audio
  • Size limits: Configurable file size limits
  • Preview: Image previews for supported files
  • Progress: Upload progress indicator
  • Framer controls: File types, size limits, styling

Multiple File Upload

Upload multiple files at once.
  • File count: Set maximum number of files
  • Batch upload: Upload all files together
  • Individual limits: Per-file size limits
  • File types: Restrict to specific formats
  • Framer controls: Max files, file types, styling

Image Upload

Specialized image upload with preview.
  • Formats: JPG, PNG, GIF, WebP, SVG
  • Dimensions: Min/max width and height
  • Compression: Automatic image optimization
  • Crop tool: Built-in image cropping
  • Framer controls: Image formats, dimensions, styling

Document Upload

Document upload with format validation.
  • Formats: PDF, DOC, DOCX, TXT, etc.
  • Security: Virus scanning for uploads
  • Preview: Document preview for supported formats
  • OCR: Text extraction from images
  • Framer controls: Document types, security, styling

​
Payment Fields

Payment Button

Simple payment button with Stripe Checkout integration.
  • Easy setup: Just set amount and currency
  • Secure processing: PCI compliant payment handling
  • Multiple currencies: Support for 135+ currencies
  • Payment methods: Credit cards, debit cards, digital wallets
  • Framer controls: Payment amount, currency, button styling

Payment Amount

Configurable payment amounts with fee calculation.
  • Fixed amount: Set specific payment amount
  • Variable amount: Let users choose amount
  • Fee calculation: Automatic transaction fee handling
  • Currency selection: Choose payment currency
  • Framer controls: Amount, currency, fee settings

Payment Methods

Select which payment methods to accept.
  • Credit cards: Visa, Mastercard, American Express
  • Digital wallets: Apple Pay, Google Pay, PayPal
  • Bank transfers: ACH, SEPA, other local methods
  • Custom branding: Match your brand styling
  • Framer controls: Payment method selection, styling

Billing Information

Collect billing address automatically.
  • Auto-complete: Address suggestions and validation
  • Required fields: Configure which fields are required
  • International: Support for global addresses
  • Tax calculation: Automatic tax handling
  • Framer controls: Required fields, validation, styling

​
Advanced Fields

Phone Number

Phone number with international support.
  • Formats: International, national, local
  • Validation: Country-specific validation
  • Auto-format: Automatic formatting
  • Country codes: Dropdown country selection
  • Framer controls: Format, validation, styling

Address

Complete address input with validation.
  • Components: Street, city, state, zip, country
  • Auto-complete: Address suggestions
  • Validation: Postal code validation
  • Geocoding: Convert to coordinates
  • Framer controls: Address components, styling

Signature

Digital signature capture.
  • Input methods: Mouse, touch, stylus
  • Validation: Signature verification
  • Format: PNG, SVG, PDF output
  • Legal: Legally binding signatures
  • Framer controls: Canvas size, styling, validation

Rating

Star rating or numeric rating.
  • Types: Stars, numbers, emojis
  • Scale: 1-5, 1-10, custom scales
  • Half ratings: Allow half-star ratings
  • Average: Calculate average ratings
  • Framer controls: Rating type, scale, styling

​
Framer Property Controls

Each Gately form component includes comprehensive property controls in Framer:

​
General Controls

  • Form ID: Connect to your Gately form
  • Field Label: Custom field labels
  • Placeholder: Custom placeholder text
  • Required: Make fields required
  • Validation: Set validation rules

​
Styling Controls

  • Width/Height: Control component dimensions
  • Colors: Primary, secondary, accent colors
  • Typography: Font family, size, weight
  • Borders: Border style, color, radius
  • Spacing: Padding and margins
  • Background: Background colors and images

​
Behavior Controls

  • Default Value: Set initial field values
  • Validation Rules: Min/max values, patterns
  • Error Messages: Custom error text
  • Success States: Custom success styling
  • Loading States: Loading indicators

​
Payment Controls

  • Payment Amount: Set fixed amount or allow user input
  • Currency: Choose payment currency (USD, EUR, etc.)
  • Transaction Fee: Enable automatic fee calculation
  • Payment Methods: Select which payment methods to show
  • Success Page: Where to redirect after successful payment
  • Error Page: Where to redirect if payment fails
  • Button Text: Customize payment button text
  • Button Styling: Match your brand colors and design

​
Form Analytics

Gately automatically tracks form performance and provides detailed analytics:

​
Automatic Tracking

  • Form Views: When users view your forms
  • Form Starts: When users begin filling out forms
  • Form Completions: Successful form submissions
  • Form Abandonments: Users who start but don’t complete
  • Field Interactions: Which fields users interact with most
  • Submission Times: How long forms take to complete

​
Analytics Dashboard

View comprehensive analytics in your Gately dashboard:
  • Conversion Rates: Form completion percentages
  • Popular Fields: Most and least used fields
  • Error Analysis: Common validation errors
  • Device Analytics: Mobile vs desktop usage
  • Time Analytics: Peak submission times
  • User Journey: How users navigate through forms

​
Form Customization

​
Visual Styling

Customize your forms through Framer’s property controls:
  • Colors: Primary, secondary, and accent colors
  • Typography: Font family, size, and weight
  • Layout: Field spacing, alignment, and arrangement
  • Borders: Border styles, colors, and radius
  • Shadows: Drop shadows and depth effects
  • Animations: Hover effects and transitions

​
Field Configuration

Advanced field settings available through property controls:
  • Validation Rules: Required fields, formats, limits
  • Conditional Logic: Show/hide fields based on answers
  • Default Values: Pre-fill fields with default data
  • Help Text: Add explanatory text for complex fields
  • Placeholder Text: Custom placeholder messages
  • Field Groups: Organize related fields together

​
Success Handling

Configure what happens after form submission:
  • Success Messages: Custom thank you messages
  • Redirect URLs: Send users to specific pages
  • Email Confirmations: Send confirmation emails to users
  • Admin Notifications: Notify you of new submissions
  • Data Export: Automatic data export to spreadsheets
  • Integration: Connect to other tools via webhooks

​
File Upload Features

​
Supported File Types

Images: JPG, PNG, GIF, WebP, SVG, BMP, TIFF Documents: PDF, DOC, DOCX, TXT, RTF, ODT Spreadsheets: XLS, XLSX, CSV, ODS Presentations: PPT, PPTX, ODP Archives: ZIP, RAR, 7Z, TAR, GZ Audio: MP3, WAV, AAC, OGG, FLAC Video: MP4, AVI, MOV, WMV, FLV, WebM

​
File Management

  • Size Limits: Configurable file size restrictions
  • Storage: Secure cloud storage with CDN
  • Organization: Automatic file organization
  • Access Control: Secure file access permissions
  • Backup: Automatic file backups
  • Cleanup: Automatic cleanup of old files

​
Payment Integration

​
Setting Up Payments

To enable payment collection in your forms:
  1. Connect Stripe Account
    • Go to your Gately dashboard
    • Navigate to Settings → Payments
    • Click Connect Stripe Account
    • Follow the Stripe authorization process
    • Your Stripe account is now connected
  2. Configure Payment Settings
    • Set your default currency
    • Choose payment methods to accept
    • Configure transaction fees (optional)
    • Set up webhook endpoints
    • Configure success and error pages
  3. Add Payment Fields to Forms
    • In Framer, add payment field components
    • Set payment amount in property controls
    • Choose payment methods to display
    • Configure button text and styling

​
Payment Field Types

Payment Button: Simple payment button with Stripe Checkout Payment Amount: Configurable payment amounts with fee calculation Payment Methods: Select which payment methods to accept Billing Information: Collect billing address automatically Receipt Settings: Configure automatic receipt emails

​
Payment Configuration

Configure payment behavior through your dashboard:
  • Test Mode: Test payments without charging real money
  • Live Mode: Process real payments from customers
  • Transaction Fees: Set automatic fee calculation (e.g., 2% + $0.30)
  • Success Pages: Where to redirect after successful payment
  • Error Pages: Where to redirect if payment fails
  • Email Receipts: Automatic receipt emails to customers
  • Webhook Notifications: Get notified of payment events

​
Payment Security

Gately ensures secure payment processing:
  • PCI Compliance: All payment data is PCI compliant
  • Encryption: Payment data is encrypted in transit and at rest
  • Tokenization: Sensitive data is tokenized for security
  • Fraud Protection: Built-in fraud detection and prevention
  • Secure Storage: Payment data stored securely in Stripe

​
Best Practices

Form Design

  • Keep forms simple and focused
  • Use clear, descriptive labels
  • Group related fields together
  • Provide helpful placeholder text
  • Test forms on mobile devices

User Experience

  • Show progress indicators for long forms
  • Provide clear error messages
  • Enable auto-save for long forms
  • Add confirmation for important actions
  • Test the complete user journey

Data Security

  • Use HTTPS for all form submissions
  • Validate data on both client and server
  • Implement rate limiting to prevent spam
  • Encrypt sensitive data
  • Regular security audits

Analytics

  • Monitor form completion rates
  • Track field interaction patterns
  • Analyze abandonment points
  • A/B test different form designs
  • Use insights to improve forms

​
Troubleshooting

​
Next Steps

Analytics

Learn about form performance tracking

UI Components

Style your forms to match your design

Dashboard

Create and manage your forms