以下のjsfiddleがあります。メッセージ全体が正しく表示されるように、スパン内のエラーメッセージのスペースを増やす方法を知る必要があります。
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset>
<label>Name: </label><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset>
<label>Email: </label><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
CSS コード
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}