Last active
May 26, 2020 20:21
-
-
Save redhendery/51b5d2720d7f901154a33cfb88206efc to your computer and use it in GitHub Desktop.
Ruby on Rails 5+ Simple Contact Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- If you do not used a shared error message across your app, paste this code in the | |
app/views/contact/index.html.erb file in place of the <%= render 'shared/error_messages %> --> | |
<% if object.errors.any? %> | |
<article class="message is-danger"> | |
<div class="message-header"> | |
The form contains <%= pluralize(object.errors.count, 'error') %>. | |
</div> | |
<div class="message-body"> | |
<ul> | |
<% object.errors.full_messages.each do |msg| %> | |
<li><%= msg %></li> | |
<% end %> | |
</ul> | |
</div> | |
</article> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Generate a Contact model with the command. We skip the migration, as this implementation does not use Active Record: | |
# rails generate model contact --no-migration | |
# Update the model file as follows, adding validations to each field to require user to input them and using | |
# regex to ensure a valid email address. | |
class Contact < MailForm::Base | |
# Your whitelisted parameters | |
attribute :name | |
attribute :email | |
attribute :message | |
VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i | |
validates :name, presence: true, length: { minimum: 3, maximum: 50 } | |
validates :email, presence: true, length: { maximum: 255 }, format: { with: VALID_EMAIL_REGEX } | |
validates :message, presence: true, length: { minimum: 10 } | |
# Declare the e-mail headers. It accepts anything the mail method | |
# in ActionMailer accepts. | |
def headers | |
{ | |
:subject => 'Contact from completed from your Website', | |
:to => 'your@email.com', #add multiple addresses | |
:from => %("#{name}" <#{email}>) | |
} | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Next, generate a Contact Controller to handle messages submitted, generate with `index` for the one view. | |
# I omit assets, helpers and stylesheets as I don't need them in my typical implementations. | |
# Remove the flags if you wish to. | |
# rails generate controller Contact index --no-assets --no-stylesheets --no-helper | |
# We now update our controller to handle messages as follows, this is a simple contact form, | |
# if the message is valid and sends, it will redirect the user to the home page and flash a message thanking | |
# them for the message. If it fails, it re-renders the Contact page, alerts the user to the error | |
# and keeps their inputs. We also whitelist our message paramters: | |
# Update controller as follows: | |
class ContactController < ApplicationController | |
def index | |
@contact = Contact.new(params[:contact]) | |
end | |
def create | |
@contact = Contact.new(params[:contact]) | |
@contact.request = request | |
if @contact.deliver | |
redirect_to root_url | |
flash[:success] = 'Thank you for your message! We will get back to you soon' | |
else | |
render :index | |
end | |
end | |
private | |
def contact_params | |
params.require(:contact).permit(:name, :email, :message) | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Add the Mail Form gem to your gemfile. | |
gem 'mail_form' | |
# Then run: | |
bundle install |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/contact/index.html.erb | |
Updating the view, this has no styling, so you are on your own with that. We rely on the error message | |
rendering for the rest of our App to keep our code nice and DRY. --> | |
<h1>Contact Us</h1> | |
<%= form_for @contact, url: contact_index_path do |f| %> | |
<%= render 'shared/error_messages', object: f.object %> | |
<%= f.label :name %> | |
<%= f.text_field :name, required: true, type: 'text', placeholder: 'Your Name' %> | |
<%= f.label :email %> | |
<%= f.email_field :email, required: true, type: 'email', placeholder: 'Your Email Address' %> | |
<%= f.label :message %> | |
<%= f.text_area :message, rows: 8, cols: 40, required: true, class: 'textarea', placeholder: 'Your message to us' %> | |
<%= f.submit 'Send Message' %> | |
<% end %> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment