Hi gravists,
I recently updated a Quark based website from 1.5.x to 1.6 with a modular contact form displaying a message with an Ajax method as explained in the documentation.
The update process broke my submission with a Ooops message and I can't figure out where's the issue.
My setup is like this:
A modular "_contact" page with the minimum code:
menu: Contact
cache_enable: false
The form itself in the main modular page:
title: 'Dr DROID'
menu: Home
onpage_menu: true
body_classes: 'title-h1h2 header-dark header-transparent'
content:
items: '@self.modular'
form:
name: ajax-form
action: '/home#contact'
template: form-messages
refresh_prevention: true
fields:
-
name: sujet
label: Sujet
placeholder: 'Le sujet de votre message'
type: select
options:
1: Information
2: 'Demande de devis'
3: 'Demande de rendez-vous'
4: 'Demander un rappel'
validate:
required: true
-
name: name
label: Nom
placeholder: 'Entrer votre nom'
autocomplete: 'on'
type: text
validate:
required: true
-
name: email
label: Email
placeholder: 'Saisissez votre adresse email'
type: text
validate:
rule: email
required: true
-
name: message
label: Message
size: long
placeholder: 'Votre message'
type: textarea
validate:
required: true
buttons:
-
type: submit
value: Envoyer
process:
-
email:
from: '{{ config.plugins.email.from }}'
to:
- '{{ config.plugins.email.to }}'
- '{{ form.value.email }}'
subject: '[Feedback] {{ form.value.name|e }}'
body: '{% include ''forms/data.html.twig'' %}'
-
save:
fileprefix: feedback-
dateformat: Ymd-His-u
extension: txt
body: '{% include ''forms/data.txt.twig'' %}'
-
message: 'Votre message a bien été envoyé. Merci !'
And the mandatory Ajax code in the form.html.twig:
{% set grid_size = theme_var('grid-size') %}
{% set columns = page.header.class == 'small' ? 'col-3 col-md-4 col-sm-6' : 'col-4 col-md-6 col-sm-12' %}
<section class="section modular-contact {{ page.header.class}} bg-gray">
<section class="container {{ grid_size }}">
{{ page.content }}
<div class="col-7">
{% include "forms/form.html.twig" with { form: forms('ajax-form') } %}
</div>
<div class="modal-container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="form-result"></div>
</div>
</div>
</div>
</section>
</section>
{% block bottom %}
<script>
$(document).ready(function(){
var form = $("#ajax-form");
form.submit(function(e) {
e.preventDefault();
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
dataType: "html",
data: form.serialize(),
success: function(result) {
$("#form-result").html(result);
},
complete: function(result) {
$("html, body").animate({
scrollTop: $("#form-result").offset().top
}, 200);
}
});
});
});
</script>
{% endblock %}
This code is working perfectly in my 1.5.x copy of my site but is giving me the "Ooops" error as soon as I update to 1.6 with update of all plugins.
I don't know how to track the error as I don't see anything in the log.
How can I debug this ?
EDIT 19/06: I setup a fresh GRAV site, copied the template and the data.
For the moment, with a simple form (without action, template message and AJAX), it's working. As soon as I try to add functionality, it's giving me the Oops error.
I'll investigate a bit more.