Contact-Form Fields WordPress
- SOLVED
This may be a stupid question - but I can't figure out why the form fields won't show up here:
http://thebodyconnection.ca/site/contact-us/
Answers (2)
Pixel Coder answers:
If you can locate your themes style.css apply something like this.
.wpcf7-text {
padding: 2px !important;
line-height: 1.2em !important;
background: #fcfcfc !important;
border: 1px solid #f5f5f5 !important;
font-family: 'MuseoSans500' !important;
font-size: 12px !important;
color: #000000 !important;
}
Alternativey change line 616 in main.css
to this.
#checkout_page_container input[type="text"],
#checkout_page_container select,
#checkout_page_container textarea, .wpcf7-text
Emilia Farrace comments:
thanks! this worked - however, didn't change anything for the "your-message" part and i see that there's no class value assigned to it.
Do you know how i would add that by chance?
Pixel Coder comments:
Well there are arguments surrounding specificity. You could do this...
#checkout_page_container input[type="text"],
#checkout_page_container select,
#checkout_page_container textarea, .wpcf7-text, .wpcf7-form textarea
But there are closer ways to target it within the form. However this will hit up all instances of the WordPress Contract Form plugin now. So that's probably the way to go.
Pixel Coder comments:
Well there are arguments surrounding specificity. You could do this...
#checkout_page_container input[type="text"],
#checkout_page_container select,
#checkout_page_container textarea, .wpcf7-text, .wpcf7-form textarea
But there are closer ways to target it within the form. However this will hit up all instances of the WordPress Contract Form plugin now. So that's probably the way to go.
Emilia Farrace comments:
thank you!!! it fixed it.
Pixel Coder comments:
You are welcome, thank you very much.
Gabriel Reguly answers:
Hi ecurls,
Do you mean they have no borders?
Regards,
Gabriel
Gabriel Reguly comments:
Hi,
Trouble is that your theme is loading reset.css after the other files, then rendering the input fields 'invisible'.
Change your rule
@import "reset.css";
with the actual content of reset.css
Regards,
Gabriel
Gabriel Reguly comments:
Hi,
Any luck?
File to be edited is /wp-content/themes/tbc/css/style.css
Regards,
Gabriel Reguly
Gabriel Reguly comments:
Hi,
Edit /wp-content/themes/tbc/css/style.css
and remove line <strong>@import "reset.css";</strong>
Put this code instead:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-moz-font-feature-settings: inherit;
-moz-font-language-override: inherit;
border: 0 none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: normal;
line-height: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none outside none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
outline: 0 none;
text-decoration: none;
}
a:visited {
outline: 0 none;
text-decoration: none;
}
a:hover {
outline: 0 none;
text-decoration: none;
}
a:active {
outline: 0 none;
text-decoration: none;
}
It will fix both issues.
Regards,
Gabriel