Pre-order

Working with forms

Superform was built with the understanding that web applications have many different types of forms dependung on context and the user.

For example, a customer service user interface might have a more dense user interface with detailed error messages, signup forms on the marketing website might have a simpler layout with fewer fields, and the forms within the application UI might be somewhere in the middle.

Extending a Superform

Let’s start by creating a MarketingForm form that extends the ApplicationForm class that we can use in a β€œcontact sales” and β€œsignup” pages.

πŸ”“ Unlock content

Pre-order this course to unlock this video, source code, and content.

Pre-order video course for $379 $249
class MarketingForm < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“(β–“β–“β–“β–“β–“)
    β–“β–“β–“(class: "my-4") do
      β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“(style: "font-bold")
      β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“
    end
  end

  def β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“)
    β–“β–“β–“β–“β–“β–“(text: β–“β–“β–“β–“, class: "btn btn-primary btn-lg") do
      β–“β–“β–“β–“
    end
  end
end

Rendering form blocks

β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“

<%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ β–“β–“β–“β–“β–“ do |β–“β–“β–“β–“| %>
  <%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“β–“β–“(:email).β–“β–“β–“β–“β–“(type: :email) %>
  <%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“β–“β–“(:name).β–“β–“β–“β–“β–“ %>
  <%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“β–“β–“(:phone).β–“β–“β–“β–“β–“(type: :tel) %>
  <%= β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“ "Submit" %>
<% end %>

Rendering form classes

β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“

class SalesForm < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“β–“ β–“β–“β–“β–“β–“(:email).β–“β–“β–“β–“β–“(type: :email)
    β–“β–“β–“ β–“β–“β–“β–“β–“(:name).β–“β–“β–“β–“β–“
    β–“β–“β–“ β–“β–“β–“β–“β–“(:phone).β–“β–“β–“β–“β–“(type: :tel)
    β–“β–“β–“β–“β–“β–“("Submit")
  end
end

β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“

<%= render SalesForm.new @user %>

β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“