Member Avatar for davy_yg

Hello,

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>

</div>

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

  • 4 Contributors
  • 5 Replies
  • 180 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Zagga
Member Avatar for paulkd

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

Member Avatar for sinhaksaurabh

Please use the following code:

<html>
<head>
<style>
.validation-error {
background: none repeat scroll 0 0 #FFE9E9;
border-color: #FBC4C4;
color: #DE5959;
}
</style>
<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;
    }
    else
    {
        return true;
    }
}
</script>
</head>
<body>
    <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>
    <p class="form-row">
    <input style=" " id="email" name="idNusaEmail" class="input-text" placeholder="Your email" type="text">
    </p>
    <p class="form-row">
    <input style=" " id="subject" name="idNusaSubject" class="input-text" placeholder="Subject" type="text">
    </p>
    <p class="form-row">
    <textarea style=" " id="message" name="idNusaMessage" class="input-text" placeholder="Message"></textarea>
    </p>
    <p class="form-row">
    <input class="button" value="Submit" type="submit">
    </p>
    </form>
</body>
</html>

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 because: some details where missing
Member Avatar for Zagga

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=''">
Member Avatar for davy_yg

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>
Member Avatar for Zagga

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)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.