Visual Form Builder
Customize your booking forms without any coding
Form Customization Overview
The Visual Form Builder lets you customize your booking forms to match your brand perfectly. No coding skills required - just point, click, and customize!
What You Can Customize
- • Colors and color schemes
- • Form styles and layouts
- • Button text and labels
- • Font families and sizes
- • Border radius and spacing
- • Popup animations
- • Success messages
- • Custom CSS for advanced users
Accessing the Form Builder
Getting Started
- Go to your WordPress admin dashboard
- Navigate to WP Booking System → Form Builder
- You'll see the form customization interface with live preview
Design & Style Options
Color Schemes
Choose from pre-designed color schemes or create your own custom colors.
Select "Custom Colors" to define your own brand colors with the color picker.
Form Styles
Choose the overall appearance and layout of your booking form.
Default Style
Clean and simple form with minimal styling
Modern Card
Elevated card design with shadow and rounded corners
Minimal
Ultra-clean design with subtle borders
Gradient
Eye-catching gradient background
Typography & Layout
Form Width
Adjust form width from 300px to 800px using the slider
Border Radius
Control corner roundness from sharp (0px) to very round (20px)
Font Family
Choose from Arial, Helvetica, Georgia, Roboto, or use your theme's default
Popup Settings
Enable Popup Mode
Transform your booking form into an engaging popup that appears when visitors click a button.
Popup Benefits
- • Saves page space - form appears on demand
- • Higher conversion rates with focused experience
- • Professional, modern appearance
- • Mobile-friendly responsive design
Animation Options
Smooth opacity transition
Form slides from top
Form scales up from center
Popup Shortcodes
Use these shortcodes to add popup booking buttons anywhere on your site:
Basic Popup Button
[booking_popup]Custom Button Text
[booking_popup text="Schedule Appointment"]Pre-select Service
[booking_popup service="massage" text="Book Massage"]Advanced Styling
[booking_popup text="Book Now" animation="slide" width="600" background_color="#e74c3c"]Content Customization
Text & Labels
Customize all the text that appears in your booking form:
Form Headers
- • Form title and subtitle
- • Step labels (Service, Date & Time, etc.)
- • Success messages
Buttons & Actions
- • Next/Previous button text
- • Submit button text
- • Popup trigger button text
Live Preview
Real-time Preview
See your changes instantly with the built-in live preview system:
Preview Features
- • Instant visual feedback
- • Toggle between inline and popup modes
- • Test all form interactions
- • Mobile responsive preview
How to Use
- Make changes in the left panel
- Watch preview update automatically
- Click "Refresh Preview" if needed
- Save when you're happy with the result
Advanced: Custom CSS
For Advanced Users
If you know CSS, you can add custom styles for complete control over your form's appearance.
⚠️ Advanced Feature
Custom CSS requires coding knowledge. Test thoroughly before using on live sites.
Example: Custom Button Styling
.wp-booking-btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}Available CSS Classes
- •
.wp-booking-form- Main form container - •
.wp-booking-step- Individual form steps - •
.wp-booking-btn-primary- Primary buttons
- •
.wp-booking-popup-overlay- Popup background - •
.wp-booking-popup-container- Popup form - •
.time-slot- Time selection buttons
You're All Set!
Your customized booking form is ready to use. Remember to save your changes and test the form on your live site.
Next: Set Up PaymentsTips & Best Practices
🎨 Design Tips
- • Keep forms simple and uncluttered
- • Use your brand colors consistently
- • Test on mobile devices
- • Make buttons easy to click
🚀 Performance Tips
- • Use popup forms to save page space
- • Minimize custom CSS for faster loading
- • Test form loading speed
- • Optimize for mobile first