Formularfelder

Buchungsformular erweitern

PRO-Funktion

Benutzerdefinierte Formularfelder erfordern einen Professional-Plan.

Übersicht

Mit der fields-Option können Sie das Buchungsformular um zusätzliche Felder erweitern. Alle Felder unterstützen Lokalisierung und Input-Validierung.

Standard-Felder

timum benötigt einige Felder für die Funktionalität und bietet optionale Standardfelder:

Feld	Typ	Pflicht
`firstName`	text	Ja
`lastName`	text	Ja
`email`	email	Ja
`phone`	tel	Optional
`message`	textarea	Optional
`agbs`	checkbox	Konfigurierbar

Custom Fields hinzufügen

Einfaches Custom Fieldjavascript

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

Feldtypen

Typ	Beschreibung
`text`	Einzeiliges Textfeld
`textarea`	Mehrzeiliges Textfeld
`email`	E-Mail-Feld mit Validierung
`tel`	Telefon-Feld
`number`	Numerisches Feld
`checkbox`	Einzelne Checkbox
`select`	Dropdown-Auswahl

Feld-Eigenschaften

Eigenschaft	Typ	Beschreibung
`type`	string	Feldtyp (text, textarea, email, etc.)
`required`	boolean	Pflichtfeld
`defaultValue`	string	Vorausgefüllter Wert
`options`	array	Für select: Auswahloptionen
`pattern`	string	Regex für Validierung
`minLength`	number	Minimale Zeichenanzahl
`maxLength`	number	Maximale Zeichenanzahl

Umfangreiches Beispiel

Mehrere Custom Fieldsjavascript

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    // Textfeld mit Validierung
    companyName: {
      type: 'text',
      required: true,
      minLength: 2,
      maxLength: 100
    },

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

    // Numerisches Feld
    participants: {
      type: 'number',
      required: false,
      defaultValue: '1'
    },

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

    // Mehrzeiliges Textfeld
    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

Die Werte der Custom Fields werden in den Callbacks mitgeliefert:

Custom Field Datenjavascript

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);

      // Daten an eigenes System senden
      fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }
  }
});

Custom Values als Message senden

Mit sendCustomValuesInMessage werden alle Custom Field Werte als kommaseparierter String an das Backend gesendet:

Als Message sendenjavascript

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

// Im Backend wird gespeichert:
// message: "Firmenname: Muster GmbH, Abteilung: Vertrieb"

Validierung mit Pattern

Regex Validierungjavascript

fields: {
  postalCode: {
    type: 'text',
    required: true,
    pattern: '^[0-9]{5}$' // Deutsche PLZ
  },
  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)'
  }
}