cmg wordpress foundation forms

functions.php

// Contact Page Form
function cmgContactPage($atts) {
return <<< HTML

<div class="contact-page-form">
	<form name="contact-page" id="contact-page" autocomplete="off" method="post" action="http://cmgmail.ceatus.com/cmgmail">
		<input type="hidden" name="web_form[form_name]" value="__FORM_ID_GENERATED_BY_CERP__"/>
		<div class="row">
			<div class="large-6 medium-6 columns">
				<input type="text" id="first-name" name="web_form[first_name]" placeholder="First Name *" class="contact-first-name" required />
			</div>
			<div class="large-6 medium-6 columns">
				<input type="text" id="last-name" name="web_form[last_name]" placeholder="Last Name *" class="contact-last-name" required />
			</div>
		</div>
		<div class="row">
			<div class="large-6 medium-6 columns">
				<input type="email" name="web_form[email]" placeholder="Email Address *" class="contact-email" required />
			</div>
			<div class="large-6 medium-6 columns">
				<input type="tel" name="web_form[phone]" placeholder="Phone Number" class="contact-phone" />
			</div>
		</div>
		<div class="row">
			<div class="large-12 columns">
				<textarea name="web_form[message]" placeholder="Questions/Comments *" class="contact-message" rows="7" cols="15" required></textarea>
			</div>
		</div>
		<div class="solve">
			<p>Complete the equation before submitting the form</p>
			<div class="tp-arrow"></div>
		</div>
		<div id="mc">
			<input type="text" name="mathcaptcha[form_c_1]" id="mc_form_c_1" value="" readonly>
			<span id="mc_form_op"></span>
			<input type="hidden" name="mathcaptcha[form_c_3]" id="mc_form_c_3" value="">
			<input type="text" name="mathcaptcha[form_c_2]" id="mc_form_c_2" value="" readonly>
			<span id="mc_form_eq">=</span>
			<input type="text" name="mathcaptcha[mc_r]" id="mc_r" maxlength="2" required>
		</div>
		<span class="contact-subject"><input type="text" name="web_form[subject]" value="" class="contact-subject"/></span>
		<input type="submit" name="submit" value="Submit" class="contact-submit"/>
	</form>
</div>

HTML;
}

add_shortcode( "cmgContactPage", "cmgContactPage" );

// Sidebar Form
function cmgSidebar($atts) {
return <<< HTML

<div class="sidebar-form">
	<h2>Contact Us</h2>
	<form name="contact-sidebar" id="contact-sidebar" autocomplete="off" method="post" action="http://cmgmail.ceatus.com/cmgmail">
		<input type="hidden" name="web_form[form_name]" value="__FORM_ID_GENERATED_BY_CERP__"/>
		<input type="text" id="first-name" name="web_form[first_name]" placeholder="First Name *" class="contact-first-name" required />
		<input type="text" id="last-name" name="web_form[last_name]" placeholder="Last Name *" class="contact-last-name" required />
		<input type="email" name="web_form[email]" id="email" placeholder="Email Address *" class="contact-email" required />
		<input type="tel" name="web_form[phone]" id="number" placeholder="Phone Number *" class="contact-phone" />
		<textarea name="web_form[message]" placeholder="Questions/Comments *" class="contact-message" rows="7" cols="15" id="message" required></textarea>
		<div class="solve">
			<p>Complete the equation before submitting the form</p>
			<div class="tp-arrow"></div>
		</div>
		<div id="mc">
			<input type="text" name="mathcaptcha[form_c_1]" id="mc_form_c_1" value="" readonly>
			<span id="mc_form_op"></span>
			<input type="hidden" name="mathcaptcha[form_c_3]" id="mc_form_c_3" value="">
			<input type="text" name="mathcaptcha[form_c_2]" id="mc_form_c_2" value="" readonly>
			<span id="mc_form_eq">=</span>
			<input type="text" name="mathcaptcha[mc_r]" id="mc_r" maxlength="2" required>
		</div>
		<span class="contact-subject"><input type="text" name="web_form[subject]" value="" class="contact-subject"/></span>
		<input type="submit" name="submit" value="Submit" class="contact-submit"/>
	</form>
</div>

HTML;
}

add_shortcode( "cmgSidebar", "cmgSidebar" );

/* ------------------------------------
		Contact Forms
------------------------------------- */
.sidebar-form,
.main-form {
	margin: 0 0 30px;
	padding: 20px 30px;
	border: solid 10px #e4ebc3; }
	.sidebar-form .contact-subject,
	.main-form .contact-subject {
		display: none; }
	.sidebar-form h2,
	.main-form h2 {
		margin: 0 0 20px;
		color: #ca5f71;
		font-size: 36px;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase; }
	.sidebar-form input, .sidebar-form textarea,
	.main-form input,
	.main-form textarea {
		border: none;
		box-shadow: none; }
	.sidebar-form .contact-first-name,
	.sidebar-form .contact-last-name,
	.sidebar-form .contact-phone,
	.sidebar-form .contact-email,
	.sidebar-form .contact-message,
	.main-form .contact-first-name,
	.main-form .contact-last-name,
	.main-form .contact-phone,
	.main-form .contact-email,
	.main-form .contact-message {
		height: 40px;
		padding: 0 22px;
		background-color: #f9edef;
		color: #ca5f71;
		font-size: 18px;
		outline: 0; }
		.sidebar-form .contact-first-name:focus,
		.sidebar-form .contact-last-name:focus,
		.sidebar-form .contact-phone:focus,
		.sidebar-form .contact-email:focus,
		.sidebar-form .contact-message:focus,
		.main-form .contact-first-name:focus,
		.main-form .contact-last-name:focus,
		.main-form .contact-phone:focus,
		.main-form .contact-email:focus,
		.main-form .contact-message:focus {
			background: #e4ebc3; }
	.sidebar-form .contact-message,
	.main-form .contact-message {
		height: 150px;
		margin-bottom: 25px;
		padding: 10px 20px; }
		.sidebar-form .contact-message:focus,
		.main-form .contact-message:focus {
			background: #e4ebc3; }
	.sidebar-form .solve,
	.main-form .solve {
		position: relative;
		margin: 0 0 25px;
		background-color: #7d8a2e;
		border-radius: 10px;
		text-align: center; }
		.sidebar-form .solve p,
		.main-form .solve p {
			padding: 5px 20px 10px;
			font-size: 16px;
			color: #fff;
			line-height: 1.2; }
	.sidebar-form .tp-arrow,
	.main-form .tp-arrow {
		height: 0;
		width: 0;
		border-top: 15px solid #7d8a2e;
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		position: absolute;
		left: 50%;
		bottom: -15px;
		margin-left: -30px; }
	.sidebar-form #mc,
	.main-form #mc {
		margin: 0 0 5px;
		text-align: center; }
		.sidebar-form #mc input,
		.main-form #mc input {
			display: inline-block;
			width: 20%;
			background-color: #e4ebc3;
			text-align: center;
			font-size: 24px;
			color: #7d8a2e; }
		.sidebar-form #mc #mc_form_op, .sidebar-form #mc #mc_form_eq,
		.main-form #mc #mc_form_op,
		.main-form #mc #mc_form_eq {
			margin: 0 10px;
			font-size: 24px;
			color: #7d8a2e; }
	.sidebar-form .contact-submit,
	.main-form .contact-submit {
		width: 100%;
		padding: 20px 0;
		color: #fff;
		background: #7d8a2e;
		font-size: 24px;
		text-transform: uppercase; }
		.sidebar-form .contact-submit:hover,
		.main-form .contact-submit:hover {
			background: #ca5f71;
			transition: all .2s ease; }