Advanced Elementor Safari Booking Form Widget Configuration
Budget: ₹1,500 – ₹12,500 INR
Elementor Safari Booking Form Configuration | wordpress
Project Overview:
The Elementor Safari Booking Form aims to enhance the Elementor Pro Form widget by adding advanced booking functionalities for National Park Safari reservations. It will provide custom database storage, pricing calculations, conditional logic, and CRM integration.
The Form will allow admins to configure and manage booking forms easily while improving the user experience with multi-step forms, traveler details management, and automated price calculations.
Form placement will be on each National Park site and Safari booking page on park selection on tab.
Booking Form Enhancements (Frontend Features)
✅ Step-by-step Booking Process (Multi-step form for better UX)
✅ Dynamic Form Fields Based on User Selection
✅ Repeater Fields for Multiple Travelers (Add/Remove Travelers)
✅ Conditional Logic for Fields Visibility
✅ Price Calculation Based on Safari Selection
✅ Multi-Currency Support (Optional Feature for Future Release)
✅ Pre-filled Country Code Detection (Geo-based Auto-fill)
✅ Progress Indicator for Form Steps
✅ AJAX-Based Form Submission (No Page Reloads)
Detailed Booking Form Structure
? Step 1: Safari Selection
• Select National Park (Hidden Field on Park Page, Tab Selection on Safari booking Page)
• Full Name (Text Field)
• Country Code & Contact Number (Auto-detect Country Code from IP, Editable by User)
• Email Address (Email Field, Auto-Validation)
Hidden Section on Page 1
• Select Safari Type (Jeep Safari, Canter Safari, etc.)
• Select Preferred Zone (Zones Available for Selected National Park)
• Number of Tourists (Max limit based on Safari Type)
• Select Safari Time Slot (Morning/Evening, based on Park Timings)
• Select Safari Date (Date Picker with Availability Check)
? Step 2: Traveller Details (Repeater Fields)
For each traveller:
• Sr. No. (Auto-generated)
• Full Name (As per Govt. ID) (Text Field, Required)
• Age (in Years) (Number Field, Age Restrictions Based on Safari Type)
• Nationality (Dropdown or Auto-detect from Country Code)
• ID Type (Dropdown: Passport, Aadhar, Driving License, etc.)
• ID Number (Text Field, Format Validation Based on Selected ID Type)
• Upload Scan copy of ID, (only JPG, PNG, PDF allowed)
• Button: Add More Travellers (Repeater Field Functionality)
• Button: Remove Traveller (Dynamic Visibility: Show only when more than 1 traveler added)
? Step 3: Additional Information
• Trip Type: (Personal/Business)
• If Business, Show Company Name Field (Conditional Visibility Based on Trip Type)
• If Business, Show Enter GST no. (Conditional Visibility Based on Trip Type)
• If Personal, Show Billing Name. (Conditional Visibility Based on Trip Type)
• Country (Auto fetched based on location, with option to change/edit )
• State (Auto fetched based on location, with option to change/edit)
• City (Auto fetched based on location, with option to change/edit)
• Address (Auto fetched based on location, with option to change/edit)
• Pin code/Zip code (Auto fetched based on location, with option to change/edit)
• Special Note
Booking Pricing Logic & Calculation
1️⃣ Pricing Based on National Park & Safari Type
2️⃣ Price Per Traveler (Dynamically Fetched from Settings or API)
3️⃣ Dynamic Tax Calculation (Configurable from Admin Panel)
4️⃣ Discount or Promo Code Support (Future Feature)
5️⃣ Live Price Display Before Booking Submission
Pop up to provide Booking Confirmation Overlay
? Purpose of Popup
After a user successfully submits the multistep booking form, a popup should appear to:
• Confirm submission
• Show a short success message
• Display a unique Booking Reference Number
• Offer navigation buttons for next steps
________________________________________
? Trigger Behavior
• Trigger: On successful submission of Elementor multistep form
• Trigger Method: Via Elementor “Actions After Submit” → Open Popup (not via redirect or JS)
• JavaScript should not be required for the popup to appear
• Must support Elementor Form Widget natively
________________________________________
? Popup Design Elements
1. ✅ Thank You Message
o Text: “Thank you for your request!”
o Style: Prominent, large font, centered
2. ✅ Short Descriptive Message
o Example: “We’ve received your booking request and will be in touch shortly.”
3. ✅ Booking Reference Number Display
o Dynamic content placeholder (see functionality below)
o Styled clearly, in bold or highlighted
4. ✅ Navigation Buttons (3)
o “Submit Another Request” → link back to form page
o “Visit Profile Page” → /my-account/ or similar
o “Go to Homepage” → /
________________________________________
? Functional Behavior
1. Prevent Page Scroll While Popup Is Open
o Page should not scroll when popup is active
2. Prevent Closing on Outside Click
o Popup should close only via close (X) button or specific button
o Disable closing on click outside or escape key
3. Display Dynamic Booking Reference
o Booking Reference should be shown using a unique value (e.g., REF-3492)
o Value generated as part of form submission (via shortcode or JS)
o Should pull from hidden field in the form (booking_ref)
o Value shown dynamically in popup using JS or shortcode
________________________________________
? Compatibility & Reliability
• Works across all modern browsers (Chrome, Safari, Firefox, Edge)
• Does not rely on browser pop-up windows (so not blocked)
• Works with multistep Elementor Form
________________________________________
? Notes
• Use Elementor’s built-in Popup Builder
• Keep it responsive for desktop & mobile
• Ensure popup performance is lightweight
Project Overview:
The Elementor Safari Booking Form aims to enhance the Elementor Pro Form widget by adding advanced booking functionalities for National Park Safari reservations. It will provide custom database storage, pricing calculations, conditional logic, and CRM integration.
The Form will allow admins to configure and manage booking forms easily while improving the user experience with multi-step forms, traveler details management, and automated price calculations.
Form placement will be on each National Park site and Safari booking page on park selection on tab.
Booking Form Enhancements (Frontend Features)
✅ Step-by-step Booking Process (Multi-step form for better UX)
✅ Dynamic Form Fields Based on User Selection
✅ Repeater Fields for Multiple Travelers (Add/Remove Travelers)
✅ Conditional Logic for Fields Visibility
✅ Price Calculation Based on Safari Selection
✅ Multi-Currency Support (Optional Feature for Future Release)
✅ Pre-filled Country Code Detection (Geo-based Auto-fill)
✅ Progress Indicator for Form Steps
✅ AJAX-Based Form Submission (No Page Reloads)
Detailed Booking Form Structure
? Step 1: Safari Selection
• Select National Park (Hidden Field on Park Page, Tab Selection on Safari booking Page)
• Full Name (Text Field)
• Country Code & Contact Number (Auto-detect Country Code from IP, Editable by User)
• Email Address (Email Field, Auto-Validation)
Hidden Section on Page 1
• Select Safari Type (Jeep Safari, Canter Safari, etc.)
• Select Preferred Zone (Zones Available for Selected National Park)
• Number of Tourists (Max limit based on Safari Type)
• Select Safari Time Slot (Morning/Evening, based on Park Timings)
• Select Safari Date (Date Picker with Availability Check)
? Step 2: Traveller Details (Repeater Fields)
For each traveller:
• Sr. No. (Auto-generated)
• Full Name (As per Govt. ID) (Text Field, Required)
• Age (in Years) (Number Field, Age Restrictions Based on Safari Type)
• Nationality (Dropdown or Auto-detect from Country Code)
• ID Type (Dropdown: Passport, Aadhar, Driving License, etc.)
• ID Number (Text Field, Format Validation Based on Selected ID Type)
• Upload Scan copy of ID, (only JPG, PNG, PDF allowed)
• Button: Add More Travellers (Repeater Field Functionality)
• Button: Remove Traveller (Dynamic Visibility: Show only when more than 1 traveler added)
? Step 3: Additional Information
• Trip Type: (Personal/Business)
• If Business, Show Company Name Field (Conditional Visibility Based on Trip Type)
• If Business, Show Enter GST no. (Conditional Visibility Based on Trip Type)
• If Personal, Show Billing Name. (Conditional Visibility Based on Trip Type)
• Country (Auto fetched based on location, with option to change/edit )
• State (Auto fetched based on location, with option to change/edit)
• City (Auto fetched based on location, with option to change/edit)
• Address (Auto fetched based on location, with option to change/edit)
• Pin code/Zip code (Auto fetched based on location, with option to change/edit)
• Special Note
Booking Pricing Logic & Calculation
1️⃣ Pricing Based on National Park & Safari Type
2️⃣ Price Per Traveler (Dynamically Fetched from Settings or API)
3️⃣ Dynamic Tax Calculation (Configurable from Admin Panel)
4️⃣ Discount or Promo Code Support (Future Feature)
5️⃣ Live Price Display Before Booking Submission
Pop up to provide Booking Confirmation Overlay
? Purpose of Popup
After a user successfully submits the multistep booking form, a popup should appear to:
• Confirm submission
• Show a short success message
• Display a unique Booking Reference Number
• Offer navigation buttons for next steps
________________________________________
? Trigger Behavior
• Trigger: On successful submission of Elementor multistep form
• Trigger Method: Via Elementor “Actions After Submit” → Open Popup (not via redirect or JS)
• JavaScript should not be required for the popup to appear
• Must support Elementor Form Widget natively
________________________________________
? Popup Design Elements
1. ✅ Thank You Message
o Text: “Thank you for your request!”
o Style: Prominent, large font, centered
2. ✅ Short Descriptive Message
o Example: “We’ve received your booking request and will be in touch shortly.”
3. ✅ Booking Reference Number Display
o Dynamic content placeholder (see functionality below)
o Styled clearly, in bold or highlighted
4. ✅ Navigation Buttons (3)
o “Submit Another Request” → link back to form page
o “Visit Profile Page” → /my-account/ or similar
o “Go to Homepage” → /
________________________________________
? Functional Behavior
1. Prevent Page Scroll While Popup Is Open
o Page should not scroll when popup is active
2. Prevent Closing on Outside Click
o Popup should close only via close (X) button or specific button
o Disable closing on click outside or escape key
3. Display Dynamic Booking Reference
o Booking Reference should be shown using a unique value (e.g., REF-3492)
o Value generated as part of form submission (via shortcode or JS)
o Should pull from hidden field in the form (booking_ref)
o Value shown dynamically in popup using JS or shortcode
________________________________________
? Compatibility & Reliability
• Works across all modern browsers (Chrome, Safari, Firefox, Edge)
• Does not rely on browser pop-up windows (so not blocked)
• Works with multistep Elementor Form
________________________________________
? Notes
• Use Elementor’s built-in Popup Builder
• Keep it responsive for desktop & mobile
• Ensure popup performance is lightweight