Champs de formulaire

Étendez le formulaire de réservation de BookingJs avec des champs personnalisés : configurez les types de champs, la validation des champs obligatoires, les motifs regex et les valeurs par défaut.

Aperçu

Avec l'option fields, vous pouvez étendre le formulaire de réservation avec des champs supplémentaires. Tous les champs prennent en charge la localisation et la validation des saisies.

Champs par défaut

timum a besoin de certains champs pour son fonctionnement et propose des champs par défaut optionnels :

Ajout de champs personnalisés

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

Types de champs

Propriétés des champs

Exemple complet

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    // Champ de texte avec validation
    companyName: {
      type: 'text',
      required: true,
      minLength: 2,
      maxLength: 100
    },

    // Sélection déroulante
    appointmentType: {
      type: 'select',
      required: true,
      options: ['erstbesichtigung', 'zweitbesichtigung', 'beratung']
    },

    // Champ numérique
    participants: {
      type: 'number',
      required: false,
      defaultValue: '1'
    },

    // Case à cocher
    newsletter: {
      type: 'checkbox',
      required: false,
      defaultValue: 'false'
    },

    // Champ de texte multiligne
    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?'
    }
  }
});

Champs personnalisés dans les callbacks

Les valeurs des champs personnalisés sont transmises dans les callbacks :

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

      // Envoyer les données à votre propre système
      fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }
  }
});

Envoi des valeurs personnalisées sous forme de message

Avec sendCustomValuesInMessage, toutes les valeurs des champs personnalisés sont envoyées au backend sous forme de chaîne séparée par des virgules :

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

// Stocké dans le backend comme suit :
// message : "Nom de l'entreprise : Exemple GmbH, Département : Ventes"

Validation avec pattern

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

Sujets connexes

• Localisation
• Callbacks
• Configuration