REVSET LABS · EXPERT GUIDE·CRM & Contacts

Mastering GoHighLevel Two-Step Order Form Pop-up Scheduling

916 words·4 min read·Updated 27 April 2026·beginner·

Arsalan ZaffarLinkedIn

👉 Start your 30-day GoHighLevel free trial.

Quick Answer

To embed a calendar into your Two-Step Order Form pop-up, navigate to your Funnels in GoHighLevel, edit the desired funnel page, and open the pop-up editor. You will then add and configure a Calendar element within the pop-up. This process typically takes 10-15 minutes.

Key Takeaways

✓Always save your work after making changes in both the pop-up editor and the main page builder.
✓Ensure your GoHighLevel calendar has active schedules and available slots configured before embedding.
✓Test the entire two-step order form and pop-up flow on both desktop and mobile devices.
✓Use clear headlines and instructions within the pop-up to guide users through the booking process.
✓Leverage GoHighLevel's native calendar element for reliable and integrated scheduling.

Why Use a Pop-up Calendar in Your Two-Step Order Form?

Integrating a calendar directly into your GoHighLevel Two-Step Order Form pop-up streamlines your customer's journey. After a customer completes the first step of an order, the pop-up provides an immediate opportunity to book an appointment or consultation. This instant scheduling reduces friction and increases the likelihood of a conversion by capturing intent at its peak. It creates a seamless experience, moving prospects from interest to commitment within a single flow.

🔥 Pro Tip

Using a pop-up calendar immediately after the first order step significantly reduces drop-off rates. It allows prospects to take the next desired action while their interest is highest, leading to more completed bookings and sales.

How to Access and Prepare Your Funnel Page for Calendar Integration

Before embedding your calendar, you must access the correct funnel page in GoHighLevel. This page should already contain your Two-Step Order Form. Follow these steps to prepare your page for editing.

Navigate to Funnels — From your GoHighLevel dashboard, click Sites in the left navigation menu. Then, select Funnels to view your list of funnels.

Select Your Funnel — Locate the specific funnel that contains your Two-Step Order Form. Click on the funnel's name to open its page list.

Edit the Funnel Page — Find the funnel page where your Two-Step Order Form is located. Click the Edit icon (pencil) next to the page name, then choose Edit Page to open the GoHighLevel page builder.

Identify the Two-Step Order Form — Ensure your page already includes a Two-Step Order Form element. If not, drag and drop this element from the left elements panel onto your page before proceeding.

🔥 Pro Tip

Always save your funnel page before opening the pop-up editor or making significant changes. This prevents any potential loss of your current page design.

How to Design Your Pop-up and Add the Calendar Element

Once you are in the page builder, you can access the pop-up editor to begin designing and adding your calendar. This section guides you through opening the pop-up and inserting the calendar element.

Open the Pop-up Editor — In the page builder, click the Pop-up button located at the top-middle of your screen. This action reveals the pop-up's dedicated design canvas.

Add a New Row — Within the pop-up canvas, click the + Add Row button to create a new section. Choose a 1-column layout for optimal calendar display.

Add a New Element — Inside the newly created row, click the + Add Element button. This opens the list of available elements.

Select the Calendar Element — Scroll through the element list and drag the Calendar element into your new row. This places the calendar placeholder within your pop-up.

Position the Calendar (Optional) — Drag and drop the calendar element to your preferred location within the pop-up. You might place it below a headline or above a call-to-action button for clear visibility.

✅ Remember to save your pop-up design frequently to avoid losing progress. Small, regular saves are crucial during the design process.

Try GoHighLevel Free

Start your 30-day GoHighLevel free trial

Everything in this guide is in your free trial. 30 days, no credit card — the platform behind 78+ revenue systems.

Start 30-Day Free Trial →

Some links are affiliate links — if you sign up we may earn a commission, at no extra cost to you. We only recommend GoHighLevel because we build on it every day.

How to Configure Your Calendar for Seamless Booking

With the calendar element added, the next crucial step is to link it to an active GoHighLevel calendar and customize its appearance. This ensures your customers can book appointments effortlessly.

Select Your Calendar Type — Click directly on the Calendar element within the pop-up editor. In the left sidebar that appears, select GHL Calendar under the 'Calendar Type' option.

Choose a Calendar — Click the dropdown menu labeled Select Calendar and choose the specific calendar you wish to embed. This action connects the pop-up to your GoHighLevel booking schedule.

Adjust Calendar Settings — Configure the following options: ensure Booking Page is set to 'Embedded', toggle Auto-Scroll to Calendar ON for better visibility, and decide if you want to Show Calendar Header or Show Timezone Selector based on your needs.

Style the Calendar (Optional) — Customize the calendar's visual elements using the styling options in the left sidebar. You can change Background Color, Text Color, and Button Color to match your brand. For advanced styling, use the Custom CSS section.

⚠️ Ensure the selected calendar has available appointment slots and assigned team members set up in your GoHighLevel account. An unconfigured calendar will prevent successful bookings.

How to Save, Preview, and Test Your Pop-up Calendar

After designing and configuring your pop-up calendar, the final and most important steps are to save your changes and thoroughly test the integration. This ensures everything works as expected for your customers.

Save Your Pop-up — Click the Save button in the top right corner of the pop-up editor. Then, close the pop-up editor to return to the main page builder.

Save Your Funnel Page — Click Save again in the top right corner of the main page builder. This saves all changes made to your funnel page, including the pop-up.

Preview the Funnel Page — Click the Preview icon (eye) in the top right of the page builder. This opens your live funnel page in a new browser tab.

Test the Two-Step Order Form — Fill out the first step of your order form on the preview page and click Go To Step 2. This action should trigger your pop-up.

Verify Pop-up and Calendar — Confirm that the pop-up appears correctly and the embedded calendar loads with available times. Attempt to book an appointment to ensure the entire scheduling process functions seamlessly.

🔥 Pro Tip

Always test your pop-up calendar on various devices, including desktops, tablets, and mobile phones. This ensures a consistent and responsive user experience for all your potential customers.

Troubleshooting Common Issues

⚠️ Pop-up does not appear after completing Step 1 of the order form.

Ensure the Two-Step Order Form element is correctly configured on your page. Check its settings to confirm the pop-up is enabled and correctly linked to the pop-up you edited.

⚠️ Calendar appears blank or shows no available times, even after selecting it.

Navigate to Calendars in your GoHighLevel account. Verify that the selected calendar has active schedules, assigned users, and available appointment slots properly configured.

⚠️ Calendar styling looks off, or it is not responsive on mobile devices.

Review the Custom CSS section within the calendar element settings for any conflicting code. Also, check the row and column settings within the pop-up for excessive padding or margin that might break responsiveness. Test on different screen sizes.

⚠️ Unable to select a calendar from the 'Select Calendar' dropdown.

Ensure you have at least one active calendar created under Calendars in your GoHighLevel account. If no calendars exist, create a new one first and then refresh the page builder.

⚠️ Pop-up loads, but the calendar displays an error message.

Double-check that the correct GHL Calendar type is selected for the element. Confirm that the chosen calendar is active and not archived in your GoHighLevel account. Clear your browser cache and re-test the page.

Common Mistakes to Avoid

→Forgetting to link the calendar element to an actual, active GoHighLevel calendar.
→Not configuring available slots or assigning team members to the selected calendar in GoHighLevel.
→Failing to save changes in both the pop-up editor AND the main page builder, leading to lost work.
→Overlooking mobile responsiveness when designing the pop-up, causing a poor user experience on smaller screens.
→Expecting the calendar to automatically appear in the pop-up without explicitly adding the calendar element.

Frequently Asked Questions

QCan I embed any calendar into the Two-Step Order Form pop-up?

No, you can only embed GoHighLevel calendars directly into the pop-up using the dedicated **Calendar** element. This ensures full integration with your GoHighLevel workflows and automations. Third-party calendars typically require custom code embedding, which is a more advanced method not covered by this direct integration guide.

QWhat if I want to offer multiple booking options in the pop-up?

You can add multiple **Calendar** elements to your pop-up, each linked to a different GoHighLevel calendar. Ensure you label each calendar clearly with text elements, so your customers can easily choose the correct booking option based on their needs or preferred service.

QHow do I customize the appearance of the pop-up itself, not just the calendar?

You can customize the pop-up's overall background, colors, padding, and add other elements like headlines, images, or buttons directly within the pop-up editor. Access this by clicking the **Pop-up** button in the main page builder. This allows for complete branding control of the pop-up container.

QDoes the pop-up calendar work on mobile devices?

Yes, the GoHighLevel calendar element is designed to be responsive and function well on various screen sizes. However, it is crucial to preview and test your entire funnel page and pop-up on different mobile devices to ensure optimal display, usability, and functionality for all users.

QWhat happens after a customer books an appointment through the pop-up calendar?

Once a customer successfully books an appointment through the pop-up calendar, the booking is automatically added to your GoHighLevel calendar. Any automated confirmations, reminder sequences, or workflows linked to that specific calendar will then trigger, ensuring seamless communication and follow-up with the client.

Try GoHighLevel Free

Start your 30-day GoHighLevel free trial

Everything in this guide is in your free trial. 30 days, no credit card — the platform behind 78+ revenue systems.

Start 30-Day Free Trial →

Some links are affiliate links — if you sign up we may earn a commission, at no extra cost to you. We only recommend GoHighLevel because we build on it every day.

Arsalan Zaffar

Revset Labs · Revenue Systems · 78+ GHL Builds

Arsalan writes GHL guides from real build experience — 78+ systems, $9.2M in client pipeline. Wharton, CXL & Google certified.

Connect on LinkedIn

Tags:GoHighLevelFunnelsOrder FormCalendarPop-upSchedulingAutomationMarketing