Adapting Materialize Form Component for Ruby on Rails

Emily Ekdahl
2 min readMar 19, 2017

--

When using Materialize forms with Ruby on Rails, the default form doesn’t play well with .html.erb.

Here’s a basic form component on the Materialize website, with <form class =”col s12"> and <input id=”variable_name_here”> :

Where things go terribly wrong:

  1. Trying to mash up the Ruby’s <% form_tag ‘/controller_name’, method: :post do %> with Materialize’s <form class=”some_class_here”>
  2. Thinking that id=”variable_name” in the default Materialize form will work the same way as Ruby’s name=”variable_name” in the <input> field.

If you use Materialize default form class, or try to combine it with Ruby’s form_tag, you get form-ception and your data never reaches its destination. Furthermore, when you submit your form it doesn’t seem to go anywhere because the form class keeps it from executing the the form_tag’s post request and sending you on to your next page or success condition.

don’t be like Leo, use Ruby’s form_tag and ditch Materialize’s form class

This is what it looks like with form class swapped for Ruby’s form_tag and name=”” swapped in for id=””:

If you use this strategy, your form will post to your database and you can proceed to your next page or success condition. Good luck and happy coding!

--

--