Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-31T16:51:36.057Z
Answers.LastActivityDate: 2017-07-31T16:51:36.057Z
Answers.UserDisplayName: SteveO
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-09T12:48:32.883Z
Answers.LastActivityDate: 2020-01-09T12:48:32.883Z
Answers.UserDisplayName: Piotr Pogorzelski
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-10T03:59:27.927Z
Comments.Text: 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.
Comments.UserDisplayName: Lindsey D
Tags: <emails><ajax><plugin-contactform>
Title: How to do an ajax submission to Craft Contact Form with attachments using FormData?
ThreadText: # 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
  
  ```
  <form id="application-form" class="content-block-lg" method="post" action="" accept-charset="utf-8" enctype="multipart/form-data">
      <div class="grid-container">
          <div class="grid-parent grid-sm-90 prefix-sm-5">
              {{ getCsrfInput() }}
              <input type="hidden" name="action" value="contactForm/sendMessage">
              <input type="hidden" name="fromEmail" value="no-reply@example.com">
              <input type="hidden" name="subject" value="Application Form">
  
              <input type="text" id="address" name="address">
              <div class="grid-sm-50 content-block">
                  <input type="text" name="message[Name]" placeholder="Name">
              </div>
              <div class="grid-sm-50 content-block">
                  <input type="text" name="message[EmailOrPhone]" placeholder="Email or Phone">
              </div>
              <div class="grid-sm-100 content-block">
                  <textarea name="message[body]" rows="3" placeholder="Tell us about you"></textarea>
              </div>
              <div class="grid-sm-100 content-block">
                  <input type="text" name="message[LinkToOnlinePortfolio]" placeholder="link to online portfolio">
              </div>
              <div class="grid-sm-100 stripe-md actions">
                  <span>Upload a pdf of...</span>
                  <input id="resume" type="file" placeholder="resume">
                  <input id="portfolio" type="file" placeholder="portfolio">
                  <span>
                      <a class="btn-file" href="#resume">resume</a>
                      <a class="btn-file" href="#portfolio">portfolio</a>
                  </span>
              </div>
              <div class="grid-sm-100 text-right actions">
                  <button class="submit" type="submit">send <i class="fa fa-spinner fa-pulse"></i></button>
                  <div class="msg-box"></div>
              </div>
          </div>
      </div>
  </form>
  
  ```
  
  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>
  
  
  ---
  
  