Using The Mind To It’s Fullest Potential What Is Social Media Marketing?

How To Add Images To Form Buttons Via WordPress

Posted by MatthewNeer on Feb 6, 2010 | View Comments

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Are you tired of plain, boring forms that just straight up look ugly? Have you ever wanted to integrate one of those nice big buttons that could be seen from space so that no one could possibly miss the submit button?

That’s exactly what you’re going to learn how to do right now. Let’s get started.

Okay, so here the form code from the “Before” image

<center><form action=”http://www.getresponse.com/cgi-bin/add.cgi” method=”post” accept-charset=”UTF-8″>
<label for=”subscriber_name”>Name :</label>
<input id=”subscriber_name” name=”subscriber_name” type=”text” value=”" />
<br/>
<label for=”subscriber_email”>Email :</label>
<input id=”subscriber_email” name=”subscriber_email” type=”text” value=”" />
<br>
<br>
<input type=”submit” value=”Get The eBook! />
<input type=”hidden” name=”error_url” id=”error_url” value=”http://matthewneer.com/error/”/>
<input type=”hidden” name=”confirmation_url” id=”confirmation_url” value=”http://matthewneer.com/articlemarketing”/>
<input type=”hidden” name=”campaign_name” id=”campaign_name” value=”internetmarketer”/>
<input type=”hidden” name=”custom_ref” id=”custom_ref” value=”cannon”/></form>
<script type=”text/javascript”>var el=document.getElementById(“custom_http_referer”);if(el != null){el.value = document.location};</script></center>

I highlighted the only line of code that I changed in red. All you need to do is use type=”image” instead of type=”submit” and then add the url of the image in a src=”http://imagepathgoeshere”. When you’re looking for this piece of code in your autoresponder code it’s going to be all clumped together and look like a mess. Just know that it comes right after the last field where the user will input some of their info. It should come right after that.

Now just change that line of code to something that looks like this. (remember, this replaces the red code)

<input type=”image” src=”http://articlecannon.matthewneer.com/wp-content/uploads/2010/02/ebook.png” />

Make sure you save your changes, refresh the page and you should see an image there in place of the original button.

I hope this post helps you out a bunch. If something wasn’t as clear as it could be please leave me a comment and let me know so I can personally help ya out.

If you enjoyed this post, share it.

If you enjoyed this post, you might also like my eBook Article Cannon

If you haven't got it yet, you may want to download this private interview with Frank Kern. Thanks for visiting!

beverlymonical

You are another valuable source of information.I have bookmarked your site. Thanks Matthew!
Jodie Thompson

Perfect Timing Matthew!

I have this info tucked away in an email from Get Response and because of this easy to understand post, I dont' have to go digging around to find it - thank you thank you thank you :)

So much easier to just bookmark this page :)

Cheers
Jodie
MatthewNeer

You're welcome Jodi, glad this was able to help you out a ton. Once ya do this once, it's SUPER easy. You should give this post a Digg to if you have an account with them.

Thanks!
Jodie Thompson

You're too slow ... of course I dugg it!!
MatthewNeer

lol, well thanks for the ninja fast Digg!