MENU

FormBuilder template and stylesheet

  Previous article Next article  

The default form template and stylesheet provided by the excellent FormBuilder module for CMS Made Simple™ is straightforward, the very basics are there. In this post I try to give a more extended styled form template.
I hope it will give you a headstart styling the forms at your CMSMS website.
You can see a working example at this demo page.

  How to use

The form template

First you have to download the XML-file containing the form template and save it at your computer.

Download the example template here (13.53KB)

Open the FormBuilder admin page in your CMSMS backend and go to XML Form Import - Upload form from XML file. Browse your computer and select the downloaded XML file. If you want you can change the Form name/alias and hit Submit.


The stylesheet

Create a new stylesheet in the CMSMS Admin and attach it to the HTML template used for the form page. I used Smarty tags for multiple used values, you only need to change them at one spot...

Stylesheet Content
[[strip]]
[[* +++++ Multiple Used Values +++++ *]]
[[$label_width = '150']]
[[$field_width = '300']]
[[$field_border = 'border: #ccc solid 2px;']]
[[$field_border_hover = 'border: #666 solid 2px;']]
[[capture assign='rounded_corners']]border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;[[/capture]]

[[* +++++ Stylesheet +++++ *]]
.formbuilder div { margin: 0 0 5px 0 }

.formbuilder div div {
  margin: 0 0 0 [[$label_width]]px;
  padding: 0 0 5px 0;
}

.formbuilder input[type="email"],
.formbuilder input[type="file"],
.formbuilder input[type="option"],
.formbuilder input[type="text"],
.formbuilder textarea,
.formbuilder select {
  width: 100%;
  max-width: [[$field_width]]px;
  margin: 0 5px 0 0;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 13px;
  [[$field_border]]
  [[$rounded_corners]]
}

.formbuilder select { width: [[$field_width+4]]px }

.formbuilder input[type="email"]:hover,
.formbuilder input[type="file"]:hover,
.formbuilder input[type="option"]:hover,
.formbuilder input[type="text"]:hover,
.formbuilder textarea:hover,
.formbuilder select:hover {
  [[$field_border_hover]]
  cursor: default;
}

.formbuilder input[type="submit"] {
  width: 100%;
  max-width: [[$field_width+4]]px;
  margin: 10px 0 0 0;
  [[$field_border]]
  [[$rounded_corners]]
  cursor: pointer;
}

.formbuilder input[type="submit"]:hover { [[$field_border_hover]] }

.formbuilder label {
  /*width: 100%;*/
  width: [[$label_width]]px;
  margin-bottom: 5px;
  float: left;
}

.formbuilder input[type="checkbox"] + label,
.formbuilder input[type="radio"] + label {
  width: 60px;
  float: left;
}

.formbuilder input[type="checkbox"] + label.label {
  width: 190px;
  float: right;
}

.formbuilder_text_error {
  color: #f00;
font-weight: bold;
}

.captchapict {
  width: [[$field_width]]px;
  [[$field_border]]
  [[$rounded_corners]]
}

.formbuilder_field_error input[type="email"],
.formbuilder_field_error input[type="file"],
.formbuilder_field_error input[type="option"],
.formbuilder_field_error input[type="text"],
.formbuilder_field_error select,
.formbuilder_field_error textarea,
.formbuilder_field_error .captchapict { border: #f00 solid 2px }

/**
 * Below some more available CSS codes...
 * Note: when you need them, the sequence of all lines is important!
.formbuilder input { }
.formbuilder input[type="button"] { }
.formbuilder input[type="radio"] { }
.formbuilder input[type="checkbox"] { }
.formbuilder legend { }
.formbuilder optgroup { }
.formbuilder fieldset { }
.formbuilder form { }
 *
 **/

[[/strip]]

Related blog post: Styling forms

You can use the demo form and stylesheet to create a new form at your website. Or use it to learn the basics of creating and styling Formbuilder forms.

  Working example


Note: I like to get feedback, but I can't (and won't) help you create your own form here. Use Google or the community boards of the CMSMS forum instead.



  Comment Form

Click here to open the form


  6 Comments

CMS Made Simple - Tutorials, tips and tricks - CMSMS

FormBuilder template and stylesheet

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.7
  Last updated: 02-04-2018
  Comments: 6
  http://cms.ms/ucmt

Advertisement



Ads help me to help you! Thanks!

Ads help me to help you! Thanks!

Ads help me to help you! Thanks!