<p>Contact Form 2 (for Craft 3), still returns a JSON encoded <code>success: true</code> response on successful submission, but Craft 3 by default will only respond with JSON if <code>$request-&gt;getAcceptsJson()</code> returns <code>true</code> on a request.</p>

<p><a href="https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66" rel="nofollow noreferrer">https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66</a></p>

<p>Ultimately that ends up hitting the Yii 2 method <a href="https://www.yiiframework.com/doc/api/2.0/yii-web-request#getAcceptableContentTypes()-detail" rel="nofollow noreferrer">getAcceptableContentTypes</a> which checks the <code>$_SERVER['HTTP_ACCEPT']</code> server variable for the key <code>application/json</code>.</p>

<p>So most likely your server is not configured to return <code>application/json</code> as a valid <code>HTTP_ACCEPT</code> content-type.</p>

CC BY-SA 4.0
2018-05-08T00:17:12.410Z
2020-01-10T04:29:14.917Z
2020-01-10T04:29:14.917Z
Brad Bell
<p>This is my first Craft website, and after trying out Craft 2 I decided it would be a good idea to have move my site to Craft 3 for longevity.</p>

<p>I used to the free Contact Form plugin and managed to make AJAX work perfectly with Craft 2.</p>

<p>However the same code does not work with Craft 3.</p>

<p>I have a simple contact form at the bottom of <a href="https://haydentomas.co.uk" rel="nofollow noreferrer">https://haydentomas.co.uk</a> where the AJAX works perfectly. </p>

<p>I used exactly the same code on a Craft 3 install at <a href="https://letsdocode.com" rel="nofollow noreferrer">https://letsdocode.com</a>. The error messages come up correctly if you don't fill in the form properly, and I do get an email if it does get filled in. But I cannot make the form success message appear when it has been completed successfully.</p>

<p>On the JS I have an success:</p>

<pre><code>function(response) {
    if (response.success) {
</code></pre>

<p>Statement that holds some HTML that appears on an id and also another statement that hides the form completely.</p>

<p>This does not work and I am wondering if there is a change in Craft 3 that means I have to change the code slightly?</p>

<p>My else statement works perfectly.</p>

<p>My JS is below</p>

<pre><code>   &lt;script&gt;
    $('form').submit(function(ev) {
      // Prevent the form from actually submitting
      ev.preventDefault();
      var formData = new FormData($(this)[0]);
      // Send it to the server
      $.ajax('/', {    
        url:  '/',
        data: formData,
        type: 'POST',
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
        if (response.success) {
          document.getElementById("notice").innerHTML = '&lt;h2&gt;Success!&lt;/h2&gt;&lt;div class="row"&gt;&lt;div class="6u"&gt;&lt;img class="monkey" src="https://haydentomas.co.uk//images/monkey.svg"/&gt; &lt;/div&gt;&lt;div class="6u"&gt;&lt;p&gt;Thank you for your message&lt;/p&gt;&lt;p&gt;I will get back to you as soon as possible, usually within 24 hours&lt;/p&gt;&lt;p&gt;Talk soon! Hayden&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
          // $('form')[0].reset();
          document.getElementById("form").style.display = "none";
        } else {
            // response.error will be an object containing any validation errors that occurred, indexed by field name
            // e.g. response.error.fromName =&gt; ['From Name is required']
            document.getElementsByName('fromName')[0].placeholder='Name is required';
            document.getElementsByName('fromEmail')[0].placeholder='Email is required';
            document.getElementsByName('message')[0].placeholder='Message is required';
            }
          }
          });
      });
&lt;/script&gt;
</code></pre>

<p>My form is </p>

<pre><code>&lt;div id="form"&gt;
    &lt;form method="post" action="" accept-charset="UTF-8"&gt;
        &lt;input type="hidden" name="CRAFT_CSRF_TOKEN" value="p_O1wR-QVP9G9WpcPZ90Fl4K82X8kOvZ33FAXa7fej9HSTOMW4zC_GWWsVDAVlvkr_TjeheMVdsk15JD5C8D-CSrFP0Ehb9kCoyHF42u_37Myy_akFOwXWJprfT4KWOqpzUhWd6r0ib9QLr7G2cDBUtxDH9JgIF3alyLyHuZhZXAO_eR79zoCVniIzlieZZi0FOsLQhYQxSpOVuzLDdFAg7P2U7zQBUXSJ1dnNXapMuyTUjLcuu3sJNFLzwozOcOGqo1K9kGRSTxXU2_bF4FctCHwoxe-gXSCLBcBRDzN1s9S7c9yNWZ6etHMC_7qxNXf31luALE9sgZ9dcy92c6gJaS2xggume9EOKnd4dLNMkRmiTEZeaIXTLvsXG5yplOqvNJ6aVhhW5XXpmRzh1ayJNXFGm7zuRHxDfOjFYmaVRmP0lJEK3tNCc_yowjrcDn8A_B4Z2JnGAx2hdvViDeVuQvnVEsajowmAp__gJ_FlRrm7gPlCRyYTzJLtSTls2fnDkCoB7b-9v6FURVfpmjRSyZfGqWVgRDpBV0xVo9dRc="&gt;
        &lt;input type="hidden" name="action" value="contact-form/send"&gt;
        &lt;input type="hidden" name="redirect" value="b72e5e9e85a0ff7d840441aa540d6d32c6d554d22c025c8fc4dc8e0804c9475fcontact/thanks"&gt;

        &lt;h3&gt;&lt;label for="from-name"&gt;Your Name&lt;/label&gt;&lt;/h3&gt;
        &lt;input id="from-name" type="text" name="fromName" value=""&gt;

        &lt;h3&gt;&lt;label for="from-email"&gt;Your Email&lt;/label&gt;&lt;/h3&gt;
        &lt;input id="from-email" type="email" name="fromEmail" value=""&gt;

        &lt;h3&gt;&lt;label for="subject"&gt;Subject&lt;/label&gt;&lt;/h3&gt;
        &lt;input id="subject" type="text" name="subject" value=""&gt;

        &lt;h3&gt;&lt;label for="message"&gt;Message&lt;/label&gt;&lt;/h3&gt;
        &lt;textarea rows="10" cols="40" id="message" name="message"&gt;&lt;/textarea&gt;

        &lt;input type="submit" value="Send"&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks in advance!</p>

CC BY-SA 4.0
2018-05-05T21:40:56.313Z
We need your html in order to help you. Your Javascript seems to be "correct". I know one could inspect  it on your website but people on smartphones might help you too when you post it
Robin Schambach
CC BY-SA 4.0
2018-05-05T21:52:03.303Z
Ok, thanks. I have added the form to the post. I am pretty sure the form should work, as it does on craft2, so must be a different success message, or I have missed something!
Hayden Tomas
CC BY-SA 4.0
2018-05-05T21:54:32.420Z
As far as I can see you don't close your `</form>` and there is no `div` with id `notice` the response message from the controller still contains an attribute `success`. You can do `console.log(response)` to see what you get
Robin Schambach
<craft3><ajax><plugin-contactform>
Contact Form AJAX not working in Craft 3
# Contact Form AJAX not working in Craft 3

(Asked by: username_0 on 2018-05-05)

This is my first Craft website, and after trying out Craft 2 I decided it would be a good idea to have move my site to Craft 3 for longevity.
I used to the free Contact Form plugin and managed to make AJAX work perfectly with Craft 2.
However the same code does not work with Craft 3.
I have a simple contact form at the bottom of https://haydentomas.co.uk where the AJAX works perfectly. 
I used exactly the same code on a Craft 3 install at https://letsdocode.com. The error messages come up correctly if you don't fill in the form properly, and I do get an email if it does get filled in. But I cannot make the form success message appear when it has been completed successfully.
On the JS I have an success:
function(response) {
    if (response.success) {

Statement that holds some HTML that appears on an id and also another statement that hides the form completely.
This does not work and I am wondering if there is a change in Craft 3 that means I have to change the code slightly?
My else statement works perfectly.
My JS is below
   

My form is 

    
        
        
        

        Your Name
        

        Your Email
        

        Subject
        

        Message
        

        
    


Thanks in advance!

**Tags:** craft3, ajax, plugin-contactform

> **Comments:**
> **username_1**: We need your html in order to help you. Your Javascript seems to be "correct". I know one could inspect  it on your website but people on smartphones might help you too when you post it  
> **username_0**: Ok, thanks. I have added the form to the post. I am pretty sure the form should work, as it does on craft2, so must be a different success message, or I have missed something!  
> **username_1**: As far as I can see you don't close your `</form>` and there is no `div` with id `notice` the response message from the controller still contains an attribute `success`. You can do `console.log(response)` to see what you get  

---

## 1 answers

### Answer by username_2 on 2018-05-08. Score: 1

Contact Form 2 (for Craft 3), still returns a JSON encoded `success: true` response on successful submission, but Craft 3 by default will only respond with JSON if `$request->getAcceptsJson()` returns `true` on a request.

<https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66>

Ultimately that ends up hitting the Yii 2 method [getAcceptableContentTypes](https://www.yiiframework.com/doc/api/2.0/yii-web-request#getAcceptableContentTypes()-detail) which checks the `$_SERVER['HTTP_ACCEPT']` server variable for the key `application/json`.

So most likely your server is not configured to return `application/json` as a valid `HTTP_ACCEPT` content-type.


---

