company logo

Help center

All collectionsForm SkinsCalendar Form Skin [Tutorial]

Calendar Form Skin [Tutorial]

How to set up the Calendar Skin.

Jovan Stojanovic·October 9, 2026

How to set up the Calendar Skin and best practices

Calendar Skin behavior and use cases

The Calendar Skin is a calendar-first experience: the calendar can remain visible while the form is filled out. It's ideal when the goal is scheduling calls and you want the calendar to be prominent.

Calendar Skin Setup

  1. Open your form in the builder

  2. Go to the Design tab

  3. Select Calendar Skin


Styling

Use the Style tab to control the appearance of your form and calendar.

  • Pick a look under Themes (Light Mode, Dark Mode, and many more, grouped into Basic, Business, Bold, Premium and Gradients).

  • Fine-tune individual colors under Colors, including title, accent, form card and CTA button colors.


Calendar Display

Use the Settings tab to control the appearance of your form and calendar and when the calendar is shown.

  • Show Calendar Preview → a greyed-out calendar is shown on the side while the form is being filled out

  • Hide Calendar → the calendar is hidden and the form looks like a single column; the right ending (for example your calendar) is shown after the last question


Field Reveal

Control how questions appear to the user. Field Reveal appears when Question Flow is set to Vertical.

  • One at a Time → Shows a single question, guiding the user step-by-step

  • Show First X Fields → Shows several questions upfront (for example the first 3), then reveals the rest once those are filled in.

  • Show All Fields → Shows every question at once; the visitor submits them all with one Continue button.


Question Flow

Control how transitions between questions feel.

  • Horizontal (sliding) → Questions slide in step-by-step

  • Vertical (stacking) → Questions stack and progress downward


Widget Size

Adjust the widget size based on your layout and content needs:

  • small for a compact widget

  • medium for a balanced size

  • large to let the form and calendar occupy most of the screen.

info icon
The widget sizing affects both embedded ROASForms (i.e., if you embed it into your funnel or website) and self-hosted ROASForms (i.e., if you use the roasform URL).


Preview & Testing

Use the Preview button to test your setup.

Try different combinations of:

  • Field reveal types

  • Question flow styles

  • Calendar visibility

Optimization and split-testing

To determine which configuration converts best for your funnel, use built-in split testing to compare skins and settings on completion rate, qualification rate, booking rate, and qualified booking rate. If you turn on Enable Partial Submissions in Form Settings and ask for contact info (for example, email) early in your form, you will capture contact info even if users abandon the form. Enabling partial submissions will help capture significantly more leads.

Did this answer your question?
😞
😐
😁