New Bookstore! Save 20% on books with discount code: LAUNCH
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!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
BBQ Pro: The fastest firewall to protect your WordPress.
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 »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.