Simplifying Form Creation in Rails 7 with the Form Helper: Submitting Requests Without AJAX

Rails, the popular web application framework, has always focused on developer productivity and ease of use. With the release of Rails 7, the framework introduces several exciting updates and features, including improvements to the Form Helper. In this blog post, we’ll explore how the updated Form Helper in Rails 7 simplifies form creation and walk through an example of submitting a request without using AJAX.

Understanding the Form Helper in Rails 7:
The Form Helper in Rails provides a convenient way to generate HTML forms and handle form submissions. It abstracts away the complexities of manual form creation and automates several common tasks, such as generating form fields, handling validation errors, and managing form submissions.

In Rails 7, the Form Helper has been enhanced to provide even more flexibility and functionality. It now offers improved support for creating complex forms, handling nested attributes, and handling different types of form data, among other enhancements. These improvements make form creation in Rails 7 more efficient and intuitive.

Submitting a Request Without AJAX in Rails 7:
While AJAX (Asynchronous JavaScript and XML) has become popular for handling form submissions, there are still scenarios where you may want to submit a form without using AJAX. In Rails 7, you can achieve this easily with the updated Form Helper.

Let’s consider an example where we have a simple contact form that collects a name, email, and message from the user. We’ll walk through the steps to create the form and submit the request without using AJAX.

Step 1: Generating the Form:
To generate the form using the Form Helper, we’ll create a new view file called `new.html.erb` and add the following code:

<%= form_with(model: @contact, url: contacts_path,  data: {turbo: false}) do |form| %>
 <%= form.label :name %>
 <%= form.text_field :name %>

 <%= form.label :email %>
 <%= form.email_field :email %>

 <%= form.label :message %>
 <%= form.text_area :message %>

 <%= form.submit “Submit” %>
<% end %>

In the above code, we use the `form_with` method, passing the `@contact` model and the `contacts_path` as arguments. This creates a form that maps to the `contacts` controller’s `create` action.

Step 2: Creating the Controller and Action:
Next, we’ll create the `contacts_controller.rb` file and add the following code:

class ContactsController < ApplicationController
  def new
    @contact = Contact.new
  end

  def create
    @contact = Contact.new(contact_params)

    if @contact.save
      redirect_to root_path, notice: "Message sent successfully!"
    else
      render :new
    end
  end

  private

  def contact_params
    params.require(:contact).permit(:name, :email, :message)
  end
end

In the `create` action, we instantiate a new `Contact` object using the permitted `contact_params` that we define in the private method. If the contact saves successfully, we redirect the user to the root path with a success notice. Otherwise, we re-render the `new` view to show validation errors.

Step 3: Routing:
To ensure the form submission is routed correctly, open the `routes.rb` file and add the following code:

Rails.application.routes.draw do
 resources :contacts, only: [:new, :create]
end

Step 4: Model and Database Setup:
Create a `Contact` model and set up the corresponding database table with the necessary attributes

Step 5: CSS Styling (optional):
You can add CSS styling to the form to make it visually appealing and align with your application’s design.

Step 6: Testing the Form Submission:
Start the Rails server and visit the form’s URL (e.g., http://localhost:3000/contacts/new). Fill in the form fields and submit it. If the form submission is successful, you should be redirected to the root path with a success notice. If there are any validation errors, they will be displayed on the `new` view.

Conclusion:
Rails 7 introduces several improvements to the Form Helper, making form creation in Rails more efficient and intuitive. In this blog post, we explored how to generate a form using the updated Form Helper and submit a request without using AJAX. By leveraging the power of the Form Helper and following the steps outlined in the example, you can easily create and handle form submissions in your Rails 7 application.

Remember, while AJAX can provide a smoother user experience for some scenarios, there are still use cases where non-AJAX form submissions are appropriate and effective. Rails 7 empowers developers to choose the right approach based on their application’s requirements.

Happy coding with Rails 7’s improved Form Helper!