November 9, 2023

JetAppointment Walkthrough – Get Started With the Basics (Lesson 7)

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

This JetAppointment walkthrough will show you solutions for managing appointments directly from your website. The tutorial explores the basics of JetAppointment and its integration with JetEngine.

JetAppointment vs. JetBooking

Understanding the difference between JetAppointment and JetBooking is crucial. JetAppointment is ideal for scheduling specific time slots, such as dentist appointments or personal training sessions. On the other hand, JetBooking is better suited for day-long or multi-day reservations, like car rentals or event bookings.


Ensure you have the following installed and activated:

Configuring JetAppointment

Once you have JetAppointment and WooCommerce (if accepting payments) installed, it’s time to configure your setup. Here’s how to proceed:

  1. Initiate Setup Wizard
    Navigate to Crocoblock > JetPlugins Settings > JetAppointments > Set Up. The wizard is user-friendly and guides you through the process.
  2. Connect Your Post Types
    The first step in the wizard is to connect your post types. For example, if you’re offering classes with specific trainers, you would link to your ‘Sessions’ post type. If you have multiple trainers or providers, you can add them here as well.
    Connect Your Post Types
  3. Customize Your Fields
    JetAppointment allows you to customize the fields in your booking form. You can add essential fields like ‘Name’, ‘Email’, ‘Date’, ‘Appointment Date’, and ‘Slot’. Consider adding a ‘Notes’ section for additional client information, a ‘Phone’ field for contact purposes, and a ‘Cost’ field to integrate with WooCommerce later.
    Customize Your Fields
  4. Set Your Schedule
    Define the available days and times for appointments. You can set minimum and maximum days, time slots, and buffer times for before and after the appointments. Ensure to accommodate for warm-up or preparation time as needed.
    Set Your Schedule
  5. Manage Time Slots
    JetAppointment gives you the flexibility to create multiple time slots within a day, catering to different needs like lunch breaks or evening sessions. You can easily add or remove time slots as per your schedule.
    Manage Time Slots

By following these steps, you’ll have a functional appointment system integrated into your WordPress site, enhancing your service efficiency and user experience.

Advanced Scheduling with JetAppointment

After the initial setup, JetAppointment offers advanced features to fine-tune your scheduling system:

  1. Global Slots and Days Off
    You can define global availability for appointments and set specific days off, such as public holidays. For instance, you can block out Christmas week to ensure no bookings are made during this time.
  2. WooCommerce Integration
    Enabling WooCommerce integration is a key step if you want to accept payments for your services. This feature allows clients to pay for their appointments during the booking process.
  3. Booking Form Options
    JetAppointment gives you the choice between a single service booking form or a sample page. The single service form is tied to a specific service and reduces the number of clicks for users, while the sample page form can be placed anywhere on your site, offering flexibility.
  4. Form Placement and Management
    The forms created with JetAppointment will reside in the JetEngine forms section of your WordPress dashboard. Here, you can manage and modify the fields and their order. Remember, styling is done on the page where the form is placed.
  5. Service Capacity Management
    This feature is particularly useful if you’re running classes or sessions with limited space. You can set a capacity limit to prevent overbooking and display a capacity counter to inform clients about the remaining spots.
  6. Refine Individual Sessions
    Each session can have its specific time slots and availability, allowing you to customize the schedule for different classes or services.

By leveraging these features, you can create a robust and flexible appointment system that caters to your business needs and provides a seamless experience for your clients.

Enhancing User Experience with JetAppointment

JetAppointment not only simplifies appointment booking but also enhances the user experience with thoughtful features:

  1. Customize Labels and Navigation
    You can customize labels for days of the week and decide whether the page should auto-scroll to appointment details after a slot is selected, adding a smooth transition for users.
  2. Booking Availability
    Decide if you want to exclude slots that are booked but not paid for. This ensures you don’t overbook your capacity if payments are pending.
  3. Zoom Integration
    For classes or webinars, JetAppointment offers integration with Zoom, allowing you to connect your booking system directly to your Zoom account for seamless session creation.
  4. Automated Workflows
    Set up workflows to trigger actions like sending confirmation emails once an appointment is booked. Customize these emails with service titles, dates, and additional information to keep your clients informed.
  5. Service Capacity and Pricing
    Define the capacity for each class or session to avoid overbooking. Set the price per slot within the appointment settings for clear communication of costs.
  6. Custom Schedules
    Assign custom schedules to each service, specifying the days and times available for booking. Include buffer times before and after appointments for preparation and winding down.
  7. Booking Restrictions
    Control how far in advance users can book appointments. For example, you might limit bookings to a two-week window to manage your schedule effectively.

By utilizing these advanced settings, you provide a streamlined booking process, ensuring clients have all the information they need and can easily secure their spot in your classes or sessions.

Refining Your Appointment System with JetAppointment

With the basics in place, it’s time to refine your appointment system for individual sessions and enhance the booking forms:

  1. Individual Session Scheduling
    Customize the schedule for each session by selecting available days and setting specific hours. For example, you might have ‘Extreme Weights’ available from Monday to Wednesday, 8 AM to 5 PM, with no availability from Thursday to Sunday.
  2. Session-Specific Days Off
    In addition to global holidays, you can set days off for individual sessions. This allows for greater customization and ensures that each service’s unique schedule is respected.
  3. Form Customization
    Modify the booking form to include additional fields such as phone numbers and notes. This can be done by accessing JetEngine forms in your WordPress dashboard.
  4. Service ID and Level Selection
    For the single service booking form, there’s no need to select the service ID again as it’s already known from the single post template. However, if you want to allow clients to choose the level of service (e.g., beginner, intermediate, advanced), you can add a select field to the form.
  5. Adding Extra Fields
    If you have additional information like cost, phone, and notes, you can easily add these to your form. For instance, a ‘phone’ field can be set as required, while a ‘notes’ field can be optional for additional comments.
  6. Calculated Cost Field
    To prevent clients from entering their own price, use a calculated field for the cost. This ensures that the price is fixed and corresponds to the predefined cost of the session.

By tailoring each session and form to meet the specific needs of your services, you create a more personalized and efficient booking experience for your clients.

Finalizing Your JetAppointment Setup

With the core configuration complete, it’s time to finalize your JetAppointment setup to ensure a smooth operation:

  1. Dynamic Cost Calculation
    Set up a dynamic cost field in your form to automatically fetch the correct price for each session using macros. This ensures consistency and prevents users from entering incorrect amounts.
  2. Form Field Management
    Add a ‘name’ field to your form if it wasn’t included initially. Ensure all necessary fields like ‘service ID’, ‘user email’, ‘appointment date’, and ‘name’ are present and marked as required where appropriate.
  3. Post-Submission Actions
    Define what happens after a form submission. Typically, the appointment will be inserted into the JetAppointment database. You can also add additional actions like sending confirmation emails or redirecting to a thank page.
  4. Email Notifications
    Customize the email notifications for both the admin and the client. Define the content of the emails, ensuring they include all relevant appointment details.
  5. WooCommerce Integration
    Adjust the WooCommerce mapping fields to ensure that the cost and user details are correctly passed through during the booking process.
  6. Additional Redirect Options
    Set up a redirect action to take users to a thank you page or promotional page after booking. This can enhance the user experience and provide additional engagement opportunities.
  7. MailChimp or Active Campaign Integration
    If desired, connect your form to a MailChimp or Active Campaign list to add appointments to your mailing list automatically.

By meticulously refining each aspect of the JetAppointment plugin, you create a seamless and professional booking experience that can handle the nuances of your service offerings.

Implementing the Appointment Form in Your Template

With the appointment form configured, the final step is to implement it into your WordPress site’s single post template:

  1. Form Placement
    Decide where to place the form on your page. You can choose to insert it above or below existing elements, in a sidebar, or even in a hero banner for visibility.
  2. Elementor Integration
    Use Elementor to add the form widget to your template. Ensure you select the correct form from the list—naming your forms descriptively can help avoid confusion.
  3. Styling the Form
    Adjust the form’s appearance with Elementor’s styling options. Set margins for spacing, choose between a column or row layout, and customize the typography and color scheme to match your site’s design.
  4. Field Customization
    Review the fields in your form. If any labels or field names are not to your liking, you can go back and modify them in JetEngine forms.
  5. Submission Behavior
    Decide if you want the form to submit via AJAX (without reloading the page) or if you prefer a full page reload upon submission. AJAX submissions typically offer a smoother user experience.
  6. Responsive Design
    Ensure your form looks good on all devices by adjusting the width and responsiveness settings. Consider how the form will appear on mobile screens and make adjustments as needed.
  7. User Feedback
    Configure the success and error messages that users will see after submitting the form. These should be clear and inform the user of the next steps or any issues with their submission.

By integrating the appointment form into your site with attention to detail and design, you create an intuitive and efficient booking process that enhances user engagement and satisfaction.

Optimizing the Appointment Form Experience

The final touches to your appointment form can make a significant difference in usability and aesthetics:

  1. Button Styling
    Position the ‘Book Now’ button to the right to indicate progression, and add a hover effect with a color change to make it interactive.
  2. Calendar Customization
    Adjust the appointment calendar’s width and padding to fit your design. Ensure that the calendar is neither too narrow nor excessively wide.
  3. Slot Appearance
    Style the time slot selections for clarity. Remove unnecessary padding and margins, and consider adding borders for definition.
  4. Form Feedback
    Provide immediate visual feedback when a date is selected. Ensure the slots appear in a clean and organized manner, and adjust the spacing to prevent a cluttered look.
  5. Capacity Indicators
    If your sessions have a capacity limit, make sure this is clearly indicated next to the time slots.
  6. Form Submission
    Confirm the form’s submission messages are clear and inform the user of successful submission or any errors.
  7. Page Redirection
    After booking, guide the user to the checkout page or another relevant page to continue their journey on your site.
  8. Payment Integration
    If using direct bank transfers, PayPal, Stripe, or other payment methods, ensure the transition to payment is seamless and secure.

By refining these elements, you ensure that your appointment form is not only functional but also provides a positive experience that encourages users to complete their bookings.

JetAppointment Walkthrough – Conclusion

In conclusion, JetAppointment by Crocoblock is a powerful tool for WordPress users looking to simplify and enhance their booking processes. We’ve explored the step-by-step setup of JetAppointment, delved into the nuances of form customization, and highlighted the importance of a user-friendly interface. By integrating this plugin, businesses can offer a streamlined booking experience, complete with automated workflows, dynamic scheduling, and seamless payment options.

As we’ve seen, the key to a successful appointment system lies in the details—from the placement of the booking form to the styling of buttons and slots. With JetAppointment, you have the flexibility to create a tailored booking solution that meets the unique demands of your services and provides your clients with an intuitive and hassle-free way to engage with your business.

Whether you’re scheduling one-on-one appointments or managing class capacities, JetAppointment equips you with the tools to manage your bookings efficiently and effectively. Embrace this plugin to unlock new potentials for your business, enhance client satisfaction, and streamline your administrative workflow.

Remember, the true power of JetAppointment lies in its ability to adapt to your business needs, ensuring that your booking system is as unique as the services you offer.

Required Resources

WooCommerce Logo
Free Options
JetAppointment Logo
Payment required
JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
JetAppointment Walkthrough – Get Started With the Basics (Lesson 7)
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.