I have tried to put a div block, with class="col-md-6 col-md-offset-3", around my devise simple_form expecting that this would take 1/3 of my screen width and would be centralized (offset). It did not worked. Why ?
<div class="col-md-6 col-md-offset-3">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true ,
input_html: { autocomplete: "email" }%>
<%= f.input :password,
required: true,
hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
</div>
The class is offset-md-3 not col-md-offset-3
<div class="row">
<div class="col-md-6 offset-md-3">
...
</div>
</div>
Still not find a solution..I want that the filed fullname is automatically updated when I fill fields prénom and nom.
these fields are used in the sign_up registration from devise. (I 've done changes in devise controller to be able to use nom and prenom as fields.
I've done this code but seems that my function do nothing and fullname field stays empty.
I don't want to transform my code to html (I d like to use <% %> in my code...
<div class= "col-md-4 col-md-offset-4">
<h2 class="text-center"> Sign up</h2>
<br/>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
< <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('user.prenom, user.nom').on('user', function(e) {
var changedFullName = $('user.prenom').val() + " " + $('user.nom').val()
$('user.fullname').val(changedFullName);
});
});
</script>
<div class="form-group">
<%= f.label :prenom %><br />
<%= f.text_field :prenom, autofocus: true, placeholder: "Prenom", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :nom %><br />
<%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :fullname %><br />
<%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control", :readonly => true %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
thanks for your help
You should be using classes or ids to assign a jquery event. Here's my solution, based on your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "col-md-4 col-md-offset-4">
<h2 class="text-center"> Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :prenom %><br />
<%= f.text_field :prenom, autofocus: true, placeholder: "Prenom", class: "form-control prenom" %>
</div>
<div class="form-group">
<%= f.label :nom %><br />
<%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control nom" %>
</div>
<div class="form-group">
<%= f.label :fullname %><br />
<%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control fullname", :readonly => true %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('.prenom, .nom').on('change', function(e) {
var changedFullName = $('.prenom').val() + " " + $('.nom').val();
$('.fullname').val(changedFullName);
});
});
</script>
Basically, I gave classes to your :nom, :prenom and :fullname fields and updated your jQuery, so it will work.
I have several attributes on a Player model. My form contains fields for a player to be added. I want to have optional fields where a second player can enter their name, and rather than having to retype the address and other things for the second player, I want the second player to inherit all the other information that the first player entered without having to type it in again. How can I do this?
players/_form.html.erb
<%= form_for #player, html: {class: "horizontal-form"} do |player| %>
<div class="form-group">
<div class = row>
<%= player.label :first_name, "First Name", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :first_name, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :last_name, "Last Name", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :last_name, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :address, "Address", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :address, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :city, "City", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :city, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :state, "State", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :state, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :zip_code, "Zip Code", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :zip_code, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :email, "Email", class: "col-sm-2 control-label"%>
<div class="col-sm-offset-2">
<%= player.text_field :email, class: "form-control", :required => true %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :veteran, "Veteran", class: "col-sm-2 control-label"%>
<div class="checkbox col-sm-offset-3">
<%= player.check_box :veteran %>
</div>
</div>
</div>
<div class="form-group">
<div class = row>
<%= player.label :branch_id, "Branch", class: "col-sm-2 control-label" %>
<%= player.collection_select(:branch_id, Branch.all, :id, :name, :prompt => true) %>
</div>
</div>
<%= player.submit 'Submit', class: 'col-sm-2 col-sm-offset-2 btn btn-primary' %>
<% end %>
Thank you for any suggestions!
This is probably more of a javascript question than a RoR one.
Assuming you want them to have the option to fill in different information, the easiest way I can think to do this is to have a bunch of hidden fields for the player two information (other than their name), give the player one fields onkeypress events that would call a function that would take in the id of the corresponding player two field and use that to find the hidden player two field and fill in their html to be the same as the field you're currently filling in, something like
function fillPlayerTwoField(id) {
$(id).text(this.value)
}
then if they start filling in the player two name unhide all the player two fields so the have the option to change that information if they so choose
Firstly sorry for a newbie question. Just started developing in rails around 15 days back. Now I have installed Milia, Devise and they handle all the work for signing up, logging in, and entering the customer data into the DB.
What am I trying to achieve?
I want to send an SMS to a customer, whose mobile no, we will be taking using a data entry form, whose code I have shown below.
Now once all the information is entered, and the create customer button is pressed, all the information is entered into the DB. Once the button is pressed, I want an SMS to be sent via Twilio, to the customer with a defined body.
For this, I have created a controller, an SMS.rb file and a form which has the code which should help in firing the SMS.
FORM for Entering the Information:
<%= form_for [#sms, #tenant, #customer], :html => { :class => "form-horizontal customer" }, :id => 'form1' do |f| %>
<% if #customer.errors.any? %>
<div id="error_expl" class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title"><%= pluralize(#customer.errors.count, "error") %> prohibited this customer from being saved:</h3>
</div>
<div class="panel-body">
<ul>
<% #customer.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
<h3 align=centre>Personal Infomation</h3>
<div class="form-group">
<%= f.label :name, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :name, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :date_of_birth, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :dob, :class => 'form-control datepicker' %>
</div>
</div>
<div class="form-group">
<%= f.label :mobileno, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :mobileno, :class => 'form-control', :id =>"mobileno", onblur:"Calculate()" %>
</div>
</div>
<div class="form-group">
<%= f.label :email_Id, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :emailid, :class => 'form-control' %>
</div>
</div>
<H3 align=centre>Address</H3>
<div class="form-group">
<%= f.label :building, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :building, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :sub_area, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :subarea, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :locality, :class => 'control-label col-md-2'%>
<div class="col-lg-10">
<%= f.text_field :locality, :class => 'form-control', :id => "locality", onblur: "Calculate()" %>
</div>
</div>
<div class="form-group">
<%= f.label :pincode, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :pin, :class => 'form-control' %>
</div>
</div>
<h3 align=left>Medical Information</h3>
<div class="form-group">
<%= f.label :blood_group, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :bg, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :diseases, :class => 'control-label col-lg-2' %>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Diabetes', checked('Diabetes'), id: 'diseases_diabetes'%>
<%= label_tag 'diseases_diabetes', 'Diabetes' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Cancer', checked('Cancer'), id: 'diseases_cancer'%>
<%= label_tag 'diseases_cancer', 'Cancer' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'TB', checked('TB'), id: 'diseases_tb'%>
<%= label_tag 'diseases_tb', 'TB' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'BP', checked('BP'), id: 'diseases_tb'%>
<%= label_tag 'diseases_bp', 'BP' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'HIV', checked('TB'), id: 'diseases_tb'%>
<%= label_tag 'diseases_hiv', 'HIV' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Brain Tumor', checked('Brain Tumor'), id: 'diseases_tb'%>
<%= label_tag 'diseases_brain_tumor', 'Brain Tumor' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'STD', checked('STD'), id: 'diseases_tb'%>
<%= label_tag 'diseases_std', 'STD' %>
</div>
</div>
<div class="form-group">
<%= f.label :medicine, :class => 'control-label col-md-2 col-sm-3 col-xs-4' %>
<div class="col-lg-10">
<%= f.text_field :medicin, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :allergy, :class => 'control-label col-md-2 col-sm-3 col-xs-4' %>
<div class="col-lg-10">
<%= f.text_field :allergy, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :uid, :class => 'control-label col-md-2 col-sm-3 col-xs-4'%>
<div class="col-lg-10">
<%= f.text_field :uid , :class => 'form-control', :id => 'uid' %>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<br>
<%= f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control' %>
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
root_path, :class => 'btn btn-default' %>
</div>
</div>
<% end %>
SMS.rb FILE:
class SMS < ActiveRecord::Base
def client
Twilio::REST::Client.new Rails.application.secrets.twilio_account_sid, Rails.application.secrets.twilio_token
end
acct_sid = "ACCOUNT_SID"
auth_token = "AUTH_TOKEN"
twilio_no = "+16xxxxxxxxx"
acct_sid = ENV['twilio_account_sid']
auth_token = ENV['twilio_token']
twilio_no = ENV['twilio_no']
def send
numberto = params[:mobileno]
client.account.messages.create(
:messaging_service_sid => Rails.application.secrets.twilio_messaging_service_sid,
:from => "+1xxxxxxxxxx",
:to => "#{numberto}",
:body => "Hi. Thanks a lot for signing up with us. Your UID is: #{uid}"
)
end
The problem I am facing:
I cannot add #sms to the form as it has [#tenant, #cusotmer] already. Adding #sms, gives me an error.
I am frantically stuck and don't know how to proceed. Can you guys help me out?
Things to Know
1. Using Rails 4.2.6
2. Using Ruby 2.3.3
UPDATES
I have updated the Form.html.erb file now.
Here it is:
<%= form_for [#tenant, #customer], :html => { :class => "form-horizontal customer" }, :id => 'form1' do |f| %>
<% if #customer.errors.any? %>
<div id="error_expl" class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title"><%= pluralize(#customer.errors.count, "error") %> prohibited this customer from being saved:</h3>
</div>
<div class="panel-body">
<ul>
<% #customer.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
<h3 align=centre>Personal Infomation</h3>
<div class="form-group">
<%= f.label :name, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :name, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :date_of_birth, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :dob, :class => 'form-control datepicker' %>
</div>
</div>
<div class="form-group">
<%= f.label :mobileno, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :mobileno, :class => 'form-control', value: params[:mobile], :id =>"mobileno", onblur:"Calculate()" %>
</div>
</div>
<div class="form-group">
<%= f.label :email_Id, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :emailid, :class => 'form-control' %>
</div>
</div>
<H3 align=centre>Address</H3>
<div class="form-group">
<%= f.label :building, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :building, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :sub_area, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :subarea, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :locality, :class => 'control-label col-md-2'%>
<div class="col-lg-10">
<%= f.text_field :locality, :class => 'form-control', :id => "locality", onblur: "Calculate()" %>
</div>
</div>
<div class="form-group">
<%= f.label :pincode, :class => 'control-label col-md-2' %>
<div class="col-lg-10">
<%= f.text_field :pin, :class => 'form-control' %>
</div>
</div>
<h3 align=left>Medical Information</h3>
<div class="form-group">
<%= f.label :blood_group, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :bg, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :diseases, :class => 'control-label col-lg-2' %>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Diabetes', checked('Diabetes'), id: 'diseases_diabetes'%>
<%= label_tag 'diseases_diabetes', 'Diabetes' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Cancer', checked('Cancer'), id: 'diseases_cancer'%>
<%= label_tag 'diseases_cancer', 'Cancer' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'TB', checked('TB'), id: 'diseases_tb'%>
<%= label_tag 'diseases_tb', 'TB' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'BP', checked('BP'), id: 'diseases_tb'%>
<%= label_tag 'diseases_bp', 'BP' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'HIV', checked('TB'), id: 'diseases_tb'%>
<%= label_tag 'diseases_hiv', 'HIV' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'Brain Tumor', checked('Brain Tumor'), id: 'diseases_tb'%>
<%= label_tag 'diseases_brain_tumor', 'Brain Tumor' %>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<%= check_box_tag 'customer[diseases][]', 'STD', checked('STD'), id: 'diseases_tb'%>
<%= label_tag 'diseases_std', 'STD' %>
</div>
</div>
<div class="form-group">
<%= f.label :medicine, :class => 'control-label col-md-2 col-sm-3 col-xs-4' %>
<div class="col-lg-10">
<%= f.text_field :medicin, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :allergy, :class => 'control-label col-md-2 col-sm-3 col-xs-4' %>
<div class="col-lg-10">
<%= f.text_field :allergy, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :uid, :class => 'control-label col-md-2 col-sm-3 col-xs-4'%>
<div class="col-lg-10">
<%= f.text_field :uid , :class => 'form-control', :id => 'uid' %>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<br>
<%= f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control' %>
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
root_path, :class => 'btn btn-default' %>
</div>
</div>
<% end %>
I have also updated the Customer.rb file:
Here it is:
def format_phone_number
self.to = "+91" + (self.to.gsub('-',''))
end
def client
Twilio::REST::Client.new Rails.application.secrets.twilio_account_sid, Rails.application.secrets.twilio_token
end
acct_sid = "Axxxxxxxxxxxx"
auth_token = "6xxxxxxxxxxx"
twilio_no = "+1xxxxxxxxxxx"
acct_sid = ENV['twilio_account_sid']
auth_token = ENV['twilio_token']
twilio_no = ENV['twilio_no']
def send (to,body)
client.account.messages.create(
:messaging_service_sid => Rails.application.secrets.twilio_messaging_service_sid,
:to => '#{mobileno}',
:body => "Hi. Thanks a lot for signing up with us. Your UID is: #{uid}"
)
end
Instead of writing in the sms.rb file, I have written the code in customer.rb and erased the sms.rb file and now it is connecting well to the Twilio API. But it takes a random number as the to number +66245366 and so the message sending fails. I don't know why this is happening.
Latest Updated
Customer.rb
class Customer < ActiveRecord::Base
before_save do
self.diseases.gsub!(/[\[\]\"]/,"") if attribute_present?("diseases")
end
belongs_to :tenant
validates_uniqueness_of :mobileno
def self.by_plan_and_tenant(tenant_id)
tenant = Tenant.find(tenant_id)
if tenant.plan == 'free'
tenant.customers
else
tenant.customers
end
end
def client
Twilio::REST::Client.new Rails.application.secrets.twilio_account_sid, Rails.application.secrets.twilio_token
end
acct_sid = "Axxxxxxxxxxxxxx"
auth_token = "6cxxxxxxxxxxxxxxxxxxxxx"
twilio_no = "+16xxxxxxxxx"
acct_sid = ENV['twilio_account_sid']
auth_token = ENV['twilio_token']
twilio_no = ENV['twilio_no']
def send (to, body)
client.account.messages.create(
:messaging_service_sid => Rails.application.secrets.twilio_messaging_service_sid,
:from => "+1xxxxxxxxx1",
:to => '#{mobileno}',
:body => "Hi. Thanks a lot for signing up with us. Your UID is: #{uid}"
)
end
end
Twilio developer evangelist here.
After a long chat we changed the method name to send SMS messages from send (which is an important method for objects in Ruby) to send_sms.
Then we ensured the number had the right international code.
def send_sms()
client.account.messages.create(
:messaging_service_sid => Rails.application.secrets.twilio_messaging_service_sid,
:from => "+16312010201",
:to => "#+91{mobileno}",
:body => "Hi. Thanks a lot for signing up with us. Your UID is: #{uid}"
)
end
We then updated the Customers controller create action to send the SMS when the customer was successfully created:
def create
#customer = Customer.new(customer_params)
respond_to do |format|
if #customer.save
format.html {
#customer.send_sms
redirect_to root_url, notice: 'Customer data was successfully created.'
}
else
format.html { render :new }
end
end
end
So things work now.
I'd like to apply bootstrap to the input fields as following.
<div class="input-group">
<span class="input-group-addon">Title</span>
<input type="text" class="form-control">
</div>
My current code is as following.
_form.html.erb
<%= simple_nested_form_for #event do |f| %>
<%= f.input :title %>
<%= f.input :description, input_html: { rows: 5, cols: 30 } %>
<%= f.input :charge_person %>
.
.
.
<% end %>
It would be appreciated if you could give me the best way in Rails.
This should do the trick:
<%= simple_nested_form_for #event do |f| %>
<div class="input-group">
<span class="input-group-addon">Title</span>
<%= f.input :title, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<%= f.input :description, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Charge Person</span>
<%= f.input :charge_person, class: 'form-control' %>
</div>
...
<% end %>
You shouldl read more detail SIMPLE FORM DOCS
<%= simple_nested_form_for #event, , wrapper_html: { class: 'input-group' } do |f| %>
<%= f.label :title, wrapper_html: { class: 'input-group-addon' } %>
<%= f.input_field :title, wrapper_html: { class: 'form-control' } %>
.
.
.
<% end %>