1. Accueil
  2. Base de connaissances
  3. Personnalisation
  4. Remplir automatiquement les champs « Nom » et « E-mail » de la notification à partir des champs personnalisés

Remplir automatiquement les champs « Nom » et « E-mail » de la notification à partir des champs personnalisés

Open User Map intègre une fonctionnalité de notification optionnelle qui permet aux utilisateurs de recevoir un e-mail lorsque la localisation qu'ils ont soumise a été validée ou publiée.

Dans certains cas, il se peut que vous recueilliez déjà le nom et l'adresse e-mail de l'utilisateur via des champs personnalisés. Pour éviter de demander aux utilisateurs de saisir deux fois les mêmes informations, vous pouvez utiliser l'extrait de code JavaScript suivant.

Le script copie les valeurs de vos champs personnalisés dans les champs de notification internes de Open User Map lorsque l'utilisateur coche la case de notification.

Pour appliquer le script à Open User Map, vous pouvez le copier-coller sous Ouvrez la carte de l'utilisateur > Paramètres > Avancés > JS personnalisé. N'oublie pas de le personnaliser.

Extrait de code JavaScript

JavaScript
(function () {
  'use strict';

  /**
   * OUM Notification Autofill
   *
   * This script copies name and email values from custom fields
   * into the internal Open User Map notification fields.
   */
  const config = {
    /**
     * Set your custom field IDs here.
     *
     * You can find these IDs in the HTML source of the form.
     * Example:
     * name="oum_location_custom_fields[1234567890]"
     */
    customFieldIds: {
      firstName: 'CUSTOM_FIELD_ID_FIRST_NAME',
      lastName: 'CUSTOM_FIELD_ID_LAST_NAME',
      email: 'CUSTOM_FIELD_ID_EMAIL',
    },

    /**
     * Set this to true if you want to hide the internal
     * notification name and email fields from the form.
     *
     * The fields will still be filled and submitted in the background.
     */
    hideNotificationFields: true,
  };

  const form = document.querySelector('#oum_add_location');

  if (!form) {
    return;
  }

  const notificationToggle = form.querySelector('#oum_location_notification');
  const notificationName = form.querySelector('#oum_location_author_name');
  const notificationEmail = form.querySelector('#oum_location_author_email');
  const notificationWrapper = form.querySelector('#oum_author');

  const firstNameField = form.querySelector(
    '[name="oum_location_custom_fields[' + config.customFieldIds.firstName + ']"]'
  );

  const lastNameField = form.querySelector(
    '[name="oum_location_custom_fields[' + config.customFieldIds.lastName + ']"]'
  );

  const emailField = form.querySelector(
    '[name="oum_location_custom_fields[' + config.customFieldIds.email + ']"]'
  );

  if (
    !notificationToggle ||
    !notificationName ||
    !notificationEmail ||
    !firstNameField ||
    !lastNameField ||
    !emailField
  ) {
    return;
  }

  if (config.hideNotificationFields && notificationWrapper) {
    notificationWrapper.style.display = 'none';
  }

  notificationName.readOnly = true;
  notificationEmail.readOnly = true;

  function getValue(field) {
    return field && field.value ? field.value.trim() : '';
  }

  function updateNotificationFields() {
    if (!notificationToggle.checked) {
      return;
    }

    const fullName = [getValue(firstNameField), getValue(lastNameField)]
      .filter(Boolean)
      .join(' ');

    notificationName.value = fullName;
    notificationEmail.value = getValue(emailField);
  }

  notificationToggle.addEventListener('change', updateNotificationFields);

  firstNameField.addEventListener('input', updateNotificationFields);
  lastNameField.addEventListener('input', updateNotificationFields);
  emailField.addEventListener('input', updateNotificationFields);

  form.addEventListener('submit', updateNotificationFields);
})();

Configuration

Seule la section de configuration située en haut de l'extrait de code doit être modifiée.

Remplacez ces valeurs par les identifiants de vos propres champs personnalisés :

JavaScript
customFieldIds: {
  firstName: 'CUSTOM_FIELD_ID_FIRST_NAME',
  lastName: 'CUSTOM_FIELD_ID_LAST_NAME',
  email: 'CUSTOM_FIELD_ID_EMAIL',
},

Par exemple :

JavaScript
customFieldIds: {
  firstName: '1782165049671',
  lastName: '1782165779886',
  email: '1782165793135',
},

Vous pouvez trouver l'identifiant du champ personnalisé dans le code source HTML du formulaire. Recherchez un champ de saisie similaire à celui-ci :

HTML
<input name="oum_location_custom_fields[1782165793135]">

Dans cet exemple, l'ID du champ personnalisé est :

1782165793135

Masquer les champs de notification internes

Par défaut, Open User Map affiche ses propres champs « Nom de la notification » et « E-mail » lorsque l'option de notification est activée.

Si vous collectez déjà le nom et l'adresse e-mail via des champs personnalisés, vous souhaiterez peut-être masquer ces champs internes.

Pour les masquer, utilisez :

JavaScript
hideNotificationFields: true,

Pour qu'ils restent visibles, utilisez :

JavaScript
hideNotificationFields: false,

Même lorsque les champs sont masqués, ils sont tout de même remplis automatiquement et envoyés en arrière-plan.

Cet article vous a-t-il été utile ?

Articles connexes

Besoin d'aide ?

Vous ne trouvez pas la réponse que vous cherchez ?
Contact Support

FR