DMXzone Bootstrap 3 Forms Designer Manual

Prev Index Next

Advanced: Using Addons and Buttons in Bootstrap 3 Forms Designer

In this tutorial we will show you how to add text or buttons before, after, or on both sides of any text-based input, using DMXzone Bootstrap 3 Forms Designer.

*You can also check out the video.

How to do it

1.We already added an empty horizontal form on our page. We'd like to add a text field, with a button, which our users can use to subscribe to our newsletter. From the dropdown, select input group (1) and click the add button (2).

2.Select the text input that we've just added (1) and change the placeholder text to "your email" (2). Don't forget to change its type to email (3).

3.You can see that there are several options, available under Input Group Management. You can use them to add an addon or button before the field or after it. Let's add an addon before the field. Open the dropdown and add static text.

4.You can change the default static text any time (1). For our tutorial we add the @ symbol here (2), under execute, right click step (3).

5.Let's add a button, after the field. Open the dropdown, select button and click add.

6.You can change the default button text (1). Also, remove the input label text as we don't need it for this form (2).

7.And we are done! That's how easy it is to add text or buttons before, after, or on both sides of any text-based input, using DMXzone Bootstrap 3 Forms Designer.

Prev Index Next