Embed Calendly is a WordPress plugin that allows you to easily add Calendly form to your WordPress pages. By default, when you use the inline embedding form, the height might look something like this:
The Calendly form frame is not completely visible, and it looks like the height is fixed.
How To Fix Calendly Scheduling Form Height
In order to fix this and adjust the height of the scheduling form, ensure you have the latest version of the embed Calendly plugin installed, and follow the steps below.
1. Add style class option
Add style_class=emcs_form option to the shortcode so it becomes something like this:
[calendly type=1 url=https://example.com style_class=emcs_form]
The style_class=emcs_form references a CSS class emcs_form. The emcs_form class is where we’d write the CSS rules to customize our embed form. To create this class, we can either use a custom CSS plugin, or we can use the additional CSS feature on WordPress customizer page.
2. Using WordPress customizer to add custom CSS
Go to Dashboard > Appearance > Customizer > Additional CSS and paste css below
.emcs_form {
height: 900px;
}
Now save the changes, click publish, and refresh the scheduling page. If you don’t see any changes, clear your browser’s cache, reload the page and the form height will be fixed now.
3. Alternative: Using a custom CSS plugin to customize Calendly embed form
Download and install Simple Custom CSS plugin, activate it, and go to Dashboard > Appearance > Custom CSS, and then paste the same CSS above.
.emcs_form {
height: 900px;
}
Now save the changes and reload the page, the form frame will be completely visible now. Don’t forget to clear your browser cache if you don’t see any changes.
