Несколько предварительных условий:
Настройте metafields_schema.yml, чтобы включить необходимую информацию для отправки электронных писем:
smtp_settings:
label: Outgoing Email
fields:
server:
label: SMTP Server
type: string
localized: false
username:
label: Username
type: string
localized: false
password:
label: Password
type: string
localized: false
port:
label: Port
type: string
hint: TLS
localized: false
Настройте шаблон электронной почты:
email-template.liquid :
<p>Dear {{ entryData.first_name }},</p>
<!-- include form submission data via entryData.form_field_name -->
Если условие использования Google reCAPTCHA удалено, задача становится относительно простой.
Мы «просто» передаем данные формы на настраиваемую страницу, где отправляем электронное письмо и создаем запись содержимого, используя API действий.
Настройте следующим образом:
Вручную создайте форму для сбора данных типа контента. Обратите внимание, что действие формы указывает на настраиваемую страницу:
<form method="POST" enctype="multipart/form-data" class="form" action="{% path_to 'page-with-send-email-and-create-content-entry-action' %}">
<!-- form fields here -->
</form>
<script defer src="{{ 'form-submit.js' | javascript_url }}"></script>
Отправьте форму с помощью AJAX:
отправка формы. js:
$('.form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
// error handling functions removed for brevity
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
dataType: 'json',
success: function(data) {
console.log('Success:', data);
},
error: function(xhr, status, error) {
console.log('Status:', status);
console.log('Error:', error);
var errors = jQuery.parseJSON(xhr.responseText).errors;
console.log(errors);
for (error in errors) {
myError = error;
console.log(myError);
}
}
});
});
Отправьте электронное письмо и создайте запись типа контента с помощью API действий:
page-with-send-email-and-create-content-entry-action.liquid :
{% action "send email and create content type entry" %}
var SMTPsettings = getProp('site').metafields.smtp_settings;
var entryData = getProp('params'); // params holds the data passed to the page via AJAX
// save entryData into a Liquid variable to be called in the Email Template
setProp('entryData',entryData);
sendEmail({
to: formData.email_address, // must match the name attribute of the field used to collect the email address
from: SMTPsettings.username,
subject: '[Email Subject]',
page_handle: 'email-template', // template page for email
smtp: {
address: SMTPsettings.server,
port: SMTPsettings.port,
user_name: SMTPsettings.username,
password: SMTPsettings.password,
authentication: 'plain',
enable_starttls_auto: true
}
});
createEntry('content_entry_name', {
content_type_field_name: formData.form_field_name,
// comma-separated list - last item has no comma
});
{% endaction %}
{"success":true}
Если требуется Google reCAPTCHA, задача более сложная.
Я не верю, что есть способ вручную создать форму в Locomotive CMS с включенной Google reCAPTCHA, что означает, что вышеуказанный метод победил ' t работает.
Google reCAPTCHA доступна в Locomotive CMS через по умолчанию настройка формы типа контента:
{% model_form 'content_type_slug', class: 'form', json: true, recaptcha: true %}
// form fields here
{% endmodel_form %}
<script src="https://www.google.com/recaptcha/api.js?render={{ site.metafields.google.recaptcha_site_key }}"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('{{ site.metafields.google.recaptcha_site_key }}', {
action: 'enquiry'
})
.then(function(token) {
document.getElementById('g-recaptcha-response').value = token;
});
});
</script>
<script defer src="{{ 'form-submit.js' | javascript_url }}"></script>
Примечание: Свойство recaptcha_required необходимо установить в true в yml-файле content_type.
В этом случае мы не можем установить настраиваемый URL-адрес для действия формы. Кроме того, проверка reCAPTCHA означает, что нам нужно разрешить отправку формы и создать запись контента с помощью обычного процесса и отправить электронное письмо отдельно.
Для этого нам нужно будет получить идентификатор записи контента, созданной в форме представление. Затем мы можем запустить дополнительный запрос AJAX и передать идентификатор на настраиваемую страницу, содержащую действие отправки электронной почты. На настраиваемой странице мы будем использовать идентификатор для ссылки на запись содержимого и получения данных для заполнения электронной почты.
Настройте следующим образом:
Создайте форму с помощью метода по умолчанию, описанного выше.
Отправьте форму с помощью AJAX. После успешной отправки получите идентификатор записи контента и передайте его вторичному запросу AJAX:
отправка формы. js:
$('.form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
// error handling functions removed for brevity
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
dataType: 'json',
success: function(data) {
console.log('Success:', data);
// get the content entry ID
var entryID = data._id;
// set up the data to be sent in the correct format
var newData = 'id=' + entryID;
// set up our secondary AJAX request
function sendEmail() {
$.ajax({
type: 'POST',
url: 'page-with-send-email-action',
data: newData,
dataType: 'json',
success: function(data) {
console.log('Success:', data);
},
error: function(xhr, status, error) {
console.log('Status:', status);
console.log('Error:', error);
var errors = jQuery.parseJSON(xhr.responseText).errors;
console.log(errors);
for (error in errors) {
myError = error;
console.log(myError);
}
}
});
}
sendEmail();
showSuccess();
},
error: function(xhr, status, error) {
console.log('Status:', status);
console.log('Error:', error);
var errors = jQuery.parseJSON(xhr.responseText).errors;
console.log(errors);
for (error in errors) {
myError = error;
console.log(myError);
showError();
}
}
});
});
Найдите отправленную запись содержимого и отправьте электронное письмо с помощью API действий:
page-with-send-email-action.liquid:
{% action "send email" %}
var SMTPsettings = getProp('site').metafields.smtp_settings;
var entryID = getProp('params').id;
var entryData = findEntry('content_type_slug', entryID);
// save entryData into a Liquid variable to be called in the Email Template
setProp('entryData',entryData);
sendEmail({
to: entryData.email_address,
from: SMTPsettings.username,
subject: '[Email Subject]',
page_handle: 'email-template',
smtp: {
address: SMTPsettings.server,
port: SMTPsettings.port,
user_name: SMTPsettings.username,
password: SMTPsettings.password,
authentication: 'plain',
enable_starttls_auto: true
}
});
{% endaction %}
{"success":true}