How to Create a Contact Page in Ruby on Rails with Gmail Integration

Having a functional contact page on your website is essential for any business or personal project. In this tutorial, we will walk you through creating a contact page in a Ruby on Rails 7 application that sends form submissions to your Gmail account. Additionally, we'll show you how to securely store your Gmail credentials using Rails credentials.

Step 1: Generate a PagesController

To start, we need to create a controller for the contact page. Run the following command to generate the PagesController:

rails generate controller Pages

This will create a controller file at app/controllers/pages_controller.rb where we can define actions for the contact page and the form submission.

Step 2: Define the contact and send_contact_message Actions

In app/controllers/pages_controller.rb, define two methods: contact (which displays the form) and send_contact_message (which handles the form submission):

class PagesController < ApplicationController
  def contact
    # Renders the contact form
  end

  def send_contact_message
    name = params[:name]
    email = params[:email]
    message = params[:message]

    ContactMailer.contact_email(name, email, message).deliver_now
    flash[:notice] = "Message sent successfully!"
    redirect_to pages_contact_path
  end
end

Step 3: Create the Contact Form View

In the app/views/pages/contact.html.erb file, create a form that will capture the user's name, email, and message:

<%= form_with url: send_contact_message_path, method: :post, local: true do |f| %>
  <div>
    <%= f.label :name, 'Your Name' %>
    <%= f.text_field :name, required: true %>
  </div>

  <div>
    <%= f.label :email, 'Your Email' %>
    <%= f.email_field :email, required: true %>
  </div>

  <div>
    <%= f.label :message, 'Your Message' %>
    <%= f.text_area :message, required: true %>
  </div>

  <div>
    <%= f.submit 'Send Message' %>
  </div>
<% end %>

This form sends a POST request to the send_contact_message method when submitted.

Step 4: Add Routes for the Contact Page

In config/routes.rb, add the following routes to handle the display and submission of the contact form:

get 'pages/contact', to: 'pages#contact'
post 'pages/contact', to: 'pages#send_contact_message', as: 'send_contact_message'

Now, you can access your contact page via pages/contact in your browser.

Step 5: Set Up the Contact Mailer

To send emails, we need to create a mailer. Run the following command:

rails generate mailer ContactMailer

Then, define the mailer in app/mailers/contact_mailer.rb:

class ContactMailer < ApplicationMailer
  default from: '[email protected]'

  def contact_email(name, email, message)
    @name = name
    @message = message
    mail(to: '[email protected]', subject: 'New Contact Message', reply_to: email)
  end
end

This method sends an email with the form details to your Gmail account.

Step 6: Configure ActionMailer to Use Gmail

In config/environments/production.rb (or development.rb for testing), configure ActionMailer to send emails through Gmail. However, instead of hardcoding your Gmail credentials, we will securely store them using Rails credentials.

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  address:              'smtp.gmail.com',
  port:                 587,
  domain:               'yourdomain.com',
  user_name:            Rails.application.credentials.dig(:smtp, :gmail, :user_name),
  password:             Rails.application.credentials.dig(:smtp, :gmail, :password),
  authentication:       'plain',
  enable_starttls_auto: true
}

Step 7: Store Gmail Credentials Securely with Rails Credentials

To store your Gmail username and password securely, run the following command:

EDITOR="nano" rails credentials:edit

In the credentials file, add the following:

smtp:
  gmail:
    user_name: [email protected]
    password: your_app_password

Now, your Gmail credentials are encrypted and securely stored in Rails credentials.

Step 8: Test Your Contact Page

Now that everything is set up, navigate to /pages/contact in your browser. Fill out the form and submit it. You should receive an email in your Gmail account with the contact details.

---

Conclusion

Setting up a contact page with form submission in Ruby on Rails is straightforward and can be made secure with the use of Rails credentials. By following the steps outlined above, you can integrate Gmail to receive messages directly from users on your website. This method ensures both functionality and security, essential aspects of any modern web application.

Let us know if you have any questions or need further assistance with your Rails projects!