Save 25% on our pro plugins with coupon code: SPRING2023
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 = Creative thinker. Passionate about free and open Web.
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 »
Banhammer: Protect your WordPress site against threats.
Thoughts
Excellent (and free) tool to test your site's SSL configuration.
Plugin updates! All of our free and pro plugins ready for WordPress 6.2.
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.