Open User Map includes an optional notification feature that allows users to receive an email when their submitted location has been approved/published.
In some cases, you may already collect the user’s name and email address through custom fields. To avoid asking users to enter the same data twice, you can use the following JavaScript snippet.
The script copies the values from your custom fields into the internal Open User Map notification fields when the user enables the notification checkbox.
To apply the script to Open User Map you can copy and paste it under Open User Map > Settings > Advanced > Custom JS. Don’t forget to customize it.
JavaScript Snippet
(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
Only the configuration section at the top of the snippet needs to be adjusted.
Replace these values with the IDs of your own custom fields:
customFieldIds: {
firstName: 'CUSTOM_FIELD_ID_FIRST_NAME',
lastName: 'CUSTOM_FIELD_ID_LAST_NAME',
email: 'CUSTOM_FIELD_ID_EMAIL',
},For example:
customFieldIds: {
firstName: '1782165049671',
lastName: '1782165779886',
email: '1782165793135',
},You can find the custom field ID in the HTML source of the form. Look for an input field like this:
<input name="oum_location_custom_fields[1782165793135]">In this example, the custom field ID is:
1782165793135
Hide the Internal Notification Fields
By default, Open User Map shows its own notification name and email fields when the notification option is enabled.
If you already collect name and email through custom fields, you may want to hide these internal fields.
To hide them, use:
hideNotificationFields: true,To keep them visible, use:
hideNotificationFields: false,When the fields are hidden, they are still filled automatically and submitted in the background.