Want to build a multiple step form for registration form built with devise gem

Question

I used devise to generate sign-up/registration form. But my registration form have many fields which I want to use to make multiple step form. The first steps will is to accept email n password. As user enter it, they can proceed to fill other form.

    <h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name, autofocus: true %>
    </div>

    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name %></br>
    </div>

    <div class="field">
      <%= f.label :birth_date %></br>

      <%= f.date_select :birth_date, :start_year=>1905,:end_year=>2015 %>
    </div>

    <div class="field">
      <%= f.label :city %></br>
      <%= f.text_field :city %>
    </div>

    <div class="field">
      <%= f.label :address %></br>
      <%= f.text_area :address %>
    </div>

    <div class="field">

        <%= f.label :country %></br>
        <%= f.select(:country, [['India', 'India'], ['USA', 'USA']]) %>
    </div>

    <div class="field">
      <%= f.label :zip_code %></br>
      <%= f.text_field :zip_code %>
    </div>

    <div class="field">
      <%= f.label :gender %></br>
      <span class="option">Male</span><%= f.radio_button :gender, "m" %>
      <span class="option">Female</span><%= f.radio_button :gender, "f" %></br>
    </div>

    <div class="field">
      <%= f.label :mobile_no %></br>
      <%= f.telephone_field :mobile_no %>
    </div>

    <div class="field">
      <%= f.label :website %></br>
      <%= f.url_field :website %>
    </div>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.email_field :email %>
    </div>

    <div class="field">
      <%= f.label :password %>
      <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :Launguages_Known %><br />
      <%= f.text_field :language %>
    </div>

    <div class="field">
      <%= f.label :skills %><br />
      <%= f.text_field :skills %>
    </div>

    <div class="field">
      <%= f.label :passion %><br />
      <%= f.text_field :passion %>
    </div>

    <div class="field">
      <%= f.label :connecting_conditions %><br />
      <%= f.text_area :connect_pref %>
    </div>


    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

This form is very long so, I want to make it multistep. Also after successful filling this form, user should be redirected to a specific page.

Need help to generate multistep form for registration page and redirection to status page after successful signup.

Answer 1

If you want to submit your form in steps so please go through with this :

https://github.com/aasm/aasm

suppose you want to submit your form in three steps like this :

profile_details

address_details

technical_details

First you need to define transection states at your modal like this :

 aasm do
    state :loaded, :initial => true
    state :profile_details
    state :address_details
    state :technical_details

  event :fill_basic_info do
    transitions :from => :loaded, :to => :profile_details, :guard => Proc.new { |o|
    o.valid?
  }
  end

  event :fill_residential do
    transitions :from => :profile_details, :to => :address_details
  end

  event :fill_skills do
    transitions :from => :address_details , :to => :technical_details
  end

  event :previous_step do
    transitions :from => :technical_details, :to => :address_details
    transitions :from => :address_details , :to => :profile_details
    transitions :from => :profile_details, :to => :loaded
  end
 end

def change_ad_next_state
   case self.aasm_state
   when "loaded"
    fill_basic_info
   when "profile_details"
    fill_residential
   when "address_details"
    fill_skills
   end
 end

At your controller :

def create
  @user = User.new(user_params)

 if @user.select_tenant && @user.save
   redirect_to edit_user_path(@user)
 else
   @user.previous_step
   render "new"
 end
end

def update
  @user = User.find params[:id]
  if @user.change_ad_next_state &&    @user.update_attributes(advertisement_params)
    redirect_to some_path_here and return
  else
    @user.previous_step
    render "edit"  and return
  end
end

def previous_step
  @user = User.find(params[:id])
  if !@user.loaded? && @user.previous_step && @user.save
    redirect_to edit_user_path(@user)
  else
    redirect_to :back
  end
end

private 

 def user_params
   params.require(:user).permit(:first_name,:last_name,:email,:password  etc....)
 end

and also define routes for all the methods if you didn't define.

Answer 2

I suggest to use wicked gem. Minimalistic and useful

Answer 3

For first step you just take email and password and submit it.

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.text_field :email, autofocus: true %>
    </div>
    <div class="field">
      <%= f.label :password %><br />
      <%= f.password_field :password %>
    </div>
    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation %>
    </div>
    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

After, successful signup, you should redirect user to edit page. and update other fields on edit page.
Write following code in ApplicationController.

def after_sign_up_path_for(resource)
    redirect_to edit_user_path(resource)
end