Create a horizontal form that collects a user's first name, last name, and email address for something like a mailing list or CRM sign-up by simply adding the form fields as normal, then adding some new css classes to the form and some individual fields.


More information can be found on form layout options here :



Step 1: Edit Form Settings

On the Form Settings page, add CSS classes to the form itself. First we'll remove all labels from the fields by using the hide-labels class.


Next we'll align the fields. By default, the form footer that contains the submit button is placed below the form body that contains all the fields.


The first step will be adding new css classes to the form that will move the footer next to the form to create our horizontal layout.  For a form with four total fields ( first name, last name, email, submit ) use inline-form-4ths. This will make the body of the form fill 3/4 of the overall width and the submit button fit the remaining 1/4 on any desktop display. Now that the form footer fits 1/4 of the overall form, we'll enable the options to add the button-block css class to the button both on desktop and mobile displays.


A form with three total fields ( name, email, submit ) would use inline-form-3rds


Any time an inline-form-4ths or inline-form-3rds class is used on the form, it will be necessary to add stack-tab and/or stack-palm classes as well.  These classes ensure that the form footer stacks below the form body on mobile devices.


Form Settings:


Resulting Layout:




Step 2: Edit Form Field Settings

Now that the body of our form is reduced to the area shown in green, we'll need to size our three form fields accordingly.  Since the First and Last fields are grouped within the Name field, we'll set this field to fit 2/3 of the width, while the e-mail field will fit the remaining 1/3.  Because the form field labels were hidden by the hide-labels class on the form, we'll need to use placeholder text inside the form fields to give users a visual cue on what information should be entered.


Add CSS classes and placeholder tex on the Appearance tab:



Form Field Settings:


Resulting Layout:


The form will now display on one clean line with the labels removed and placeholder text added.



Results

Because we used the stack-tab and stack-palm CSS classes on both the form and the form fields, the form will display like so on tablets and mobile devices:


A live link to a basic horizontal form demo can be found here:


http://demos.uxinetwork.com/uxi-forms/horizontal-form-demo/