Campi del modulo

Estenda il modulo di prenotazione di BookingJs con campi personalizzati: configuri i tipi di campo, la convalida dei campi obbligatori, i pattern regex e i valori predefiniti.

Funzione PRO:

Estenda il modulo di prenotazione di BookingJs con l'opzione fields per aggiungere campi aggiuntivi, incluse la localizzazione e la convalida degli input. Disponibile nei piani Professional – Visualizzi i piani.

Panoramica

Con l'opzione fields può estendere il modulo di prenotazione con campi aggiuntivi. Tutti i campi supportano la localizzazione e la convalida degli input.

Campi predefiniti

timum richiede alcuni campi per il funzionamento e offre campi predefiniti opzionali:

Campo	Tipo	Obbligatorio
`firstName`	text	Sì
`lastName`	text	Sì
`email`	email	Sì
`phone`	tel	Opzionale
`message`	textarea	Opzionale
`agbs`	checkbox	Configurabile

Aggiungere campi personalizzati

Campo personalizzato semplice

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

Tipi di campo

Tipo	Descrizione
`text`	Campo di testo a riga singola
`textarea`	Campo di testo multiriga
`email`	Campo e-mail con convalida
`tel`	Campo telefono
`number`	Campo numerico
`checkbox`	Singola casella di controllo
`select`	Selezione a discesa

Proprietà dei campi

Proprietà	Tipo	Descrizione
`type`	string	Tipo di campo (text, textarea, email, ecc.)
`required`	boolean	Campo obbligatorio
`defaultValue`	string	Valore precompilato
`options`	array	Per select: opzioni di selezione
`pattern`	string	Regex per la convalida
`minLength`	number	Numero minimo di caratteri
`maxLength`	number	Numero massimo di caratteri

Esempio completo

Più campi personalizzati

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    // Campo di testo con convalida
    companyName: {
      type: 'text',
      required: true,
      minLength: 2,
      maxLength: 100
    },

    // Selezione a discesa
    appointmentType: {
      type: 'select',
      required: true,
      options: ['erstbesichtigung', 'zweitbesichtigung', 'beratung']
    },

    // Campo numerico
    participants: {
      type: 'number',
      required: false,
      defaultValue: '1'
    },

    // Casella di controllo
    newsletter: {
      type: 'checkbox',
      required: false,
      defaultValue: 'false'
    },

    // Campo di testo multiriga
    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?'
    }
  }
});

Campi personalizzati nei callback

I valori dei campi personalizzati vengono inclusi nei callback:

Dati del campo personalizzato

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

      // Inviare i dati al proprio sistema
      fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }
  }
});

Invio dei valori personalizzati come messaggio

Con sendCustomValuesInMessage, tutti i valori dei campi personalizzati vengono inviati al backend come stringa separata da virgole:

Inviato come messaggio

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

// Viene salvato nel backend come:
// message: "Nome azienda: Esempio GmbH, Reparto: Vendite"

Convalida con pattern

Convalida regex

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