A simple concept -03

We are making good progress I think. Have a home page with a navbar, footer, hero section and the newsletter form that takes the email if the check box is checked and saves it to the database. The original site has a few different sections, like a about and three cards that take you to different places. I am going to skip the about section here. That is pretty straight forward. Really just some formatted text. You should feel free to add or delete or modify this in any way you like. My goal here is to show how I set up the parts that may present issues for other junior developers or beginners and get some feed back from more senior developers. So I will put in the option cards for the repo but not really discuss here. This section is also pretty straight forward. Three cards with links to where you may want them to go.

Let's get the second model for the contact form taken care of in a little more detail than the we did for the newsletter. In Rails, the model is that piece that communicates with the database. The way I look at it, when I ask Rails to generate a model, I am asking for a table in the database with the columns and types I request. I get a file that I can look over and modify. That file creates a class object that includes those methods or actions of active record. Once I ask it to migrate and the table is created, I get a model file in the models folder. I can write code there that applies directly to the interaction with the database. For this contact form I am going to call the information a lead. Let's create that.

bin/rails g model lead first_name last_name email phone city state comment:text note:text pp_check:boolean        

I need information for the guest. The first_name, last_name, email, phone, city, and state can all be strings. The comment is a text field as I may want to include a spot in the form for the guest to provide some reason for reaching out. The note field is text and will be used by the admin reviewing the record, if they want. The privacy policy boolean is a security check for submitting the form.

So I switched to a new branch and ran that command. If you like or need, open that migration and make your changes. Rails does an amazing job of working with you. Honest, this command could have been written:

bin/rails g model lead        

Which would create a migration to create a table called "lead" with nothing in it. You would have the generated record in the migration folder to refer to and you can manually add the fields you want. If you haven't ran the migration after creating the model, you can do that now with:

bin/rails db:migrate        

Now we have the table in the database and the model, we need the controller. We are going to have this contact form at the bottom of the home page, so we will use the home controller to talk with this model. When the guest completes the form, we need to complete a check and if the condition is good, we need to save the information to the database. This is the same thing we did with the newsletter. Here is the create lead action in the home controller:

def create_lead
    @lead = Lead.new(lead_params)

    if lead_params[:pp_check] == "0" || lead_params[:pp_check] == false
      redirect_to root_path, alert: "Please check the privacy policy"
    else
      respond_to do |format|
        if @lead.save
          format.html { redirect_to root_path, notice: "We will reach out soon! Be sure to check your email" }
        else
          format.html { redirect_to root_path, alert: "Failed to sign up: #{@lead.errors.full_messages.join(', ')}" }
        end
      end
    end
  end        

Just like with the newsletter. Check the pp_check boolean. If it is false then return to root with the alert. If it is true then save the lead and return to root with notice. If the lead has a issue and can't be saved then gimme that error log and return to root with alert.

Here is the permit action for the fields of the contact form:

# Never trust parameters from the scary internet, only allow the white list through.
# This is especially important for the form that is publicly accessible.
def lead_params
  params.require(:lead).permit(:first_name,
                               :last_name,
                               :email,
                               :phone,
                               :city,
                               :state,
                               :pp_check)
end        

Notice that here I am not listing everything that was in the model. I am not allowing the comment or the note fields. I ultimately did not include the comment field in the form. The note field will be used by a admin. This controller is for the home page and used by anyone visiting the site.

Now for the contact form. We need to create the partial and wire it into the home, (index) page. This form is just like the newsletter form. This snippet is not the complete form but enough for you to construct your own, or you can review the part-03 branch of the repo.

<%= form_with scope: :lead, url: create_lead_path, method: "post" do |form| %>
    <%= form.label :first_name %>
    <%= form.text_field :first_name %>
<% end %>        

Of course you need to include the other fields and attributes you want. Then make sure to render the partial in the home page with:

<%= render "leadform" %>        

I called the form "lead form". Notice you don't need to use the underscore in front when calling it with the render tag. Rails knows what you are looking for. Once you have that set then don't forget to add your route so Rails knows the path for the create action for this form.

  # Post action for the contact form in home controller
  post "/home/lead", to: "home#create_lead", as: :create_lead        

If you never added the alert and notice partials, now would be a good time. I placed them in the hero section of the page. When the form is submitted and if everything is good then when the page refreshes the notice will appear. I used the Rails "present" method to check for each like this:

<% if notice.present? %>
      <p class="" id="notice"><%= notice %></p>
 <% end %>
 <% if alert.present? %>
      <p class="" id="alert"><%= alert %></p>
<% end %>        

Now you should be able to spin up the server and add a contact or lead to your database. If it works then the page will refresh and your notice will appear. Great work!

Let's take stock real quick. We have a single page that uses a newsletter form and a contact form. Takes that information and saves it to the database. We also know how to access that information with the Rails console. I really want to set this up on Render now, but I also want you to be able to see the data being saved. You would need access to the console for that which many of you will not have. So before we make the site live, let's work up a simple dashboard for the admin.

I know that many will be upset with this article because it is pretty much the same concept as the previous. This is true, but there is a bit more involved and hopefully I did a better job of explaining what things were doing.

So in the next article let's look at devise and set up a admin dashboard that will review and manipulate the information in the database. See you then!