Customize Your Forms With The new Container Classes

We can kill two birds with one stone on this page. Show you how to customize your contact form/s and also demonstrate exactly how the new container classes work. if you haven't tried these classes out yet, then it's worth experimenting with them, they open up a new way to customize your BB2 pages!  This feature was released mid June of this year (2016) and you can read the forum post about it here. 

Getting Started

on this page  is a fully functional contact form. So yes, if you would like to use it and request me to create a custom class or two for your own forms, you are most welcome to do so. Or, you can take the custom CSS that I have used and change the properties and values to suit you own needs.

It's as easy as 1 2 3, or almost.

1. Create a class with some styling for the form and put that into Site Designer
2. Add a container block to your page and apply the class name to it
3. Put a contact form block into the container

.ajcontact{
min-width:300px; /*so that form can't shrink down below the width of the form fields */
max-width:400px; /* I don't want form to fill an entire column */
margin:0 auto; /*This centers the form in the column */
overflow-x:hidden; /*just in case form is narrower than form fields */
border:1px solid #eee; /* the border around the form */
padding-left:5px;
padding-bottom:5px;
border-radius:6px; /* rounding off the corners */
background:#024264;/*solid color for old browsers, lines below are browser speficic */
background:-webkit-linear-gradient(bottom,#0376B4,#024264);
background:-ms-linear-gradient(bottom,#0376B4,#024264);
background:-moz-linear-gradient(bottom,#0376B4,#024264);
background:-o-linear-gradient(bottom,#0376B4,#024264);
box-shadow:3px 3px 5px #666;}

.ajcontact form table{
width:96%!important; /*set the width of the table that holds the form */
padding:0 2%;
overflow-x:hidden;}

.ajcontact label, .ajcontact .formbody{ /* this gives me small white text */
width:90%; margin:10px auto;
font-family:lato,san-serif;
color:#fff;
font-size:14px;
font-weight:normal;}

Above is the custom CSS I used to create the class, ajform I have commented the main lines so that you can see how they apply to the actual form, and can choose your own values for them. The only thing that might catch you out, is that the color gradient starts with the bottom color first. Other than that, it should be (reasonably) straight forward. So, happy customizing and I hope you have a bit of fun with this :-)

ShareFacebookTwitter