0

I've got the following "subscribe by e-mail" form:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=food101coil', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>enter e-mail:</p>
<p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="food101coil" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="SEND" /></form>

I want to move the "enter e-mail" section inside the form part. So that when the user clicks on it, the text will disappear.

Could someone please help me with how to do that?

Tal Galili
  • 24,605
  • 44
  • 129
  • 187

2 Answers2

3

The following code will do what you want, but also maintain an email once entered..

HTML

<input id="email" type="text" style="width:140px" name="email" value="enter e-mail"/>

JavaScript

<script type="text/javascript">
 var emailfield = document.getElementById('email');
 emailfield.onfocus = function(){
  if (this.value == 'enter e-mail') this.value = '';
 }
 emailfield.onblur= function(){
  if (this.value == '') this.value = 'enter e-mail';
 }
</script>

Live example: http://www.jsfiddle.net/YS2Xm/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • This almost work. The form is empty when the page is loaded. If I click on it once and then click away - it creates the text... – Tal Galili Jul 06 '10 at 09:36
  • @Tal, forgot to add the value attribute in the HTML .. answer updated. – Gabriele Petrioli Jul 06 '10 at 10:11
  • Still doesn't work for me. The solution from Grumpy actually did the trick. – Tal Galili Jul 06 '10 at 19:14
  • @Tal, not sure what does not work ... did you check the example ? Keep in mind that the solution from ApoY2k and Grumpy does not take into consideration a user that uses the tab key to select the email input box.. – Gabriele Petrioli Jul 06 '10 at 20:58
  • Hi Gaby, thanks for the efforts. I am not sure why it doesn't work, I tried it in various ways. It could be for the way WordPress behaves (I am using the code inside the text widget). I voted you up any way :) cheers, Tal – Tal Galili Jul 07 '10 at 07:12
1
<input type="text" name="email" onclick="this.value='';" value="enter e-mail" />

Not tested, should work though!

F.P
  • 17,421
  • 34
  • 123
  • 189