Hey,
I use the Kirby Uniform Plugin. When sending the form with AJAX I get two brackets back. But the message is sent. Does anyone know what could be the reason for this?
routes.php:
<?php
return [
[
'pattern' => 'form-contact',
'method' => 'POST',
'action' => function () {
$form = new \Uniform\Form([
'email' => [
'rules' => ['required', 'email'],
'message' => 'E-Mail Adresse überprüfen',
],
'name' => [
'rules' => ['required'],
'message' => 'Namen überprüfen (min. 3 Zeichen)',
],
'phone' => [
'rules' => ['required'],
'message' => 'Telefonnummer überprüfen',
],
'subject' => [
'message' => 'Eingabe überprüfen.',
],
'text' => [
'message' => 'Nachricht überprüfen (min. 3 - max. 3000 Zeichen)',
]
]);
// Perform validation and execute guards.
$form->withoutFlashing()
->withoutRedirect()
->guard();
if (!$form->success()) {
// Return validation errors.
return Response::json($form->errors(), 400);
}
// If validation and guards passed, execute the action.
$form->emailAction([
'template' => 'simple',
'from' => '...',
'to' => '...,
'replyTo' => esc(get('email')),
'subject' => ' Nachricht von "' . esc(get('name')) . '" per Kontaktformular',
]);
if (!$form->success()) {
// This should not happen and is our fault.
return Response::json($form->errors(), 500);
}
$responseData = [
'success' => true,
'message' => 'Formular erfolgreich gesendet.'
];
// Return code 200 on success.
return Response::json($responseData, 200);
}
]
];
form.js:
const contactForm = {
/* eslint-disable */
cfg: {
form: '.js-form',
},
init() {
window.addEventListener('load', function () {
const form = document.querySelector('form');
if (form) {
const message = document.getElementById('message');
// cache the existing html
var messageInnerHTML = message.innerHTML;
console.log(messageInnerHTML);
var fields = {};
form.querySelectorAll('[name]').forEach(function (field) {
fields[field.name] = field;
});
// Displays all error messages and adds 'error' classes to the form fields with
// failed validation.
var handleError = function (response) {
var errors = [];
// console.log(response);
for (var key in response) {
if (!response.hasOwnProperty(key)) continue;
if (fields.hasOwnProperty(key)) fields[key].classList.add('is-invalid');
Array.prototype.push.apply(errors, response[key]);
}
message.innerHTML = errors.join('<br>');
};
var onload = function (e) {
if (e.target.status === 200) {
message.classList.remove('is-error');
message.innerHTML = messageInnerHTML;
message.classList.add('is-success');
form.classList.add('is-send');
} else {
message.classList.add('is-error');
handleError(JSON.parse(e.target.response));
}
};
var submit = function (e) {
e.preventDefault();
var request = new XMLHttpRequest();
request.open('POST', e.target.action);
request.onload = onload;
request.send(new FormData(e.target));
// console.log(request);
// Remove all 'error' classes of a possible previously failed validation.
for (var key in fields) {
if (!fields.hasOwnProperty(key)) continue;
fields[key].classList.remove('error');
}
document.querySelector('#formWrapper').remove();
};
form.addEventListener('submit', submit);
}
});
},
/* eslint-enable */
};
export default contactForm;
form.html:
<form id="contactForm" method="POST" action=".../form-contact">
<div class="o-row">
<div class="o-col-6 o-col-s-24">
<div class="a-input is-first is-invalid">
<div class="a-input__wrapper">
<div class="a-input__inner">
<input class="a-input__input has-focused" id="name" type="text" name="name" minlength="3" maxlength="50" required="" data-required="true" placeholder="">
<label class="a-input__label" for="name">Ihr Name / Firma</label>
<span class="a-input__info">Bitte geben Sie Ihren Namen / Firma ein</span>
</div>
</div>
</div>
</div>
</div>
<div class="o-row">
<div class="o-col-6 o-col-m-12">
<div class="a-input
">
<div class="a-input__wrapper">
<div class="a-input__inner">
<input class="a-input__input" id="email" type="email" name="email" required="" data-required="true" placeholder="">
<label class="a-input__label" for="email">Ihre E-Mail Adresse</label>
<span class="a-input__info">Bitte überprüfen Sie ihre E-Mail Adresse.</span>
</div>
</div>
</div>
</div>
<div class="o-col-6 o-col-m-12">
<div class="a-input
">
<div class="a-input__wrapper">
<div class="a-input__inner">
<input class="a-input__input" id="phone" type="text" name="phone" minlength="5" maxlength="30" required="" data-required="true" placeholder="">
<label class="a-input__label" for="phone">Ihre Telefonnummer</label>
<span class="a-input__info">Bitte geben Sie Ihre Telefonnummer ein.</span>
</div>
</div>
</div>
</div>
</div>
<div class="o-row">
<div class="o-col-6">
<div class="a-input
">
<div class="a-input__wrapper">
<div class="a-input__inner">
<input class="a-input__input" id="subject" type="text" name="subject" minlength="5" maxlength="30" required="" data-required="true" placeholder="">
<label class="a-input__label" for="subject">Ihr Anliegen</label>
<span class="a-input__info">Bitte geben Sie Ihr Anliegen ein.</span>
</div>
</div>
</div>
<div class="a-textarea is-root
">
<div class="a-textarea__wrapper">
<div class="a-textarea__inner">
<textarea rows="5" class="a-textarea__textarea" id="text" name="text" maxlength="3000" placeholder=""></textarea>
<label class="a-textarea__label" for="text">Ihre Nachricht</label>
<span class="a-textarea__info">Bitte geben Sie eine Nachricht ein.</span>
</div>
</div>
</div>
</div>
</div>
<div class="o-row">
<div class="o-col-6">
<div class="o-contactForm__gdpr-note">
<small>
Die <a class="no-transition" href="' ~ site.find('datenschutz').url ~ '" target="_blank" rel="noopener">Datenschutzerklärung</a> habe ich zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden.
Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt.
</small>
</div>
</div>
</div>
<input type="hidden" name="csrf_token" value="....">
<input type="text" name="website" class="uniform__potty" tabindex="-1" autocomplete="off">
<div class="o-row">
<div class="o-col-6">
<div class="a-button a-button--center a-button--primary ">
<button type="submit" name="submit" value="submit" class="a-button__button">
<span class="a-button__text">Formular absenden</span>
<span class="a-icon a-icon--long-arrow-right
a-icon--12
">
<span class="a-icon__icon">
<svg height="12" width="12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m16.078 6.164-.332.331a.562.562 0 0 0 0 .796l3.933 3.91H2.062a.562.562 0 0 0-.563.563v.469c0 .31.252.562.563.562h17.617l-3.933 3.911a.562.562 0 0 0 0 .795l.331.332c.22.22.576.22.796 0l5.459-5.437a.564.564 0 0 0 0-.796l-5.46-5.437a.562.562 0 0 0-.795 0Z"></path></svg> </span>
</span>
</button>
</div>
</div>
</div>
</form>
