HTML 5 Fancy Forms

October 28th, 2012

Fancy forms like the one shown below are quite easy to make.  All it takes is a little CSS and a touch of javascript, you too can create form like the one shown below.

Fancy Form with Icons

Create the HTML Form

Create the plain old HTML form with a little HTML5 magic via the placeholder attribute.  The code below creates the form above.

<form method="post">
     <input id="visitorname" type="text" name="visitorname" placeholder="Your Name" />
     <input id="email" type="text" name="email" placeholder="Email Address" />
     <textarea id="comment" name="comment" placeholder="Comment/Message"></textarea>   
     <input type="submit" name="action" value="Submit" />
</form>

Write the CSS

First you need some small icons/images that you will use for your fancy form.  In the example form I have three images: contact.gif, email.gif, and comment.gif.  Once you have this icons ready we can start writing the CSS.   We will use the icons as the background image of input and textarea tags, telling the web browser not to tile the image.  Then we just have to indent the text enough so that it does not overlap the background image.

#visitorname{
     background-image: url(images/contact.gif);
     background-repeat: no-repeat;
     text-indent: 20px;
     border: 2px solid #DDD;
}
#email{
     background-image: url(images/email.gif);
     background-repeat: no-repeat;
     text-indent: 20px;
     border: 2px solid #DDD;
}
#comment{
     background-image: url(images/comment.gif);
     background-repeat: no-repeat;
     text-indent: 20px;
     line-height: 20px;
     border: 2px solid #DDD;
}

Make it act right with JavaScript

At this point our form should be working in most web browser except for everyone’s friend IE, specially versions less than 10.  So in order to make it work for the IE users in the world we will need to download this script from github.  and include it on our site in a script tag and include a line of code to initialize the script.

<script type="text/javascript" src="js/Placeholders.js"></script>
<script type="text/javascript">
     Placeholders.init();
</script>

Conclusion

Now you should have a fully functional HTML form that looks a bit more modern than the default.  It is great for short forms where you need to save the space that having external labels require.

Radio Button Replacement Technique

March 7th, 2011

Sometimes radio buttons do not work with the layout of your site.  Perhaps the visitor needs to select an icon.  A radio button next to each icon does not look so great.

With a little CSS we can get something that looks much nicer.

Notice that the radio buttons are gone and when the user clicks a shape a border is drawn around the image.  This is achieved with the following HTML code:

<form method="post" action="">
	<div>Choose a shape:</div>
	<input type="radio" name="shape" value="square" id="square"/>
    <label for="square">
    	<img src="square.png" alt="square"/>
    </label>
    <input type="radio" name="shape" value="circle" id="circle"/>
    <label for="circle">
    	<img src="circle.png" alt="circle"/>
    </label>
    <input type="radio" name="shape" value="triangle" id="triangle"/>
    <label for="triangle">
    	<img src="triangle.png" alt="triangle"/>
    </label>
    <br/>
    <input type="submit" name="action" value="Choose Shape"/>
</form>

This HTML code uses an image inside of the label. With some CSS we will hide the radio buttons and draw a border around the image corresponding to the selected radio button.

/*Hide the radio buttons*/
[type='radio']{
		display: none;
}
/*Draw a plain border around the image so that
it does not move when selected */
label img{
	border: 3px solid white;
}
/*Draw a colored border around the image when the radio button 
adjacent to the label it is in is checked. */
[type='radio']:checked + label img{
	border: 3px solid #C63;
}

Easy HTML Form Emailer Written in PHP

February 13th, 2010

PHP Script

This easy to use script makes it easy to have an HTML form send its contents to you via email.  The PHP script is just a few lines of code.  Just customize four lines of code so that the script will send the email to the right address.  The lines of code in the easymailer.php file to modify are:

define("EMAIL","enteremail@here.com",false);
define("DESTINATION","success.htm", false);
define("SUBJECT","An email from your website.",false);
define("FROM","webmaster@yousite.com",false);

The first line configures who will receive the emailed form.  The second line determines what page the visitor will be sent to after the script has emailed you.  The third line is the determines what you will see in the subject line of the email you receive.  Line four determines who the sender will be in the email you receive.

The HTML Form

The only requires to use the PHP script is to set the form’s method attribute to post and the action attribute to ‘easymailer.php’.  See the example form below:

<form action="easymailer.php" method="post">
<input name="name" type="text" />
<input name="email" type="text" />
<input name="action" type="submit" value="Submit" />
</form>

When the visitor clicks submit the form data will be redirected to the easymailer.php script which will send the email and then redirect them to the page you configured it to.

You can download an example below just remember to change the four lines  in the easymailer.php file so it is properly customized for your needs. Then, upload easymail.php to your PHP enabled web server.

Download easy mailer script

Prefixing Icons to Hyperlinks

August 25th, 2009

link_icons

As shown in the image above icons can easily be prefixed to hyperlinks using the technique described below. The best part is that you do not have to muddle you HTML markup with extra image tags.  The steps involved to implement this are simple:

  1. Identify which links you want to prepend an icon to.  Use the attribute value selector to match the end of the attribute value with a file extension.
  2. Use a small gif, jpeg, or png image as the background-image for the particular link.
  3. Set the background-repeat to no-repeat.
  4. Set the padding left to the width of the icon.

This CSS was used to create the example shown above.

[href$='doc']{
      background-image: url(doc-type-doc.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='xls']{
      background-image: url(doc-type-xls.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='jpg']{
      background-image: url(doc-type-jpg.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='ppt']{
      background-image: url(doc-type-ppt.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }

Now any hyperlinks whose names end in doc, xls, jpg, or ppt will show the appropriate icon. The link below would display the doc icon in front of it.

<a href="files/report.doc">Annual Report</a>

Identifying External Links

The same technique can be used to identify links that lead to external sites.

[href^='http://']{
      background-image: url(external-site.png);
      background-repeat: no-repeat;
      padding-left: 18px;
}
<a href="http://www.google.com">Google</a>

Now any link beginning with http:// will have a special icon that informs the user that by clicking the link they will be take off of your site.