CODEWITHSUNDEEP
ruby-on-railsformstwitter-bootstrap
Michael Stokes
Michael Stokes

Reputation: 401

How to apply Bootstrap classes into form_tag helpers

I have been trying to convert my regular old html form into a nice looking on using into Bootstrap. I have been tackling it all day and still can't figure why it's not working. I need a solution as soon as possible. Thanks!

<form>
<div class = 'form-group'>
<%= form_tag '/signup', method: 'post', :class => 'form-inline' do  %>



<%= label_tag "Username"%>
<%= text_field_tag :user_name, class: 'form-control' %>
<br>
<br>
<%=label_tag "Password" %>
<%= password_field_tag :password, class: 'form-control'  %>
<br>
<br>
<%=label_tag "Retype Password" %>
<%=password_field_tag :password_confirmation, class: 'form-control' %>
<br>
<br>
<%= submit_tag "Join!", class: 'btn btn-default btn-lg btn-submit' %>
<%= link_to "Cancel" , '/login', class: 'btn btn-default btn-lg'%>
</div>
<%end%>


</form>

Upvotes: 0

Views: 3857

Answers (2)

Doon
Doon

Reputation: 20232

also be aware that you have a form inside a form...

<form>
<div class = 'form-group'>
<%= form_tag '/signup', method: 'post', :class => 'form-inline' do  %>

the form_tag is putting an inner form inside of the outer form that you have you created with <form> so you should remove the outer form tag.

Then build your form how you want, and pass in the classes. Perhaps something like this.

<div class="container">
<%= form_tag '/signup', method: 'post', :class => 'form-inline' do  %>
  <div class="form-group">
    <%= label_tag 'user_name', 'Username'%>
    <%= text_field_tag :user_name,params[:user_name], class: 'form-control', autofocus: true %>
  </div>
  <div class="form-group">
    <%=label_tag 'password',"Password" %>
    <%= password_field_tag :password,nil, class: 'form-control'  %>
  </div>
  <div class="form-group">
    <%=label_tag 'password_confirmation', "Retype Password" %>
    <%=password_field_tag :password_confirmation,nil, class: 'form-control' %>
  </div>
  <%= submit_tag "Join!", class: 'btn btn-default btn-lg btn-submit' %>
  <%= link_to "Cancel" , '/login', class: 'btn btn-default btn-lg'%>
<%end%>
</div>

Upvotes: 2

Mohamed Sultan
Mohamed Sultan

Reputation: 1

add role="form" to the tag to be

<form role="form">

you can also use this site to have a form styled by bootstrap layoutit.com

Upvotes: 0

Related Questions