[SandieParticipant]

Hi,

I am using Contact Form 7 on my site, and now it looks like this:
http://prntscr.com/cx513i

But I want it to look like this:
http://prntscr.com/cx54as

My site: http://sandramildon.com/contact/

Thanks!

Best Regards
/Sandra

[RahulModerator]

Hey There,

Thanks for writing in!

Please add this CSS at Appereance > Customizer > Custom > CSS :

.x-btn, .button {
  background-color:transparent;
  border-color:#FFFFFF;
  color:#000000;

Hope this helps!

Let us know how this goes!

[SandieParticipant]

Hi,

I added the CSS code, but nothing changed.

I want the Send-BUTTON to be wider as well and placed underneath NAME and EMAIL, as shown in the picture:

http://prntscr.com/cx54as

Thanks!

Best Regards
/Sandra

[ChristopherModerator]

Hi there,

Please move submit button to left div and insert following code in customizer :

input.wpcf7-form-control.wpcf7-submit {
    float: right;
    width: 100%;
    background-color: transparent;
    color: #000;
    border-color: #fff;
}

Hope it helps.

[SandieParticipant]

Hi,

Great, thank you!

1. Can you help me what CSS to add to get some effect on the button when hovered over.
I would like the button background to get WHITE, with black text inside.

2. I wanted to get the button in alignment with the rest of the items in Contact Form 7, so I added “heigh: 65px” in CSS. Is that correct or will it be displayed in a weird way when I put in pixels instead of %?

input.wpcf7-form-control.wpcf7-submit {
float: right;
width: 100%;
height: 65px;
background-color: transparent;
color: #000;
border-color: #000;
}

Thanks!

/Sandra

[ThaiModerator]

Hi There,

#1] Please add the following CSS:

input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #fff;
}

#2] It would be fine.

Regards!

[Author]

Posts