CSS Hooks for Contact Coldform

Updated June 26, 2018

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!

plugins

About the Author

Jeff Starr = Creative thinker. Passionate about free and open Web.