Customizing the submit button and changing font

Hello,

I have a problem with my contact form. I want to change the submit button to an image, and also the position of it. This is the design of it now and the design I have in mind: https://imgur.com/AfpCC6g

And another problem I have with the contact form is that the font in the message box is Courier, and Circular in the other boxes. I want to have Circular in all of the boxes. How do I fix this?

The CSS I use for CF7 is the following:

/***********basic************/

/*Form width*/
.wpcf7 {
    text-align: left;
    width: 90%;
}

/*Input Field widths*/
.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
}

.wpcf7-text {

	height: 50px;
    padding-left: 10px;

}
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

/*Label Font*/
.wpcf7-form p {
    font-size: 16px;
}

/*Submit button Font*/
.wpcf7-submit {
    width: 85%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
    padding: 20px;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #3b86b0 !important;
}

/*Response messages - Error & Success*/
.wpcf7-response-output {
    margin-bottom: 30px !important;
}

/***********borders************/

/*Form border*/
.wpcf7 {
    padding: 20px 25px !important;
    padding-bottom: 0px !important;
}

/*Input Field borders*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #8F8F8F !important;
}

/*Submit button Background*/
.wpcf7-submit {
    background: #7E7E7E !important;
    color: #fff !important;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #5F5F5F !important;
}

/***********colors************/

/*Submit button background & border*/
.wpcf7-submit {
    background-color: #1d2731 !important;
    border: 2px solid #5A5050 !important;
    color: #5A5050 !important;
    font-weight: bold !important;
}

/*Submit button Hover styles*/
.wpcf7-submit:hover {
    background-color: rgba(29, 39, 49, 0.66) !important;    
    border-color: #e4e4e4 !important;
    color: #e4e4e4 !important;
}

/*Label Text color*/
.wpcf7-form p {
    color: #FFF;
}

.wpcf7-form label{
	/*display: none;*/
}

/*Input Field Text color*/
.wpcf7-text, .wpcf7-textarea {
	color: #414141;
}

/*Label Text color*/
.wpcf7-form p {
    /*display: none;*/
    /*color: #000000;*/
}

/*Submit button background & border*/

 .wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     background: #E2272E;
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 5px;
     width: auto;
     text-transform: uppercase;
     letter-spacing: 5px;

 }
 .wpcf7 input:hover[type="submit"] {
     background: #494949;
     transition: all 0.4s ease 0s;
 }
 .wpcf7 input:active[type="submit"] {
     background: #000000;
 }

/*Input Field border*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #5A3D3D !important;
}

.wpcf7-response-output {
    display: none !important;
}
.wpcf7 input,
.wpcf7 textarea {
	width: 100%;
}

.wpcf7 label {
	display: block;
}

div.wpcf7 {
	max-width: 150em;
	margin-left: auto;
	margin-right: auto;
}

Appreciate all the help I can get.

Thanks!

• This topic was modified 6 years, 8 months ago by thomahawk.