Docs

[Super]

Hi guys.
Thanks for all your help on this forum.
I’m trying to make some small css changes to my contact form on this site.

1) How do I change the height of each field?
2) How do I change the spacing between each field?
3) How do I change the size of the placeholder text in each field?
4) How do I make the date picked in the 3rd field display placeholder text saying “Pick Your Date”
5) How do I make the colour of the date field match the rest of the fields?
6) How do I make the date field pop up the calendar when the field is clicked, rather than having to click the arrow on the far right to make it appear?

Thanks so much.

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 1.65em;
    margin-bottom: 0;
    font-size: 15px;
}
label, input, button, select, textarea {
    font-size: 100%;
    line-height: 0.8;
}

#4,6 Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

#5 Please provide us with mockup if it’s possible.

Hope that helps.

[Super]

This reply has been marked as private.

[Lely]

Hi There,

You’re always welcome!
Please use this:

input.wpcf7-form-control.wpcf7-submit:hover {
    color: red; /*Change to your preferred color on hover*/
}
input.wpcf7-form-control.wpcf7-submit {
    color: green;
}

Hope this helps.

[Author]

Posts