Hi,
I am trying to make a contact form works on a one-page site using AJAX in order to avoid reloading the page.
I already made the form works without AJAX, everything is ok and the email is sent successfully.
To make my form works with AJAX, I made some modifications as you can see here in form.md file :
---
title: Contact Form
menu: Contacts
cache_enable: false
form:
refresh_prevention: true
name: contact
action: /forms/ajax-test
#template: form-messages
classes: 'g-grid cs_contact_cont-form'
fields:
name:
label: Nom
placeholder: Entrez votre prénom - nom
autocomplete: 'on'
type: text
validate:
required: true
email:
label: Email
placeholder: Entrez votre adresse e-mail
type: email
validate:
required: true
objet:
label: Objet
placeholder: Entrez l'objet de votre message
type: text
validate:
required: true
message:
label: Message
placeholder: Ecrivez votre message
type: textarea
validate:
required: true
#g-recaptcha-response:
#label: Captcha
#type: captcha
#recaptcha_not_validated: 'Captcha not valid!'
#validate:
#required: true
buttons:
submit:
type: submit
value: Envoyer
process:
#captcha: true
ip:
label: User IP Address
email:
from: '{{ config.plugins.email.from }}'
to: '{{ config.plugins.email.to }}'
subject: '[Formulaire de contacte] {{ form.value.name|e }}'
body: '{% include ''forms/data.html.twig'' %}'
save:
fileprefix: message-
dateformat: Ymd-His-u
extension: txt
body: '{% include ''forms/data.txt.twig'' %}'
reset: true
message: 'Message envoyé. Je vous contacte au plus vite.'
---
# Contactez-moi
<div id="form-result"></div>
<script>
$(document).ready(function(){
var form = $('#contact');
form.submit(function(e) {
console.log("test");
e.preventDefault();
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: 'html',
data: form.serialize(),
success: function(result, status) {
console.log(result);
console.log(status);
},
//The following is added for debugging purposes.
error: function(result) {
$('#form-result').html(result.responseText);
}
});
});
});
</script>
My folder structure is :
/pages/
01.home/
_contact
form.md
forms/
ajax-form/
form.md
So I put my action url in form.md like this :
action: /forms/ajax-test
The AJAX call is well made and returns success but despite this, no email is sent.
I also notice that I have got an infinite loop on my email server, but I don’t know why ?