What is utf8=✓&authenticity_token and why is it creating conflicts with mail_form gem?

Question

I am using the mail_form gem and sendgrid for my email contact form. But when I fill out the form and send the message it won't send successfully. By sending the message it should take the user to a different page where it says Thank You for your Message.

I get this utf8=✓&authenticity_token in my url and heroku logs. I think that is what is causing this problem. Can you guys please help me out?

2016-01-10T17:49:47.934925+00:00 app[web.1]: Started GET "/contacts/new?utf8=%E2%9C%93&authenticity_token=mzcayVlHayBSxoka6pnUQdjz7OxaPlFICU7L%2FJlfZU4NmyiLypTSbcgaJ%2BRSLZdmhYW3NaxMrZoL0Khwr%2FiRfA%3D%3D&contact%5Bname%5D=Brandon+Espinoza&contact%5Bemail%5D=espinozabrand%40gmail.com&contact%5Bmessage%5D=Hi+how+are+you+msg+me+back+asap+pls&contact%5Bnickname%5D=&commit=Yes%21+Send+It%21" for 71.9.177.97 at 2016-01-10 17:49:47 +0000
2016-01-10T17:49:47.950056+00:00 app[web.1]: Completed 200 OK in 10ms (Views: 9.1ms | ActiveRecord: 0.0ms)
2016-01-10T17:49:47.939506+00:00 app[web.1]: Processing by ContactsController#new as HTML
2016-01-10T17:49:47.939670+00:00 app[web.1]:   Parameters: {"utf8"=>"✓", "authenticity_token"=>"mzcayVlHayBSxoka6pnUQdjz7OxaPlFICU7L/JlfZU4NmyiLypTSbcgaJ+RSLZdmhYW3NaxMrZoL0Khwr/iRfA==", "contact"=>{"name"=>"Brandon Espinoza", "email"=>"espinozabrand@gmail.com", "message"=>"Hi how are you msg me back asap pls", "nickname"=>""}, "commit"=>"Yes! Send It!"}
2016-01-10T17:49:47.947225+00:00 app[web.1]:   Rendered contacts/new.html.erb within layouts/application (6.0ms)

And here is my contacts_controller.rb:

class ContactsController < ApplicationController

  def new
    @contact = Contact.new
  end

  def create
    @contact = Contact.new(params[:contact])
    @contact.request = request
    if @contact.deliver
      flash.now[:error] = nil
    else
      flash.now[:error] = 'Cannot send message.'
      render :new
    end
  end

end

Here is my form:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3 class="page-titles">Why Not Say Hello</h3>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 center-block">
      <form style="padding: 40px 0 40px 0;">
        <%= form_for @contact do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, required: true, class: "form-control"  %>
          </div>

          <div class="form-group">
            <%= f.label :email %>
            <%= f.email_field :email, required: true, class: "form-control" %>
          </div>

          <div class="form-group">
            <%= f.label :message %>
            <%= f.text_area :message, as: :text, class: "form-control", :cols => "30", :placeholder => "Your Message", :rows => "10" %>
          </div>

          <div class="form-group hidden">
            <%= f.label :nickname %>
            <%= f.text_field :nickname, hint: 'leave this field blank' %>
          </div>

          <%= f.submit 'Yes! Send It!', class: " btn-default btn sendbtn" %>

        <%end%>
      </form>
    </div>
  </div>
</div>

This is what the user should see if the email is sent successful:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3 class="page-titles">Why Not Say Hello</h3>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h1>Thank you for your message!</h1>
      <p>I'll get back to you soon.</p>
    </div>
  </div>
</div>

This is my Production.rb:

config.action_mailer.default_url_options = { host: 'https://espinozabrandblog.herokuapp.com/' }
  config.action_mailer.delivery_method = :smtp

  ActionMailer::Base.smtp_settings = {
  :address        => 'smtp.sendgrid.net',
  :port           => '587',
  :authentication => :plain,
  :user_name      => ENV['SENDGRID_USERNAME'],
  :password       => ENV['SENDGRID_PASSWORD'],
  :domain         => 'heroku.com',
  :enable_starttls_auto => true
}

Here are my routes:

Rails.application.routes.draw do

  resources :posts
  resources :projects
  resources :contacts, only: [:new, :create]
  get 'welcome/index'
  root 'welcome#index'
end

Answer 1

I found the solution to this problem. Neither of the solutions above works to solve it.

For some reason the form tag from Bootstrap is creating the conflict. So just by taking out the <form></form> tag from Bootstrap lets the form submit.

So the form should look like this

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3 class="page-titles">Why Not Say Hello</h3>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 center-block">
        <%= form_for @contact do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, required: true, class: "form-control"  %>
          </div>

          <div class="form-group">
            <%= f.label :email %>
            <%= f.email_field :email, required: true, class: "form-control" %>
          </div>

          <div class="form-group">
            <%= f.label :message %>
            <%= f.text_area :message, as: :text, class: "form-control", :cols => "30", :placeholder => "Your Message", :rows => "10" %>
          </div>

          <div class="form-group hidden">
            <%= f.label :nickname %>
            <%= f.text_field :nickname, hint: 'leave this field blank' %>
          </div>

          <%= f.submit 'Yes! Send It!', class: " btn-default btn sendbtn" %>

        <%end%>
    </div>
  </div>