Building Great Landing Pages with Ruby on Rails

Landing pages are the workhorses of digital marketing. Unlike regular website pages, a landing page has one singular purpose: to convert visitors into leads or customers. Whether you're launching a new product, promoting a service, or building an email list, Ruby on Rails provides an excellent foundation for creating high-converting landing pages.

In this tutorial, we'll explore how to build effective landing pages with Rails, covering essential sections, conversion optimization techniques, and practical code examples you can use in your own projects.

The Anatomy of a High-Converting Landing Page

Before writing any code, it's crucial to understand what makes a landing page effective. Every element should guide visitors toward a single action—your conversion goal. Here are the essential sections:

• Hero Section — A compelling headline, subheadline, and primary call-to-action above the fold
• Problem Statement — Identify the pain points your target audience experiences
• Solution Overview — Present your product or service as the answer
• Features/Benefits — Highlight key advantages with clear, scannable content
• Social Proof — Testimonials, case studies, logos of clients or media mentions
• Call-to-Action — Repeated strategically throughout the page
• FAQ Section — Address common objections and questions

Setting Up Your Rails Landing Page

Let's start by creating a dedicated landing page controller and views:

# Generate the controller
rails generate controller LandingPages show

# config/routes.rb
Rails.application.routes.draw do
  get '/product-launch', to: 'landing_pages#show', as: :product_landing
  # Add more landing pages as needed
  get '/free-trial', to: 'landing_pages#free_trial'
  get '/webinar-signup', to: 'landing_pages#webinar'
end

Building the Hero Section

The hero section is your first impression. It needs to communicate your value proposition instantly:

<!-- app/views/landing_pages/_hero.html.erb -->
<section class="hero bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
  <div class="container mx-auto px-4 text-center">
    <h1 class="text-5xl font-bold mb-6">
      <%= @landing_page.headline %>
    </h1>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      <%= @landing_page.subheadline %>
    </p>
    <%= link_to @landing_page.cta_text,
                @landing_page.cta_url,
                class: "bg-white text-blue-600 px-8 py-4 rounded-lg font-bold
                        text-lg hover:bg-gray-100 transition duration-300",
                data: { turbo: false } %>
  </div>
</section>

Creating a LandingPage Model

For flexibility, consider storing landing page content in the database:

# Generate the model
rails generate model LandingPage \
  slug:string:index \
  headline:string \
  subheadline:text \
  cta_text:string \
  cta_url:string \
  features:jsonb \
  testimonials:jsonb \
  published:boolean

# app/models/landing_page.rb
class LandingPage < ApplicationRecord
  validates :slug, presence: true, uniqueness: true
  validates :headline, presence: true

  scope :published, -> { where(published: true) }

  def features_list
    features || []
  end

  def testimonials_list
    testimonials || []
  end
end

The Features Section

Present your features in a visually appealing grid:

<!-- app/views/landing_pages/_features.html.erb -->
<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Why Choose Us</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <% @landing_page.features_list.each do |feature| %>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <div class="text-4xl mb-4"><%= feature['icon'] %></div>
          <h3 class="text-xl font-semibold mb-2"><%= feature['title'] %></h3>
          <p class="text-gray-600"><%= feature['description'] %></p>
        </div>
      <% end %>
    </div>
  </div>
</section>

Adding Social Proof

Testimonials build trust and can significantly boost conversions:

<!-- app/views/landing_pages/_testimonials.html.erb -->
<section class="py-16">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% @landing_page.testimonials_list.each do |testimonial| %>
        <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
          <p class="text-gray-700 italic mb-4">
            "<%= testimonial['quote'] %>"
          </p>
          <div class="flex items-center">
            <%= image_tag testimonial['avatar'],
                          class: "w-12 h-12 rounded-full mr-4",
                          alt: testimonial['name'] %>
            <div>
              <p class="font-semibold"><%= testimonial['name'] %></p>
              <p class="text-sm text-gray-500"><%= testimonial['title'] %></p>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</section>

Conversion Forms with Rails

The conversion form is where the magic happens. Keep it simple—only ask for essential information:

# app/models/lead.rb
class Lead < ApplicationRecord
  validates :email, presence: true, format: { with: URI::MailTo::EMAIL_REGEXP }
  validates :landing_page_id, presence: true

  belongs_to :landing_page

  after_create :send_welcome_email
  after_create :notify_sales_team

  private

  def send_welcome_email
    LeadMailer.welcome(self).deliver_later
  end

  def notify_sales_team
    SalesNotificationJob.perform_later(self)
  end
end

# app/controllers/leads_controller.rb
class LeadsController < ApplicationController
  def create
    @lead = Lead.new(lead_params)

    respond_to do |format|
      if @lead.save
        format.html { redirect_to thank_you_path }
        format.json { render json: { success: true, message: "Thanks for signing up!" } }
      else
        format.html { redirect_back fallback_location: root_path, alert: @lead.errors.full_messages.join(', ') }
        format.json { render json: { success: false, errors: @lead.errors.full_messages }, status: :unprocessable_entity }
      end
    end
  end

  private

  def lead_params
    params.require(:lead).permit(:email, :name, :company, :landing_page_id)
  end
end

Understanding Conversion Optimization

Building a landing page is just the first step. The real work begins when you start optimizing for conversions. Every landing page should have one clear goal—whether it's collecting email addresses, getting trial signups, or driving purchases. Too many calls-to-action or competing goals will dilute your conversion rate.

Key conversion optimization principles include:

• Single Focus — One page, one goal, one primary CTA
• Clear Value Proposition — Visitors should understand what you offer within seconds
• Minimize Friction — Remove navigation, reduce form fields, eliminate distractions
• Create Urgency — Limited time offers, countdown timers, scarcity indicators
• Mobile Optimization — Over 50% of traffic comes from mobile devices
• Fast Load Times — Every second of delay reduces conversions

Analyzing and Improving Your Landing Pages

Even well-designed landing pages can underperform. Understanding why visitors leave without converting is crucial. Traditional analytics tell you what happened—bounce rates, time on page, exit points—but they don't explain the why behind visitor behavior.

This is where AI-powered analysis tools become invaluable. WhyBounce uses artificial intelligence to analyze your landing pages and provide actionable recommendations for improving conversions. Simply enter your landing page URL, and the AI examines your page structure, copy, design, and call-to-action placement to identify specific improvements.

The tool evaluates factors like:

• Headline clarity and emotional impact
• CTA button visibility and persuasiveness
• Trust signals and social proof placement
• Form complexity and friction points
• Visual hierarchy and content flow
• Mobile responsiveness issues

Rather than guessing why visitors bounce or running dozens of A/B tests, you get specific, prioritized suggestions backed by conversion rate optimization best practices.

Tracking Conversions in Rails

Implement basic conversion tracking to measure your landing page performance:

# app/models/page_view.rb
class PageView < ApplicationRecord
  belongs_to :landing_page

  scope :today, -> { where(created_at: Time.current.beginning_of_day..Time.current.end_of_day) }
  scope :this_week, -> { where(created_at: 1.week.ago..Time.current) }
end

# app/controllers/concerns/trackable.rb
module Trackable
  extend ActiveSupport::Concern

  included do
    before_action :track_page_view, only: [:show]
  end

  private

  def track_page_view
    return unless @landing_page

    PageView.create(
      landing_page: @landing_page,
      ip_address: request.remote_ip,
      user_agent: request.user_agent,
      referrer: request.referrer,
      utm_source: params[:utm_source],
      utm_medium: params[:utm_medium],
      utm_campaign: params[:utm_campaign]
    )
  end
end

# Calculate conversion rate
class LandingPage < ApplicationRecord
  has_many :page_views
  has_many :leads

  def conversion_rate
    return 0 if page_views.count.zero?
    (leads.count.to_f / page_views.count * 100).round(2)
  end

  def conversion_rate_for_period(start_date, end_date)
    views = page_views.where(created_at: start_date..end_date).count
    conversions = leads.where(created_at: start_date..end_date).count
    return 0 if views.zero?
    (conversions.to_f / views * 100).round(2)
  end
end

A/B Testing Your Landing Pages

Implement simple A/B testing to continuously improve your conversion rates:

# app/models/ab_test.rb
class AbTest < ApplicationRecord
  belongs_to :landing_page
  has_many :variants, class_name: 'AbTestVariant'

  def assign_variant(visitor_id)
    # Consistent assignment based on visitor ID
    variants.order(:id)[visitor_id.hash % variants.count]
  end
end

# app/controllers/landing_pages_controller.rb
class LandingPagesController < ApplicationController
  include Trackable

  def show
    @landing_page = LandingPage.published.find_by!(slug: params[:slug])

    if @landing_page.active_ab_test
      visitor_id = cookies[:visitor_id] ||= SecureRandom.uuid
      @variant = @landing_page.active_ab_test.assign_variant(visitor_id)
      @landing_page = @variant.landing_page_override || @landing_page
    end
  end
end

Best Practices Checklist

Before launching your landing page, run through this checklist:

• Clear headline — Does it communicate your value proposition in under 10 words?
• Visible CTA — Is your call-to-action above the fold and visually prominent?
• Mobile responsive — Have you tested on multiple devices?
• Fast loading — Is the page under 3 seconds to load?
• Trust signals — Do you have testimonials, security badges, or social proof?
• Minimal navigation — Have you removed unnecessary links that could distract visitors?
• Form optimization — Are you only asking for essential information?
• Thank you page — Do you have a proper post-conversion experience?

Conclusion

Ruby on Rails provides all the tools you need to build high-converting landing pages. From dynamic content management to conversion tracking and A/B testing, the framework's conventions make it straightforward to implement sophisticated marketing pages.

Remember: a landing page is never truly finished. Continuous testing, analysis, and optimization are key to maximizing your conversion rates. Use tools like WhyBounce to get AI-powered insights into what's working and what needs improvement, then iterate based on data rather than assumptions.