8 Free Form Builders: Alternatives to HTML Forms

Published January 19, 2015 by saurav.roy.

For collecting information from the people or for collecting feedback, form is the best method. Form building by HTML can be boring. However, you should try different form builders. Here we will be discussing about the best 8 alternatives of the HTML form.

Google forms

Google doc is well-known as an excellent alternative of Microsoft Office. It can also be used for creating forms. Google forms are free and those can be placed in a spreadsheet automatically.

Wufoo

Wufoo is the one of the oldest tool for form making. Wufoo has been provided with great look. In addition, it has a very strong report generator, which will convert the data of form into customized charts. It is not free and it will cost $14.95 per month.

JotForm

JotForm is one of the fastest form builders. You just need to visit their website and you will be able to start creating a form immediately. It is free for 100 entries and after that it will cost $9.95 per month.

Formstack

If you want a form, which is professionally designed, then you will have to go for the Formstack. It is the most expensive among all as well. In addition, you will be able to find advanced features that will let you create a professional form in a very short time.

Typeforms

Typeform is one of the most unconventional form builders. It is very modern and the interface is perfect for portable devices. It will be available for free with core features. However, for pro features you have to pay $25 per month.

iFormBuilder

iFormBuilder has been designed specifically as a data collection solution for mobiles. Even if you are travelling, you will be able to collect data very easily. It is very costly as well in relation to other form builders. However, it will cost $50 per month for up to five users as well as 100 forms.

FormsCentral

FormsCentral is an excellent tool from Adobe to create forms. It has a flash powered designer that will let you design your form very smoothly. In addition, it will be able to import any sort of PDF forms. It will cost $11.99/+month.

Formsite

If you are going to sell your staffs through forms, in that case Formsite can be the best solution for you. It will offer billing features. This particular feature is not available with any other application. In addition, you will be able to accept payment from the credit cards directly. However, it will cost $24.95/month.

However, among all of the form builders, JotForm is the best option if you want to make your form for free. It is easy to use and easier to implement.

Stylize Checkboxes and Text Fields Using CSS

Published January 16, 2015 by saurav.roy.

Adding stylish checkboxes in HTML as well as buttons can be done very easily by using the CSS. There are actually two methods of creating stylish checkboxes. One method is image based and another method is based purely on CSS. However, here we will discuss both methods of adding stylish checkboxes.

Image based styling of checkboxes will allow excellent flexibility. Moreover, the appearance will be flexible as well. In this example, we will actually combine three images of three different states. Those states will be ‘selected radio button’, ‘unchecked’ along with ‘selected checkbox’.

The HTML of following form is going to be used for each radio button or checkbox.

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option">Value</label>
</div>

In the style-sheet, we will be hiding the radio buttons as well as checkboxes.

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

In the line 1 and line 2, selectors use negation pseudo-class for hiding the rules from the older browser. Line 3, 4, 5 is used for setting margin, padding and width. Line 6 has been used for rendering the standard user interface by setting the opacity. After that, we can now do the positioning of the label and displaying of any unchecked image. Here is the coding:

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

At last, when the radio buttons as well as checkboxes are selected, we will be able to display the selected images.

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}

As we have combined images of various states into one image, the rules will modify background position for showing appropriate image.
However, now we will be discussing the pure CSS styling. It will be also be scaled with the size of text.

The HTML coding will be same for all checkboxes.

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option"><span><span></span></span>Value</label>
</div>

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option"><span><span></span></span>Value</label>
</div>

The span is used for creating the alternative graphics. Both spans are required for radio buttons, in case of checkboxes only one is needed. However, now we have to hide the radio buttons as well as checkboxes from the style-sheet. Here is the coding.

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

After that, we need to position the label. The coding is here.

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

Now, we have to style the first span for creating unchecked graphics.

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

On the selected checkboxes as well as radio buttons, the background gradient is reversed.

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

After that, we need to display one tick inside the selected checkboxes.

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

At last, we have to display the ‘bullet’ within the selected radio button. There will be application of the same techniques as it has been for unchecked graphics to 2nd span element. Here is the coding:

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

Now we will discuss how we can add text fields. Addition of text field is pretty simple in relation to the checkboxes and radio buttons. The coding and result are given below.

<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
 .textbox { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
  } 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
 .textbox { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
  } 

15 Surefire Ways to Break Your CSS

Published March 26, 2009 by saurav.roy.

'Fixed' by Don Fulano. Used under a Creative Commons license.

The life of a CSS developer isn’t all about attending glamorous champagne parties, jet-setting around the world and hanging out with supermodels. In fact, when your CSS doesn’t behave the way it should, the job can be downright tedious. I’ve spent untold hours of my life debugging my code — and I’m guessing I’m not alone here.

But as silly as it may seem, some of the biggest CSS blunders stem from the simplest of errors. Knowing what some of those errors are and remembering to look for them can save you hours of wasted labor. Here are fifteen ways I’ve found to break my CSS for sure — and fifteen things I always look for whenever I have a problem in my code. Read On…

12 Creative and Cool Uses for the CSS Border Property

Published December 23, 2008 by saurav.roy.

random art using the CSS border property

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for. Read On…

7 Tips for Great Print Style Sheets

Published February 13, 2008 by saurav.roy.

Print documents - photo by desi.italy

CSS doesn’t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them – print. This can be a very useful trick, since people read on the screen very differently than they read print documents. And your fancy-dancy layout may look stellar at 1024×768, but that doesn’t mean it rocks equally at 8 1/2″ x 11″.

So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in.

1: Specify a Print Style Sheet

How’s that for a great opener? Specifying the style sheet in your code is the first step to a much more useable website. Here’s how you do it:

<link rel="stylesheet" href="print.css" 
media="print" />

The important part here is the media=”print” option. This tells the web browser to only apply these styles to print media.

2: Build On Your Screen CSS

One nice trick you can use is to build your print style sheet to amend your screen style sheet. To do this, simply neglect to reference a medium in your screen CSS link, like so:

<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="print.css" 
media="print" />

This causes your screen style sheet to be applied to both screen and print. Meaning, your print CSS only has to describe the things you want to do differently.

3: Wipe Out Your Screen CSS

Of course, if you want your print CSS to differ widely from your screen CSS, denoting all the differences between the two would be tedious. In that case, you’d want to do something like this:

<link rel="stylesheet" href="screen.css" 
media="screen" />
<link rel="stylesheet" href="print.css" 
media="print" />

Specifying a media of “screen” for your main CSS file means your print style sheet is building upon a blank slate. If you’re making a lot of changes, this can be useful.

4: Hide Extraneous Elements

Not everything that is useful on the screen is nearly so useful in print. For example, the navigation at the top of your page, or the blogroll in your sidebar, aren’t nearly so useful when they take up a full printed page and obscure your text. Consider hiding them in your print style sheet by creating a list of multiple selectors, like so:

#navigation, #blogroll {
	display: none;
}

Then, as you come across more elements that shouldn’t be in your printed version, you can just add them to the list.

5: Bump Up Font Sizes and Line-Heights

While I’m sure your 10-pixel-high cramped Helvetica looks so very avant-garde on the screen, people usually prefer a little more room when they’re reading on the page. Try bumping up the font-size and line-height a little compared to the screen:

body {
	font-size: 120%;
	line-height: 130%;
}

6: Move to Serif Fonts

Serif fonts were created to make it easier to read words on the printed page. The serifs (the little “feet” at the bottoms of letters) help the eye define the edges of the letters and lines on the page. Sans-serif fonts, on the other hand, were invented for the screen: the serifs on low-resolution monitors and at small sizes tend to make the letters look a little fuzzy. So while Helvetica may be a great choice for the screen, perhaps Georgia would be better suited for the page:

body {
	font-family: Georgia, "Times New Roman", 
	Times, serif;
}

7: Think in Inches and Points

Pixels are a useful unit of measurement when dealing with the screen, but they lose some of their usefulness when you move to the printed page. At that point, it’s useful to remember that in CSS, you’re not limited to setting sizes in pixels, percentages or ems. You also have inches, centimeters, millimeters, points, and even picos at your disposal. Make use of them:

body {
	font-family: Georgia, "Times New Roman", 
	Times, serif;
	font-size: 12pt;
	line-height: 18pt;
}
body #container {
	margin: 1in 1.2in .5in 1.2in;
}

What other print style sheet tips have I missed? Share the love in the comments!

The 4 CSS Rules of Multiplicity

Published February 11, 2008 by saurav.roy.

One quick and easy way to keep your CSS clean and well-structured is to remember (what I’m going to title) the four CSS Rules of Multiplicity. They are:

  • Multiple declarations can live in a single rule.
  • Multiple selectors can preface the same rule set.
  • Multiple rules can be applied to the same selector.
  • Multiple classes can be set on a single element.

Multiple declarations in a single rule is the most fundamental of the four CSS Rules of Multiplicity. Simply stated, it means you can have as many CSS declarations as you want between your opening and closing braces, like so:

body {
	property-1: value;
	property-2: value;
	...
	property-infinity: value;
}

Multiple selectors can really help keep your CSS clean by grouping your rules together. Consider the following example:

p {
	font-size: 110%;
	color: #333;
}
ul {
	font-size: 110%;
	color: #333; 
}

When rules are identical like this, you can combine them by using sequential selectors, like so:

p, ul {
	font-size: 110%;
	color: #333;
}

But what happens when you have two selectors that have very similar, but not quite identical, properties? That’s when multiple rules come into play. Here’s an example:

p {
	font-size: 110%;
	color: #333;
}
ul {
	font-size: 110%;
	color: #333;
	font-weight: bold;
}

The paragraph and unordered list share a few properties in common, but not all. But you’re allowed to refer to the unordered list more than once, so you could write something like this:

p, ul {
	font-size: 110%;
	color: #333;
}
ul {
	font-weight: bold;
}

Another way to tackle having multiple rules in common across elements is to create multiple classes. For example, you could create a rule like this:

.container {
	padding: 5px;
	border: 2px solid #ccc;
	background-color: #f2f2f2;
}

But then a while later, you decide you want something that is almost the same as your container class, but the text within is larger and boldfaced. You might be tempted to write a completely new class that includes the padding, border, background, and font size and weight that you need. But instead, you could just create a second class containing just the differences between the two, like this:

.strong {
	font-size: 150%;
	font-weight: bold;
}

And then apply both classes to your XHTML element thusly:

<div class="container strong">
	This text is in our container,
	but is also big and bold.
</div>

By using all four of these examples of multiplicity together, you can keep your CSS looking lean and clean. And luckily, unlike the movie version of Multiplicity, Michael Keaton doesn’t get dumber the more often you use them.

5 CSSriffic Treatments to Make Your Images Stand Out

Published February 4, 2008 by saurav.roy.

image-treatments-example.jpg

No web presence these days is complete without a little pixel lovin’ in the form of images. If you have a blog or website out there somewhere without a single image anywhere on the site, well… 1997 called. They said they’re sorry you fought and they want you to come back home.

Sometimes we need a little help to make our outstanding images truly stand out.

But sometimes just having images isn’t enough. Sometimes we need a little help to make our outstanding images truly stand out. And that’s where CSS can help. Here are five things you can do, using CSS, to make the most of your images.

The Wraparound Treatment

One of the easiest ways to add visual interest to your page (and your images at the same time) is to have your text wrap around your images. It’s very easy to do:

img.wrap {
	float: right;
	margin: 0 0 .5em 1em; 
}

The “float” property causes the image to literally float to the right side of whatever container it’s in, and causes the rest of the content inside that container to wrap around it. Then we just added a bit of a margin to the bottom and left sides of the image to prevent the text from butting right up against its edges. And you’ll note we used a “wrap” class on this rule, meaning we can choose which images get this treatment. You can see this in action here.

The Photo Treatment

This option gives your image a bit of a white border around the edges, just like photos in real life often have. Try this:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px; 
}

You can see the results here. What we’ve done is added a gray border to all four sides, changed the background color of the image to a very pale gray (almost white), and then added a bit of padding to all four sides between the background and the image itself, so the background color could show through. And you’ll note we used a class of “photo” here: this way, we can pick and choose in our code which images get this treatment.

The Depth Treatment

We can also expand on the Photo treatment above and use the borders to create a sense of depth:

 img.deep {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
	background-color: #fcfcfc;
	padding: 4px;
}

As you can see above and on the example page, we’ve changed the border colors slightly. We’ve made the top and left borders a slightly lighter shade than the bottom and right borders. This creates a subtle illusion of depth: the lighter border on the top and left suggests light is hitting those sides and the darker border on the bottom and right suggests a hint of a shadow created by a three-dimensional object.

The Shadow Treatment

And to expand further on the Depth treatment, we can use a bit of CSS magic and slightly modified HTML to really make the photo jump up off the page. We’ll start with this HTML:

<div class="shadow"><img src="photo.jpg" /></div>

As you can see, we’ve wrapped our image in a div. Then we just apply these styles:

.shadow {
	float: left;
	background-color: #aaa;
}
.shadow img {
	margin: -4px 4px 4px -4px;
	display: block; 
	position: relative;
	padding: 4px;
	background-color: #fcfcfc;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
}

Obviously, this is a more advanced technique than the previous options. We’re applying a background color to the div around our image, and then floating it so that it becomes the same size as the image inside. Then, we’re using negative margins to move our image up and to the left of where it was originally, setting a display of “block” and a position of “relative” to keep the floated div container from moving with our image. The result is that a few pixels of our background color are visible in the bottom right, creating the illusion of a shadow. Of course, as you can see by the example, it isn’t a true shadow: nothing shows through.

The Shadow Treatment, Part Two

If you want your shadow to behave like a real shadow, you’ll need to make use of a transparent PNG image. Image editing is beyond the scope of this article (and as you can probably tell from the site, this author), but if you create a semi-transparent square of black (I used 40% opacity) and save it as a PNG, then you can just replace this line:

background-color: #aaa;

With one like this:

background-image: url(shadow.png);

And the result is a transparent shadow effect! On browsers whose initials don’t spell IE6, anyway. As usual, IE is a party pooper: it doesn’t support transparency in images. But the result is a non-transparent shadow, no worse than what we had in the previous example.