How To Adjust Form Height On Embed Calendly Scheduling WordPress Plugin

fix embed calendly scheduling form

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:

embed calendly on wordpress

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= 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

fix embed calendly form

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.