Rails 6 Forms With Bootstrap 5 Styling

Intro

Forms allow you to receive data from your users via the webapp and store that information in your database and/or send it off for external processing to something like an API.

In this post I will go over the process of using forms in rails 6 and styling them with the Bootstrap 5 CSS framework.

for this exercise, lets pretend we have a Sites application that you might use to store information about branch locations.

• Rails - 6.0.3.4
• Bootstrap - 5.0.0-beta1

Routes

In order for users to see the desired form and also submit the data they enter you will need to have the correct routes setup.

The easiest way to achieve this is by using the resources routes. Defining the resources routes will automatically create all the most common routes that are used.

Add resources routes for the desired component in the config/routes.rb file.

# config/routes.rb 

Rails.application.routes.draw do
  resources 'sites'
end

You can verify which routes are available with the rails routes command.

rails routes | grep site

# output 
    sites GET    /sites(.:format)          sites#index
          POST   /sites(.:format)          sites#create
 new_site GET    /sites/new(.:format)      sites#new
edit_site GET    /sites/:id/edit(.:format) sites#edit
     site GET    /sites/:id(.:format)      sites#show
          PATCH  /sites/:id(.:format)      sites#update
          PUT    /sites/:id(.:format)      sites#update
          DELETE /sites/:id(.:format)      sites#destroy

The highlighted routes that are pointing to the sites#create and sites#new controller actions are the most important routes for our current task.

Controller

In the sites_controller.rb file add the new and create methods.

The new method is what is used to serve the @site model instance to the web application view .

When the form is submitted the form fields are submitted as a paramaters hash to the create method.

Before the record can be saved the received paramaters need to be validated via a strong parameters check. The site_params private method is used for this purpose.

This is a security measure to prevent users from submitting fields that are not in your form and potentially overwritting/adding data to a record that they should not have access to.

In the site_params method you specifically define the fields that users are allowed to add/edit.

# app/controllers/sites_controller.rb 

class SitesController < ApplicationController 

  def new
    @site = Site.new
  end

  def create
    @site = Site.new(site_params)
    if @site.save
      redirect_to sites_path
    end
  end
  
  private
    def site_params
      params.require(:site).permit(:name, :code, :description)
    end
end

View

Now for the Juicy bit. Firstly create the new.html.erb view file in the app/views/sites/ directory. This file will be used to present our form to the users.

Using the form_with helper we can pass in the @site model instance and define our form fields. Rails will automatically create the HTML markup for the web app.

<%# app/views/sites/new.html.erb %>

<%= form_with(model: @site) do |f| %>

      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :code %>
      <%= f.text_field :code %>

      <%= f.label :description %>
      <%= f.text_field :description %>

    <%= f.submit "Submit" %>

<% end %>

But the results are not very exciting .....

Bootstrap

To spice the form up, lets sprinkle in some Bootstrap styling.

Using some of the code from this form example. Wrap the form fields in divs and apply the CSS classes to the field parameters.

I also wrapped the entire form in a card to give it a nice looking outline.

<%# app/views/sites/new.html.erb %>

<%= form_with(model: @site) do |f| %>
<div class="card">
  <div class="card-body">

    <div class="mb-3">
      <%= f.label :name, { class: "form-label"} %>
      <%= f.text_field :name, { class: "form-control", placeholder: "Site Name" } %>
    </div>

    <div class="mb-3">
      <%= f.label :code, { class: "form-label"} %>
      <%= f.text_field :code, { class: "form-control", placeholder: "Site Code" } %>
    </div>

    <div class="mb-3">
      <%= f.label :description, { class: "form-label"} %>
      <%= f.text_field :description, { class: "form-control", placeholder: "Description" } %>
    </div>

    <%= f.submit "Submit", class: "btn btn-primary" %>

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

Much better dont you think?

Outro

In this post we created a web form for our Rails 6 app and styled it with Bootstrap 5. Don't be formless like Brue Lee, get some forms in your life.