Webflow Forms - External Scripts

External JavaScript modules and styles for PTE Tutoring Webflow site.

📁 Structure

webflow-forms-external/
├── dist/                   # Production files (minified, versioned)
│   ├── modules/           # JavaScript modules
│   │   ├── date-picker.js
│   │   ├── phone-picker.js
│   │   ├── form-stepper.js
│   │   ├── form-visibility.js
│   │   └── wized-builder.js
│   ├── styles/            # CSS files
│   │   └── form-styles.css
│   └── boot-loader.js     # Main loader script
├── src/                   # Source files (unminified, for editing)
│   ├── modules/
│   └── styles/
└── README.md

🎯 Usage

In Webflow Site Settings → Custom Code

Before </body> tag:

<script src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/webflow-forms-external@v1.0.0/dist/boot-loader.js" defer></script>

📦 Modules

1. Date Picker (date-picker.js)

• Flatpickr integration
• dd/mm/yyyy format
• Min/max date validation
• Age-based restrictions

2. Phone Picker (phone-picker.js)

• International phone formatting
• Country detection
• Auto-formatting with digit grouping

3. Form Stepper (form-stepper.js)

• Multi-step form navigation
• Validation per step
• Dynamic routing based on selections

4. Form Visibility (form-visibility.js)

• Conditional field visibility
• Dynamic pricing calculations
• UNI contact mode logic

5. Wized Builder (wized-builder.js)

• Form data collection
• JSON builder for Wized submission

🔄 Deployment

1. Make changes in src/
2. Copy to dist/ (or run build script)
3. Commit and tag:

   git add .
   git commit -m "Update: description"
   git tag v1.0.1
   git push origin main --tags

4. Update version in Webflow: @v1.0.0 → @v1.0.1

📝 License

Private - For PTE Tutoring use only.