CSS Hooks for Contact Coldform
Here is a complete list of CSS hooks (selectors) for the freshly revamped WordPress plugin, Contact Coldform.
Default CSS Styles
Here are the default hooks for the “default” theme:
#coldform {}
#coldform form {}
#coldform legend { margin: 5px 0 15px 0; }
#coldform fieldset { width: 100%; overflow: hidden; margin: 5px 0; }
.coldform-name {}
.coldform-email {}
.coldform-website {}
.coldform-topic {}
.coldform-response {}
.coldform-message {}
.coldform-carbon {}
#coldform .coldform-carbon input { float: none; display: inline-block; width: 18px; }
#coldform .coldform-carbon label { float: none; display: inline-block; }
div.coldform-submit {}
#coldform fieldset input { float: left; width: 60%; } /* excludes submit input */
#coldform input {}
#coldform_name {}
#coldform_email {}
#coldform_website {}
#coldform_topic {}
#coldform_response {}
#coldform_message {}
#coldform_carbon {}
#coldform_submit {}
#coldform textarea { float: left; clear: both; width: 95%; }
#coldform label { float: left; clear: both; width: 30%; margin-top: 3px; line-height: 1.8; font-size: 90%; }
/* welcome text */
.coldform-hello {}
/* success output */
#coldform_thanks {}
#coldform_thanks pre {}
#coldform_thanks pre code {}
.coldform-thanks {}
.coldform-thanks span { font-weight: bold; }
.coldform-reset {}
.coldform-reset a {}
/* error output */
#coldform_spam {}
#coldform_error {}
.coldform-error { font-weight: bold; }
.coldform-error-input {}
Classic CSS Styles
Here are the default hooks for the “classic” theme:
#coldform {}
#coldform form {}
#coldform legend { margin: 5px 0 15px 0; }
#coldform fieldset { width: 100%; overflow: hidden; margin: 5px 0; }
.coldform-name {}
.coldform-email {}
.coldform-website {}
.coldform-topic {}
.coldform-response {}
.coldform-message {}
.coldform-carbon {}
#coldform .coldform-carbon input { float: none; display: inline-block; width: 18px; }
#coldform .coldform-carbon label { float: none; display: inline-block; }
div.coldform-submit {}
#coldform fieldset input { float: left; clear: both; width: 60%; } /* excludes submit input */
#coldform input {}
#coldform_name {}
#coldform_email {}
#coldform_website {}
#coldform_topic {}
#coldform_response {}
#coldform_message {}
#coldform_carbon {}
#coldform_submit {}
#coldform textarea { float: left; clear: both; width: 95%; }
#coldform label { float: left; clear: both; width: 30%; margin-top: 3px; line-height: 1.8; font-size: 90%; }
/* welcome text */
.coldform-hello {}
/* success output */
#coldform_thanks {}
#coldform_thanks pre {}
#coldform_thanks pre code {}
.coldform-thanks {}
.coldform-thanks span { font-weight: bold; }
.coldform-reset {}
.coldform-reset a {}
/* error output */
#coldform_spam {}
#coldform_error {}
.coldform-error { font-weight: bold; }
.coldform-error-input {}
Dark CSS Styles
Here are the default hooks for the “dark” theme:
#coldform { padding: 5px 10px; background-color: #111; color: #999; }
#coldform form {}
#coldform legend { margin: 10px 0 15px 0; }
#coldform fieldset { width: 100%; overflow: hidden; margin: 5px 0; padding: 5px 0; background-color: #333; }
.coldform-name {}
.coldform-email {}
.coldform-website {}
.coldform-topic {}
.coldform-response {}
.coldform-message {}
.coldform-carbon {}
#coldform .coldform-carbon input { float: none; display: inline-block; width: auto; margin-left: 10px; }
#coldform .coldform-carbon label { float: none; display: inline-block; padding-left: 0; }
div.coldform-submit { margin: 5px 0 10px 0; }
#coldform fieldset input { float: left; width: 60%; background-color: #555; color: #999; border: 1px solid #777; } /* excludes submit input */
#coldform fieldset input:focus,
#coldform fieldset input:active { color: #ccc; }
#coldform input {}
#coldform_name {}
#coldform_email {}
#coldform_website {}
#coldform_topic {}
#coldform_response {}
#coldform_message {}
#coldform_carbon {}
#coldform_submit {}
#coldform textarea { float: left; clear: both; width: 95%; margin: 5px 0 5px 10px; background-color: #555; color: #999; border: 1px solid #777; }
#coldform textarea:focus,
#coldform textarea:active { color: #ccc; }
#coldform label { float: left; clear: both; width: 30%; margin-top: 3px; padding-left: 10px; line-height: 1.8; font-size: 90%; }
/* welcome text */
.coldform-hello {}
/* success output */
#coldform_thanks {}
#coldform_thanks pre {}
#coldform_thanks pre code {}
.coldform-thanks {}
.coldform-thanks span { font-weight: bold; }
.coldform-reset {}
.coldform-reset a {}
/* error output */
#coldform_spam {}
#coldform_error {}
.coldform-error { font-weight: bold; }
.coldform-error-input {}
HTML Markup for Contact Coldform
Here is the finely crafted HTML markup for Contact Coldform:
<div id="coldform">
<form action="#" method="post">
<legend title="Note: text only, no markup."><strong>Hello!</strong> Please use this contact form to send us an email.</legend>
<fieldset class="coldform-name">
<label for="coldform_name">Name (Required)</label>
<input name="coldform_name" id="coldform_name" type="text" size="33" maxlength="99" value="" placeholder="Your name" />
</fieldset>
<fieldset class="coldform-email">
<label for="coldform_email">Email (Required)</label>
<input name="coldform_email" id="coldform_email" type="text" size="33" maxlength="99" value="" placeholder="Your email" />
</fieldset>
<fieldset class="coldform-website">
<label for="coldform_website">Website (Optional)</label>
<input name="coldform_website" id="coldform_website" type="text" size="33" maxlength="177" value="" placeholder="Your website" />
</fieldset>
<fieldset class="coldform_topic">
<label for="coldform_topic">Subject (Optional)</label>
<input name="coldform_topic" id="coldform_topic" type="text" size="33" maxlength="177" value="" placeholder="Subject of email" />
</fieldset>
<fieldset class="coldform-response">
<label for="coldform_response">1 + 1 =</label>
<input name="coldform_response" id="coldform_response" type="text" size="33" maxlength="99" value="" placeholder="2" />
</fieldset>
<fieldset class="coldform-message">
<label for="coldform_message">Message (Required)</label>
<textarea name="coldform_message" id="coldform_message" cols="33" rows="7" placeholder="Your message"></textarea>
</fieldset>
<fieldset id="coldform_verify" style="display:none;">
<label for="coldform_verify">Human verification: leave this field empty.</label>
<input name="coldform_verify" type="text" size="33" maxlength="99" value="" />
</fieldset>
<fieldset class="coldform-carbon">
<input id="coldform_carbon" name="coldform_carbon" type="checkbox" value="1" checked="checked" />
<label for="coldform_carbon">Carbon Copy?</label>
</fieldset>
<div class="coldform-submit">
<input name="coldform_submit" type="submit" value="Send it!" id="coldform_submit" />
<input name="coldform_key" type="hidden" value="process" />
</div>
</form>
</div>
For more information about all of this, check out the Coldform homepage. Cheers!
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.