How to change the submit button color, or add an image?

Posted by on Jan 1, 2011 in How To | Comments Off

Question:
How to change the submit button color, or add an image?

Answer:
Style it with inline CSS on the contact form settings page (you can change the color, or use a background image with CSS).

You can change “CSS style for Submit button on the contact form:” setting found on the contact form settings page.

Change the color of the Submit Button

Find the “CSS style for Submit button on the contact form:” setting on the contact form settings page.

Add color attributes: color:#000000; background-color:#CCCCCC;
change to any html hex color code you need.
Note: these custom settings will be safe when upgrading the plugin.

Adding an image to Submit Button

Here is a sample of a submit button that uses the “Submit” text.
Make sure to change the URL to your own button image after testing.
If you use a different size image, be sure to modify the width and height values in the CSS.

background:url(http://www.642weather.com/weather/images/bg-submit.png) no-repeat; width:50px; height:24px; padding:0px 0 4px 0; border:none; font-size:10px; cursor:pointer;

If your image already has text on it, do it like this:
background:url(http://www.642weather.com/weather/images/bg-submit.png) no-repeat; width:50px; height:24px; padding:0px 0 4px 0; border:none; text-indent: -1000em; cursor:pointer;

Discuss this issue in the WordPress plugins forum

Do you need help?

Donations by PayPal:

If you find this free contact form program/plugin useful to you, please consider making a small donation to help contribute to further development. My time is very limited and I get dozens of support emails every day. If you are not able to donate, that is OK. Thanks for your kind support! - Mike Challis

Donations by cash or check:
Mike Challis
PO Box 819
Long Beach WA 98631

Comments are closed.