Building a Horizontal Form

Place your registration form

We’ve built a really simple page layout, based on the Bootstrap 3 framework. It contains a div, where we’d like to place our registration form. Click inside the container (1), where you want to insert your form and choose add horizontal form button (2). The labels and form inputs of the horizontal form are aligned in a horizontal layout.

Add form ID

First, let’s add an ID to our form (1). Choose between GET or POST method, for our tutorial we choose POST (2).

Labels and fields width

For the horizontal form, you can set the width of the labels and the width of the fields. Just like in Bootstrap 3, their width is based on 12-column grid. We leave the width it to its default 10 as we don’t need a narrow form.

Add a names and placeholder texts

Now, select the input (1), that we’ve just added. You can change its default name and ID attributes, from within the Bootstrap 3 Forms Designer panel. We add name for both (2). Also, you can change the default placeholder text for this input. We enter “your name” (3).

Choose text type

Then, select the text input type, from the dropdown. For the name field, we select the text type (1). You can change the height of the input. Choose between the default height, small and big. We just leave the field to its default height (2).

Change input label text

You can change the input label text, by double clicking it. We replace it with name.

Add new input

Now let's add a new input. In order to do that, click add field after button from the Form Field Group Management in the floating panel. This adds the form input, after the field, which we've selected on the page.

Change input name and ID

We change the default input field name and ID to email (1) and the placeholder text to "your email" (2). From the input field type dropdown we choose email (3) as this input field should contain and e-mail address.

Change the label text

Don't forget to change the default label text. We replace it with email.

Add another input

Click the input field (1) that we just added and add another one after it (2).

Change name, ID and placeholder text

Change the name and ID of this input to password (1) and the placeholder text to "your password" (2). The input field type should be password (3) as this will be the password field.

Add a checkbox

Now, let's add a checkbox in our form. Open the input fields dropdown and select checkbox (1) and add it after the password field (2). Make sure to always select the previous input first and then add a new one.

Setup the checkbox properties

Click the checkbox in order to get its properties (1). You can change its default name and ID. We add subscribe (2) and add a value of 1 (3). Don't forget to change the default checkbox text (4).

Add submit button

We can move any of the form input fields up or down, fully visually in Dreamweaver (1). Now, let's add a submit button to our form. Select submit from the dropdown (2) and add it after the checkbox (3).

Save and preview

And we are done. We've just built a simple registration form for our website. That's how easy it is to build a horizontal form, fully visually in Dreamweaver, using DMXzone Bootstrap 3 Forms Designer.