Custom Style Form Example

E-mail Print PDF

Download the sample form

Custom Style form example
    Personal
  1. Full Name(*)
    Please type your full name.
  2. E-mail(*)
    Invalid email address.
  3. Information
  4. Number of Employees(*)
    Please tell us how big is your company.
  5. Position(*)
    Please specify your position in the company
  6. How should we contact you?
  7. When would you like to be contacted?(*)
    Please select a date when we should contact you.
  8.   


In this article we will present how to style your form's layout. This is a simple task, you just need to add your form fields (textboxes, text-areas, drop-downlists...) from the Components tab and then go to the "CSS and Javascript" tab and customize your layout by adding your styling code in the CSS field.

Any CSS declarations need to be added between the <style type="text/css"> </style> tags, for exmaple:

<style type="text/css">
.formFieldset {
float:left;
background:none repeat scroll 0 0 #DDEEEE;
border:1px solid #000000;
margin:0 auto;
padding:10px;
width:470px; }
</style>

In order to change the background color of the input fields you will need to go to the Components tab, edit your desired field and add the following lines in the Additional attributes property

onFocus="this.style.backgroundColor='#FFCC99';"
onBlur="this.style.backgroundColor='#FFFFCC';"

You can read a detailed example on how to add a tooltip to your form fields here.

Last Updated on Wednesday, 18 August 2010 11:32  

RSform!Pro Submission Listing

Ted Smith ted@email.com
John Doe john@email.com
Results 1 - 2 of 2

RSForm! Pro Module

Module Position Sample
First Name

Invalid Input
Last Name

Invalid Input
Email Address (*)

Invalid Input

  


Time till next database reset