How to create a contact us form like: Your Message

When you place a cusor on your message, the cusor align to the left. When you type a text on it, the whole previous text like Subject etc disappeared.

This is a similar contact form that I create:

<div id="carticle3">

<div id="title">Your Message: </div><br><br>
<input type="text" name="name" value="Your name"><br>
<input type="text" name="email" value="Your email"><br>
<input type="text" name="subject" value="Subject"><br>
<textarea rows="4" cols="20">Message</textarea><br>


Yet, it's still different. Can anyone help me make the contact form more like the contact form in the link?

5 Years
Discussion Span
Last Post by Zagga

It's using html5 and the placeholder attribute.
If you view in IE7 you wont see the effect.


Please use the following code:

.validation-error {
background: none repeat scroll 0 0 #FFE9E9;
border-color: #FBC4C4;
color: #DE5959;
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language='javascript'>
function checkform()

    if(document.getElementById('name').value == '')
        $('input[type=text]').removeClass().addClass('input-text validation-error');
        return false;
        return true;
    <form id="contactFormIdNusa" onsubmit="return checkform()">
    <input name="idNusaContActFoRM" value="1" type="hidden">

    <div class="idNusaTryAgaiN"><input id="IdNuSaTknFldWDS" name="IdNuSaTknFldWDS" value="dbe81a81d7ecd" type="hidden"></div>
    <p class="form-row">
    <input style=" " id="name" name="idNusaName" class="input-text"  type="text">
    <p class="form-row">
    <input style=" " id="email" name="idNusaEmail" class="input-text" placeholder="Your email" type="text">
    <p class="form-row">
    <input style=" " id="subject" name="idNusaSubject" class="input-text" placeholder="Subject" type="text">
    <p class="form-row">
    <textarea style=" " id="message" name="idNusaMessage" class="input-text" placeholder="Message"></textarea>
    <p class="form-row">
    <input class="button" value="Submit" type="submit">

I have only checked for the name field. you can customize it as you want.
I have used the same html as on the mentioned site, please remove those unwanted id and class if you want.

Thank You

Edited by sinhaksaurabh: some details where missing


You can achieve a placeholder effect with HTML5 as paulkd suggested, or with JavaScript.

<input type="text" name="name" placeholder="Your name">

<input type="text" name="name" value="Your name" onclick="this.value=''">

This code shows me a blank form, instead of "Your name" text and turns blank when I click the form.

<input type="text" name="name" value="Your name" onclick="this.value=''"><br>

Hi again,
If you want the placeholder text to show whenever the field is blank, try :

<input type="text" name="name" value="Your name" onclick="this.value=''" onblur="if(this.value==''){this.value='Your name'}"><br>

Javascript was the old way of doing this and isn't as flexible as the HTML5 placeholder tag (JS changes the actual field value while HTML 5 doesn't, it just displays placeholder text)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.