Form Fields

Extend BookingJs's booking form with custom fields: configure field types, required-field validation, regex patterns and default values.

PRO feature:

Extend BookingJs's booking form with the fields option to add extra fields – including localization and input validation. Available in the Professional plans – View plans.

Overview

With the fields option, you can extend the booking form with extra fields. All fields support localization and input validation.

Default fields

timum requires some fields for functionality and offers optional default fields:

Field	Type	Required
`firstName`	text	Yes
`lastName`	text	Yes
`email`	email	Yes
`phone`	tel	Optional
`message`	textarea	Optional
`agbs`	checkbox	Configurable

Adding custom fields

Simple custom field

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    companyName: {
      type: 'text',
      required: true
    }
  },
  localization: {
    de: {
      field_companyName_label: 'Firmenname',
      field_companyName_placeholder: 'Ihre Firma GmbH'
    }
  }
});

Field types

Type	Description
`text`	Single-line text field
`textarea`	Multi-line text field
`email`	Email field with validation
`tel`	Phone field
`number`	Numeric field
`checkbox`	Single checkbox
`select`	Dropdown selection

Field properties

Property	Type	Description
`type`	string	Field type (text, textarea, email, etc.)
`required`	boolean	Required field
`defaultValue`	string	Pre-filled value
`options`	array	For select: selection options
`pattern`	string	Regex for validation
`minLength`	number	Minimum character count
`maxLength`	number	Maximum character count

Comprehensive example

Multiple custom fields

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    // Text field with validation
    companyName: {
      type: 'text',
      required: true,
      minLength: 2,
      maxLength: 100
    },

    // Dropdown selection
    appointmentType: {
      type: 'select',
      required: true,
      options: ['erstbesichtigung', 'zweitbesichtigung', 'beratung']
    },

    // Numeric field
    participants: {
      type: 'number',
      required: false,
      defaultValue: '1'
    },

    // Checkbox
    newsletter: {
      type: 'checkbox',
      required: false,
      defaultValue: 'false'
    },

    // Multi-line text field
    notes: {
      type: 'textarea',
      required: false,
      maxLength: 500
    }
  },
  localization: {
    de: {
      field_companyName_label: 'Firmenname',
      field_companyName_placeholder: 'Ihre Firma',
      field_companyName_error: 'Bitte geben Sie Ihren Firmennamen an',

      field_appointmentType_label: 'Art des Termins',
      field_appointmentType_option_erstbesichtigung: 'Erstbesichtigung',
      field_appointmentType_option_zweitbesichtigung: 'Zweitbesichtigung',
      field_appointmentType_option_beratung: 'Beratungsgespräch',

      field_participants_label: 'Anzahl Teilnehmer',

      field_newsletter_label: 'Newsletter abonnieren',

      field_notes_label: 'Anmerkungen',
      field_notes_placeholder: 'Haben Sie besondere Wünsche?'
    }
  }
});

Custom fields in callbacks

The values of the custom fields are included in the callbacks:

Custom field data

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    companyName: { type: 'text', required: true }
  },
  callbacks: {
    createBookingSuccessful: ({ data }) => {
      console.log('Firma:', data.companyName);
      console.log('Name:', data.firstName, data.lastName);
      console.log('E-Mail:', data.email);

      // Send data to your own system
      fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }
  }
});

Sending custom values as a message

With sendCustomValuesInMessage, all custom field values are sent to the backend as a comma-separated string:

Sent as a message

timum.init({
  ref: 'ihre-ressourcen-referenz',
  sendCustomValuesInMessage: true,
  fields: {
    companyName: { type: 'text' },
    department: { type: 'text' }
  }
});

// Stored in the backend as:
// message: "Company name: Example GmbH, Department: Sales"

Validation with pattern

Regex validation

fields: {
  postalCode: {
    type: 'text',
    required: true,
    pattern: '^[0-9]{5}$' // German postal code
  },
  phoneNumber: {
    type: 'tel',
    pattern: '^\\+?[0-9\\s-]{10,}$'
  }
},
localization: {
  de: {
    field_postalCode_label: 'Postleitzahl',
    field_postalCode_error: 'Bitte geben Sie eine gültige PLZ ein (5 Ziffern)'
  }
}