App Instructions

Step 1: Connect Your Webflow Site

1. Navigate to the Dashboard page
2. Click the "Connect Webflow Site" button
3. You'll be redirected to Webflow to authorize the app
4. Select the site you want to connect and grant permissions
5. You'll be redirected back to the dashboard where your site will appear

Note: You can connect multiple sites, but your plan may limit the number of sites you can manage.

Step 2: Install the Validation Script

1. Go to the Sites page
2. Select the site you want to configure
3. Click "Generate & Copy Validation Script"
4. Open your Webflow site in the Designer
5. Go to Site Settings (gear icon in the left sidebar)
6. Navigate to the "Custom Code" tab
7. Paste the script into the "Footer Code" section
8. Click "Save" and publish your site

The script will automatically detect and validate all forms on your site once published.

Step 3: Configure Custom Messages

1. Go to Settings
2. Scroll to the "Form Configuration" section
3. Select your site from the dropdown menu
4. Under "Custom Messages", enter your custom error messages:
   • Required Field Message: Shown when a required field is empty
   • Email Validation Message: Shown when email format is invalid
   • Minimum Length Message: Shown when text is too short (use {min} placeholder)
   • Maximum Length Message: Shown when text is too long (use {max} placeholder)
5. Click "Save Custom Messages"

Step 4: Configure File Upload Rules

1. In the "Form Configuration" section of Settings
2. Scroll to "File Upload Configuration"
3. Enter allowed MIME types (comma-separated), e.g., image/jpeg, image/png, application/pdf
4. Enter allowed file extensions (comma-separated), e.g., .jpg, .png, .pdf
5. Click "Save File Upload Configuration"

Step 5: Customize Styling

1. In the "Form Configuration" section of Settings
2. Scroll to "Styling Configuration"
3. Customize colors:
   • Error Color: Color for error messages and borders
   • Success Color: Color for success indicators
   • Warning Color: Color for warning messages
4. Toggle display options:
   • Show Error Icons: Display icons next to error messages
   • Show Success Icons: Display icons for valid fields
   • Animate Errors: Add smooth animations when errors appear
5. Click "Save Styling Configuration"

Account Settings

Manage your profile and preferences in the Settings page:

• User Profile: Update your full name
• Email Preferences: Control which emails you receive (weekly reports, team invitations, system updates)
• Change Password: Update your account password
• Account Settings: View account creation date and last sign-in

Billing & Plans

Manage your subscription in the Billing page:

• View Plans: See available plans and their features
• Upgrade/Downgrade: Change your plan to match your needs
• View Invoices: Access your billing history
• Manage Payment: Update payment methods through Stripe

Dashboard Overview

The Dashboard provides an overview of:

• Workspaces: Your Webflow workspaces and connected sites
• Site Statistics: Number of forms and validation states per site
• Form Details: View all forms on each site with their field counts
• Quick Actions: Connect new sites or navigate to site settings

Site Management

Access detailed site management in the Sites page:

• View All Sites: See all connected sites in one place
• Site Settings: Configure validation settings for individual sites
• Generate Scripts: Get validation scripts for each site
• View Forms: See all forms on a specific site

Validation Best Practices

• Test Your Forms: Always test form validation after making changes
• Clear Error Messages: Write clear, helpful error messages that guide users
• Accessibility First: The validator is WCAG 2.2 AA conformant - ensure your forms are too
• Consistent Styling: Match validation colors to your brand for a cohesive experience
• File Upload Limits: Clearly communicate file size and type restrictions to users

Troubleshooting

• Validation Not Working?: Ensure the script is in the Footer Code section and your site is published
• Forms Not Detected?: Check that your forms are properly structured in Webflow
• Custom Messages Not Showing?: Verify you've selected the correct site in Settings
• Styling Issues?: Clear your browser cache and ensure the script is up to date

Need Help?

If you need additional assistance:

• Visit our Support Center
• Check out Form Examples for inspiration
• Review your plan limits in the Billing page