[Thomas CParticipant]

Hi

I have some issues with my contact form. At the moment the text above the input fields is black or blue. I would like to change that to white, but I can’t seem to figure out how.

I would also like to control the width of the contact form, so that it has a fixed width. Is that possible?

In Chrome the submit button gets a green outline when pressed. It isn’t there in Safari. Is it possible to remove that?

If the input fields are not filled in when submitting it pups up with some notifying text about this issue. But there is a lot of lines popping op all over the contact form.

Cheers.

[Thomas CParticipant]

grafikerjobjatak.dk

[ChristianModerator]

Hey Thomas,

In the Customizer > Custom > CSS, please add the code below.

.wpcf7 p {
  color:white;
}

You can make it fixed width but that would cause layout issues in different devices.

To eliminate the green outline, use the CSS

.x-btn:focus,
.button:focus,
[type="submit"]:focus {
  outline: 0px;
}

Hope that helps. 🙂

[Thomas CParticipant]

Thank you very much!

This helped me to change most of the issues. I still have an issue when submitting the contactform. If submitted correct it shows a confirmation line with blue text in the top and in the bottom of the contactform? Ideally it should only be shown in the bottom/beneath the contactform. And it should be white like the rest of my text. When nothing is in the input fields it show all of the items missing with the same blue text all over the contactform. It looks a bit messy. Would it again be possible to move it all underneath the contactform with white text?

I hope it makes any sense to you what I’m trying to describe ;o)

[RubinKeymaster]

Hi Thomas,

I only see white text and a red background at the contact field so to hide the top message you would have to add:

.screen-reader-response { display: none; }

.wpcf7-response-output { color: #FFFFFF; }

[Thomas CParticipant]

Thank you. I think this might have done the trick!

[ChristianModerator]

You’re welcome Thomas.

[Ben HorleParticipant]

Hi guys

I’m trying to tidy up my contact form Dev.sussexchef.com/new but not sure how.

Can you point me in the direction of some learning material please?

Thanks

Ben

[DarshanaModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[thephotoboothmachineParticipant]

Hey there,

my website: http://www.thephotoboothmachine.com/

Here’s the part I’m working on with contact form 7:

I’ve gotten my contact form just about to where I’d like it but am having trouble styling the last (message) field differently from the rest of the input fields. Here’s what I’d like to do:

1) I’d like the last text input field (message) to be about 5 rows high/tall and keep it the same width as the other fields. When I added height: 3.45em; to the CSS it is effecting all the input fields which is good but I’d like the last one to be taller than the rest. Is there a way to isolate just that last field to make it a different height than the others?

2) I’d like there to be some top padding for the input text on the last (message) field. The padding for the input text on all the other fields is good but on the last (message) field there is no top padding. Is there a way to adjust that?

3) Can you help me with the CSS needed to change the input text size to 14px and font to Khmer and color to #444444 for all input fields?

Thank you so much for you help! This forum has been an invaluable resource for me in building my site. Your work is MUCH appreciated!

Cheers,
Matt

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

 textarea.wpcf7-form-control.wpcf7-textarea {
height: 100px !important;
padding-top: 17px;
}
.wpcf7 input {
color: #444444 !important;
font-size: 14px;
font-family: cursive;
}

Hope it helps.

[thephotoboothmachineParticipant]

Thanks! That worked beautifully!

[ChristianModerator]

You’re welcome. Glad we could help.

[Author]

Posts