I have got the next "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 wish to slowly move the "enter e-mail" section within the form part. To ensure that once the user clicks it, the written text will appear reduced.

Could someone help me with how to achieve that?

The next code is going to do what you would like, but additionally maintain an e-mail once joined..


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


<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';

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

<input type="text" name="email" onclick="this.value='';" value="enter e-mail" />

Not examined, should work though!