<p>I have it working now using this:</p>

<pre><code>$('#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) {
      alert('Thank You. Your message has been sent');
    } 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']
            alert('An error occurred. Please try again.');
          }
        }
      });
});
</code></pre>

CC BY-SA 3.0
2017-07-31T16:51:36.057Z
2017-07-31T16:51:36.057Z
SteveO
<p>Here's my article about building AJAX-based contact form for Craft CMS that uses formData:</p>

<p><a href="http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms?s=s" rel="nofollow noreferrer">http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms?s=s</a></p>

CC BY-SA 4.0
2020-01-09T12:48:32.883Z
2020-01-09T12:48:32.883Z
Piotr Pogorzelski
<p>JS</p>

<pre><code>.on('submit', '#application-form', function(e) {
    e.preventDefault();

    var form = $(this),
        formData = new FormData(form[0]),
        msgBox = form.find('.msg-box'),
        submitBtn = form.find('.submit'),
        loader = submitBtn.find('.fa');


    submitBtn.prop('disabled', true);
    loader.css('display', 'inline-block');

    formData.append('attachment[]', form.find('#resume')[0].files[0]);
    formData.append('attachment[]', form.find('#portfolio')[0].files[0]);

    $.ajax({
        url: '/',
        type: 'post',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(data) {
            msgBox.fadeOut(function() {
                if(data.success) {
                    $(this).text( 'Your application has been submitted!').removeClass('error');
                    form[0].reset();
                } else {
                    $(this).text('An error occurred. Please try again.').addClass('error');
                }

                submitBtn.removeAttr('disabled');
                loader.removeAttr('style');

                msgBox.fadeIn();
            });
        }
    });
})
</code></pre>

<p>HTML</p>

<pre><code>&lt;form id="application-form" class="content-block-lg" method="post" action="" accept-charset="utf-8" enctype="multipart/form-data"&gt;
    &lt;div class="grid-container"&gt;
        &lt;div class="grid-parent grid-sm-90 prefix-sm-5"&gt;
            {{ getCsrfInput() }}
            &lt;input type="hidden" name="action" value="contactForm/sendMessage"&gt;
            &lt;input type="hidden" name="fromEmail" value="no-reply@example.com"&gt;
            &lt;input type="hidden" name="subject" value="Application Form"&gt;

            &lt;input type="text" id="address" name="address"&gt;
            &lt;div class="grid-sm-50 content-block"&gt;
                &lt;input type="text" name="message[Name]" placeholder="Name"&gt;
            &lt;/div&gt;
            &lt;div class="grid-sm-50 content-block"&gt;
                &lt;input type="text" name="message[EmailOrPhone]" placeholder="Email or Phone"&gt;
            &lt;/div&gt;
            &lt;div class="grid-sm-100 content-block"&gt;
                &lt;textarea name="message[body]" rows="3" placeholder="Tell us about you"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;div class="grid-sm-100 content-block"&gt;
                &lt;input type="text" name="message[LinkToOnlinePortfolio]" placeholder="link to online portfolio"&gt;
            &lt;/div&gt;
            &lt;div class="grid-sm-100 stripe-md actions"&gt;
                &lt;span&gt;Upload a pdf of...&lt;/span&gt;
                &lt;input id="resume" type="file" placeholder="resume"&gt;
                &lt;input id="portfolio" type="file" placeholder="portfolio"&gt;
                &lt;span&gt;
                    &lt;a class="btn-file" href="#resume"&gt;resume&lt;/a&gt;
                    &lt;a class="btn-file" href="#portfolio"&gt;portfolio&lt;/a&gt;
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="grid-sm-100 text-right actions"&gt;
                &lt;button class="submit" type="submit"&gt;send &lt;i class="fa fa-spinner fa-pulse"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;div class="msg-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>The problem I am getting is that, with the code above, submitting the form, I get a response of the entire Homepage html.  I've tried using the url set in the action hidden input, but that just gives me a 404 response.  It's like it can't see the "Action" being passed in because it's in FormData?</p>

CC BY-SA 3.0
2016-09-10T03:59:27.927Z
Would you mind streamlining these code examples a little bit (ie: removing extraneous classes and DOM elements), and perhaps add a few sentences describing what kind of behavior you're seeing vs. what you're expecting? That would greatly help others to hone in on what the problem may be.
Lindsey D
<emails><ajax><plugin-contactform>
How to do an ajax submission to Craft Contact Form with attachments using FormData?
# How to do an ajax submission to Craft Contact Form with attachments using FormData?

(Asked by: username_0 on 2016-09-10)

JS
.on('submit', '#application-form', function(e) {
    e.preventDefault();

    var form = $(this),
        formData = new FormData(form[0]),
        msgBox = form.find('.msg-box'),
        submitBtn = form.find('.submit'),
        loader = submitBtn.find('.fa');


    submitBtn.prop('disabled', true);
    loader.css('display', 'inline-block');

    formData.append('attachment[]', form.find('#resume')[0].files[0]);
    formData.append('attachment[]', form.find('#portfolio')[0].files[0]);

    $.ajax({
        url: '/',
        type: 'post',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(data) {
            msgBox.fadeOut(function() {
                if(data.success) {
                    $(this).text( 'Your application has been submitted!').removeClass('error');
                    form[0].reset();
                } else {
                    $(this).text('An error occurred. Please try again.').addClass('error');
                }

                submitBtn.removeAttr('disabled');
                loader.removeAttr('style');

                msgBox.fadeIn();
            });
        }
    });
})

HTML

    
        
            {{ getCsrfInput() }}
            
            
            

            
            
                
            
            
                
            
            
                
            
            
                
            
            
                Upload a pdf of...
                
                
                
                    resume
                    portfolio
                
            
            
                send 
                
            
        
    


The problem I am getting is that, with the code above, submitting the form, I get a response of the entire Homepage html.  I've tried using the url set in the action hidden input, but that just gives me a 404 response.  It's like it can't see the "Action" being passed in because it's in FormData?

**Tags:** emails, ajax, plugin-contactform
> **Comments:**
> **username_1**: Would you mind streamlining these code examples a little bit (ie: removing extraneous classes and DOM elements), and perhaps add a few sentences describing what kind of behavior you're seeing vs. what you're expecting? That would greatly help others to hone in on what the problem may be.  

---

## 2 answers

### Answer by username_2 on 2017-07-31. Score: 3 | Accepted answer

I have it working now using this:
$('#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) {
      alert('Thank You. Your message has been sent');
    } else {
            // response.error will be an object containing any validation errors that occurred, indexed by field name
            // e.g. response.error.fromName => ['From Name is required']
            alert('An error occurred. Please try again.');
          }
        }
      });
});


---

### Answer by username_3 on 2020-01-09. Score: 0

Here's my article about building AJAX-based contact form for Craft CMS that uses formData:

<http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms?s=s>


---

