Campos del formulario

Amplíe el formulario de reserva de BookingJs con campos personalizados: configure tipos de campo, validación de campos obligatorios, patrones regex y valores predeterminados.

Función PRO:

Amplíe el formulario de reserva de BookingJs con la opción fields para añadir campos adicionales, incluida la localización y la validación de entradas. Disponible en los planes Professional – Ver tarifas.

Resumen

Con la opción fields, puede ampliar el formulario de reserva con campos adicionales. Todos los campos admiten localización y validación de entradas.

Campos predeterminados

timum necesita algunos campos para su funcionamiento y ofrece campos predeterminados opcionales:

Campo	Tipo	Obligatorio
`firstName`	text	Sí
`lastName`	text	Sí
`email`	email	Sí
`phone`	tel	Opcional
`message`	textarea	Opcional
`agbs`	checkbox	Configurable

Añadir campos personalizados

Campo personalizado simple

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

Tipos de campo

Tipo	Descripción
`text`	Campo de texto de una línea
`textarea`	Campo de texto multilínea
`email`	Campo de correo electrónico con validación
`tel`	Campo de teléfono
`number`	Campo numérico
`checkbox`	Casilla de verificación única
`select`	Selección desplegable

Propiedades de los campos

Propiedad	Tipo	Descripción
`type`	string	Tipo de campo (text, textarea, email, etc.)
`required`	boolean	Campo obligatorio
`defaultValue`	string	Valor prellenado
`options`	array	Para select: opciones de selección
`pattern`	string	Regex para validación
`minLength`	number	Número mínimo de caracteres
`maxLength`	number	Número máximo de caracteres

Ejemplo completo

Varios campos personalizados

timum.init({
  ref: 'ihre-ressourcen-referenz',
  fields: {
    // Campo de texto con validación
    companyName: {
      type: 'text',
      required: true,
      minLength: 2,
      maxLength: 100
    },

    // Selección desplegable
    appointmentType: {
      type: 'select',
      required: true,
      options: ['erstbesichtigung', 'zweitbesichtigung', 'beratung']
    },

    // Campo numérico
    participants: {
      type: 'number',
      required: false,
      defaultValue: '1'
    },

    // Casilla de verificación
    newsletter: {
      type: 'checkbox',
      required: false,
      defaultValue: 'false'
    },

    // Campo de texto multilínea
    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?'
    }
  }
});

Campos personalizados en los callbacks

Los valores de los campos personalizados se incluyen en los callbacks:

Datos de campo personalizado

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

      // Enviar los datos a su propio sistema
      fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }
  }
});

Envío de valores personalizados como mensaje

Con sendCustomValuesInMessage, todos los valores de los campos personalizados se envían al backend como una cadena separada por comas:

Enviado como mensaje

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

// Se almacena en el backend como:
// message: "Nombre de la empresa: Ejemplo GmbH, Departamento: Ventas"

Validación con pattern

Validación regex

fields: {
  postalCode: {
    type: 'text',
    required: true,
    pattern: '^[0-9]{5}$' // Código postal alemán
  },
  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)'
  }
}