Celebrating 20 years online :)
Web Dev + WordPress + Security

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 = Designer. Developer. Producer. Writer. Editor. Etc.
Banhammer: Protect your WordPress site against threats.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
RIP ICQ
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.