Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
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. Book Author. Secretly Important.
WP Themes In Depth: Build and sell awesome WordPress themes.
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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Watching. Waiting. Praying.
Got all of my free WordPress plugins updated for imminent WP 5.6 in early December. Pro plugin updates currently in the works.
7G Firewall now integrated into BBQ Firewall (free version). Pro version soon ;)
macOS Big Sur update complete. So far no crazy issues. Except TextEdit, which is completely screwed up and unusable. Replaced with free BBEdit.
Got so sick of macOS’ annoying “red dot” that I had to remove System Prefs from the dock. Come on Apple you can do better.
Beginning development of an Nginx version of 7G Firewall.
Happy Birthday to Perishable Press, celebrating 15 years online! :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.