getgrav / grav

Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS powered by PHP, Markdown, Twig, and Symfony
https://getgrav.org
MIT License
14.48k stars 1.4k forks source link

Ajax form in a one page return success but the email is not sent #2927

Open Mehditerranee opened 4 years ago

Mehditerranee commented 4 years ago

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 ?

Mehditerranee commented 2 years ago

I come back here and I ask my issue differently: How can I send a form submission to my email without refresh the modular page while displaying a confirmation/error message?