How to add an image as a submit button.

Follow

While this works with all CSS, so the tip is universal, this has been made for the ContactUs.com CSS Form Editor, an additional feature for premium users who use the ContactUs.com Lead Acquisition and Lead Management Platform made for SMBs.

Step 1 – Upload the image you are going to use

First, upload the image you want to use and get a link ready for it. In this example I’m going to use this one. Remember its easier and more practical avoid adding text, but if the font requirements are very specific, then you will probably need to add the text in the image and then delete the text in the button fields.

I have uploaded this image,

 

Step 2- Replace Submit Button CSS rules for the submit button class:

Go to de CSS editor module in your ContactUs.com admin panel, if you don’t know where to find it or how it works, look at this article.

In the Form’s CSS, find the following Class:

#out .custom_tbl .btn_submit

And replace the CSS for that class with the following CSS,

#out .custom_tbl .btn_submit{

            background:url("http://www.contactus.com/wp-content/uploads/2014/09/button-example.png") no-repeat scroll 0 0 transparent;

            color:#000000;

            cursor:pointer;

            font-weight:bold;

            height:69px;

            padding-bottom:2px;

            width:250px;

}

so it ends up looking like this:

  1. Remove Submit button text, if the image already has text

Now go to the fields section of your form, choose the submit button in the preview section, click on the edit icon and remove the text. So you can have a clean image with its own text, as a submit button.

 

 

The end result is exactly this:

Have more questions? Submit a request

Ask here, we will answer ASAP.

We prioritize answering community questions over individual support tickets.

Powered by Zendesk