FAQ > Booking Form Setup - Advanced Mode > Simple HTML tags

Simple HTML tags

This article explains how to use the Booking Calendar’s “Simple HTML tags” (layout tags) to structure your booking form in Advanced mode. These tags help you arrange fields into rows, columns, and other organized layouts without writing complex HTML or CSS.

What’s inside

  1. What are layout tags?
  2. The <r> row tag
  3. The <c> column tag
  4. The <l> label tag
  5. The <spacer> tag
  6. Nesting tags
  7. Styling with inline CSS
  8. Example layouts
  9. Best practices & tips

1) What are layout tags?

Layout tags are special HTML-like wrappers that Booking Calendar parses and turns into styled containers in the booking form. They let you:

  • Group fields in horizontal rows
  • Divide rows into columns
  • Add labels in a consistent style
  • Create vertical or horizontal spacing
Tip: These tags keep your form cleaner than using raw HTML tables or complicated CSS.

With this feature, you have the flexibility to design your booking form exactly as you need it. (Available in all paid versions).

2) The <r> row tag

Wraps one or more columns in a horizontal row. Typically used as the outer container for a set of columns:

<r>
  <c>[text* name]</c>
  <c>[text* secondname]</c>
</r>
  • Can hold 1–3 columns (more if your CSS allows)
  • Each column will align side by side in responsive flexbox layout

3) The <c> column tag

Contains the actual field(s) or labels inside a row. Columns are flex children of <r> and can be styled individually.

<r>
  <c style="flex:1">[calendar]</c>
  <c style="flex:1">[textarea details]</c>
</r>
Pro move: Adjust flex or width to control column sizing.

4) The <l> label tag

Wraps label text for consistent formatting across the form. Keeps labels visually aligned regardless of where you place them.

<l>First Name (required):</l><br>[text* name]
  • Can be placed inside any column
  • Helps match label font and spacing site-wide

5) The <spacer> tag

Inserts horizontal or vertical space between elements. Accepts inline CSS for sizing:

<spacer>height:20px;</spacer>
<spacer>width:40px;</spacer>
Use cases: Adding vertical space between rows, or spacing columns apart horizontally.

6) Nesting tags

You can nest layout tags to create complex structures:

<r>
  <c>
    <r>
      <c>[text first]</c>
      <c>[text last]</c>
    </r>
  </c>
  <c>[email* email]</c>
</r>
Note: Avoid over-nesting as it can make forms harder to maintain.

7) Styling with inline CSS

Each layout tag can have a style attribute to fine-tune spacing, widths, or alignment:

<c style="flex:1;padding-right:15px">[text phone]</c>
<spacer>height:15px;</spacer>
For global styling, target these tags in your theme’s CSS with their generated classes.

8) Example layouts

Two-column contact info row

<r>
  <c><l>First Name:</l><br>[text* name]</c>
  <c><l>Last Name:</l><br>[text* secondname]</c>
</r>

Calendar with sidebar

<r>
  <c style="flex:2">[calendar]</c>
  <spacer>width:20px;</spacer>
  <c style="flex:1">[cost_hint]<br>[submit "Book Now"]</c>
</r>

9) Shortcodes for "Content of booking fields data" form (located at bottom of WP Booking Calendar > Settings > Booking Form > Booking Form Fields page)

Simplified field data tag: <f>...</f>

Easily highlight field data by enclosing it within tags in the 'Content of booking fields data' section on the Booking > Settings > Form page: <f>...</f>

This will highlight the background of the field on the Booking Listing page. (All Pro Versions). For example <f>[secondname]</f>

10) Best practices & tips

  • Always start with <r> for structured content — it prevents accidental stacking issues.
  • For equal-width columns, set flex:1 on each <c>.
  • Combine <l> with <br> before the field for consistent label-to-input spacing.
  • Use <spacer> instead of empty rows or &nbsp; for cleaner markup.
  • Test on mobile to ensure columns stack correctly in narrow viewports.