In this tutorial, we will see on how to create a two column responsive form. The form will be in two columns in bigger screens / Tablets and will become one column in mobile devices. Our final form will look like the following.
Let’s create the HTML markup for the form first. We will wrap the whole form with an ID named “responsive-form” and then will have rows and columns like the following.
<divclass="form-row"> <divclass="column-half">First Name [text* first-name]</div> <divclass="column-half">Last Name [text* last-name]</div> </div>