title: Send email with rails 4, mail form, and ajax?
body: <p>I am working on an app that has a contact form. It is a single page app, and I am using rails on the backend, and angular (not for the form) and bootstrap on the front end. I am trying to use ajax so I do not have to refresh the page. When I just have it submit with rails (using Mailform), it looks like it is working.</p>
  
  <p>When I go into the <code>console</code> and type;</p>
  
  <pre><code>c = Contact.new(:name =&gt; "name", :email =&gt; "email@email.com", :message =&gt; "hi")
  
  c.deliver
  </code></pre>
  
  <p>In the console, I get;</p>
  
  <pre><code>Rendered vendor/bundle/gems/mail_form-1.5.0/lib/mail_form/views/mail_form/contact.erb (2.9ms)
  
  MailForm::Notifier#contact: processed outbound mail in 29.2ms
  
  Sent mail to [EMAIL] (5.1ms)
  Date: Fri, 25 Jul 2014 14:52:20 -0700
  From: Name &lt;email@email.com&gt;
  To: [EMAIL]
  Message-ID: &lt;53d2d194c8870_ec73fe2d54606d42885a@localhost.mail&gt;
  Subject: Onyx Contact Form
  Mime-Version: 1.0
  Content-Type: text/html;
   charset=UTF-8
  Content-Transfer-Encoding: 7bit
  
  &lt;h4 style="text-decoration:underline"&gt;Onyx Contact Form&lt;/h4&gt;
  
  
    &lt;p&gt;&lt;b&gt;Name:&lt;/b&gt;
    Name&lt;/p&gt;
  
    &lt;p&gt;&lt;b&gt;Email:&lt;/b&gt;
    email@email.com&lt;/p&gt;
  
    &lt;p&gt;&lt;b&gt;Message:&lt;/b&gt;
    Hi&lt;/p&gt;
  
  
  =&gt; true
  </code></pre>
  
  <p>Which looks like it is working. However, I am not sure if it is, only because I am not getting anything to my email (but maybe email doesnt send locally?). When I try to submit with ajax and press "submit" nothing happens, so I know my javascript isn't right. </p>
  
  <p>Here is the rest of my code;</p>
  
  <p><strong>index.html.erb</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;%= bootstrap_form_for @contact ||= Contact.new do, remote: true |f| %&gt;
      &lt;div class="inner"&gt;
        &lt;div class="col-md-7" id="form"&gt;
              &lt;%= f.text_field :name, :required =&gt; true, :hide_label =&gt; true, :placeholder =&gt; "Name" %&gt;
              &lt;%= f.text_field :email, :required =&gt; true, :hide_label =&gt; true, :placeholder =&gt; "Email" %&gt;
              &lt;%= f.text_area :message, size: "60x10", :required =&gt; true, :hide_label =&gt; true, :plceholder =&gt; "Hello, we'd love to work with you" %&gt;
  
              &lt;%= f.submit 'Send Message', class: 'custom-button' %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>contact.rb</strong></p>
  
  <pre><code>class Contact &lt; MailForm::Base
    attribute :name,      :validate =&gt; true
    attribute :email,     :validate =&gt; /\A([\w\.%\+\-]+)@([\w\-]+\.)+([\w]{2,})\z/i
    attribute :message
    attribute :nickname,  :captcha  =&gt; true
  
    # Declare the e-mail headers. It accepts anything the mail method
    # in ActionMailer accepts.
    def headers
      {
        :subject =&gt; "Onyx Contact Form",
        :to =&gt; "[MY_EMAIL]",
        :from =&gt; %("#{name}" &lt;#{email}&gt;)
      }
    end
  end
  </code></pre>
  
  <p><strong>contacts_controller.rb</strong></p>
  
  <pre><code>class ContactsController &lt; ApplicationController
    def new
      @contact = Contact.new
    end
  
    def create
      @contact = Contact.new(params[:contact])
      @contact.request = request
      if @contact.deliver
        flash[:notice] = 'Thank you for your message. We will contact you soon!'
        redirect_to root_url
      else
        flash.now[:error] = 'Cannot send message.'
        render :new
      end
    end
  end
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>$(function(){
      $("#form").submit(function(){
          var dataSet = $(this).serialize();
          $.ajax({
              type: "POST",
              url: $(this).attr("action"),
              data: dataSet,
              complete: function(){
                  alert("Sent!");
              },
              error: function(){
                  alert("Something went wrong!");
              }
          });
          return false;
      });
  })
  </code></pre>
  
  <p><strong>routes.rb</strong></p>
  
  <pre><code>match '/contacts', to: 'contacts#new', via: 'post'
  resources :contacts, as: 'home' #home so it doesn't go to another page
  </code></pre>
  
  <p>I also added some stuff in config files I found from other SO answers, and I'm not sure if it's doing anything or not. Normally I wouldn't use ajax to submit a form, but because it's single page, routing to another page isn't really an option. If this is too difficult using mail form, maybe Action Mailer is a better option? Any help pointing me in the right direction would be appreciated. </p>