How To Add Placeholder Text In Subscribe Box Input

I have previously posted on how to create a simple Feedburner subscribe box for Blogger and WordPress.

The Simple Feedburner Subscribe Box contains no fancy designs but just plain text and a input form with a submit button. But did you notice that the input box is empty?

What we are going to do is just add a placeholder text (dummy text) inside the input box. And how to do that is exactly the subject of this post.

The simple subscribe box code is given below –

[html]

<div style=”background: #6eb800; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=USERNAME’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”USERNAME” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

Note: You have to replace USERNAME with your feedburner USERNAME

The code above generates a subscribe box as shown in the image below –

Simple Subscribe Box Without Placeholder

And you can see it contains no placeholder text in the input area. To add placeholder text, modify the 7th line in the code given above. The changes are as follows:

Previous Code

[html]

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>

[/html]

New Code

[html]

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email” placeholder=”Enter Your E-mail Here” />

[/html]

After making the changes, you will find a placeholder text “Enter Your Email Here” in the input area of the Subscribe Box.

Simple Subscribe Box With Placeholder

I hope this helps and for more amazing posts, subscribe to CodeFap blog feed.

1 Comment

Leave a Reply