<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="landing-page"><div class="form-appointment"><div class="wpcf7" id="wpcf7-f560-p590-o1"><form action="/landing-page-template-do-not-delete/#wpcf7-f560-p590-o1" method="post" class="wpcf7-form" novalidate="novalidate" _lpchecked="1">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="560">
<input type="hidden" name="_wpcf7_version" value="3.5">
<input type="hidden" name="_wpcf7_locale" value="">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f560-p590-o1">
<input type="hidden" name="_wpnonce" value="dbb28877d5">
</div>
<div class="group">
<div style="width: 48%; float: left;">
<span class="wpcf7-form-control-wrap text-680"><input type="text" name="text-680" value="" size="45" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="Nombres"></span><br>
<span class="wpcf7-form-control-wrap email-680"><input type="email" name="email-680" value="" size="45" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" placeholder="Curso"></span><br>
<span class="wpcf7-form-control-wrap tel-630"><input type="tel" name="tel-630" value="" size="45" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" placeholder="Docente"></span><br>
<span class="wpcf7-form-control-wrap textarea-398"><textarea name="textarea-398" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" placeholder="Special notes, concerns, or requirements"></textarea></span></div>
<div style="width: 48%; float: right;">
<span class="wpcf7-form-control-wrap text-680"><input type="text" name="text-680" value="" size="45" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="Apellidos"></span><br>
<span class="wpcf7-form-control-wrap text-680"><input type="text" name="text-680" value="" size="45" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="Materia"></span><br>
<h4>What is the best way to reach you?</h4>
<p><span class="wpcf7-form-control-wrap radio-98"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item"><label><input type="radio" name="radio-98" value="Phone"> <span class="wpcf7-list-item-label">Phone</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="radio-98" value="Email"> <span class="wpcf7-list-item-label">Email</span></label></span></span></span></p>
<h4>Days of the week you are available for appointment:</h4>
<p><span class="wpcf7-form-control-wrap checkbox-465"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-465[]" value="Monday"> <span class="wpcf7-list-item-label">Monday</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-465[]" value="Tuesday"> <span class="wpcf7-list-item-label">Tuesday</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-465[]" value="Wednesday"> <span class="wpcf7-list-item-label">Wednesday</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-465[]" value="Thursday"> <span class="wpcf7-list-item-label">Thursday</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-465[]" value="Friday"> <span class="wpcf7-list-item-label">Friday</span></label></span></span></span></p>
<h4>Best time of day for your appointment:</h4>
<p><span class="wpcf7-form-control-wrap checkbox-246"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-246[]" value="Morning"> <span class="wpcf7-list-item-label">Morning</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="checkbox-246[]" value="Afternoon"> <span class="wpcf7-list-item-label">Afternoon</span></label></span></span></span></p></div>
</div>
<div style="text-align: center; padding-top: 2em; border-top: 1px solid rgb(153, 202, 129); margin-top: 1em;"><input type="submit" value="Subir datos" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" src="http://www.professionalaudiologicalservices.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div></div>
.group:after {
content: "";
display: block;
clear: both;
}
.landing-page {
width: 882px;
margin: 100px auto 0;
}
.landing-page *,
.landing-page *:before,
.landing-page *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.landing-page .module {
border: 1px solid rgb(219, 219, 219);
border-radius: 4px;
float: left;
padding: 2em;
width: 48%;
}
.landing-page .module > *:last-child,
.landing-page .module > *:last-child > *:last-child,
.landing-page .module > *:last-child > *:last-child > *:last-child {
margin: 0;
padding: 0;
}
.landing-page .note {
background-color: rgb(236, 248, 236);
border: 1px dashed;
border-radius: 4px;
color: rgb(115, 136, 96);
font-family: georgia;
font-size: .9em;
font-style: italic;
margin: 20px auto;
padding: 2em;
}
.form-appointment {
padding: 2em;
background-color: rgb(239, 252, 239);
border-radius: 4px;
border: 1px solid rgb(130, 228, 130);
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
font-family: 'PT Sans', Arial, sans-serif;
margin: 20px auto;
}
.form-appointment input[type=text],
.form-appointment input[type=email],
.form-appointment input[type=tel],
.form-appointment textarea {
border: 1px solid rgb(153, 202, 129);
border-radius: .2em;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1.1em;
padding: .4em 1em;
margin: 0 0 .8em;
width: 100%;
box-shadow: 0 0 8px rgba(0,0,0,.08) inset;
}
.form-appointment input[type=text],
.form-appointment input[type=email],
.form-appointment input[type=tel],
.form-appointment input[type=submit],
.form-appointment textarea {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.form-appointment input[type=text]:active,
.form-appointment input[type=text]:focus,
.form-appointment input[type=email]:active,
.form-appointment input[type=email]:focus,
.form-appointment input[type=tel]:active,
.form-appointment input[type=tel]:focus,
.form-appointment textarea:active,
.form-appointment textarea:focus {
outline: 0;
box-shadow: 0 0 6px rgb(176, 226, 188);
}
.form-appointment textarea {
height: 160px;
}
.form-appointment input[type=submit] {
background-color: rgb(118, 207, 118);
border: 1px solid rgb(134, 189, 134);
border-radius: 4px;
color: rgb(255, 255, 255);
cursor: pointer;
font-family: inherit;
font-size: 1.4em;
padding: 10px 18px;
}
.form-appointment input[type=submit]:hover {
background-color: white;
color: rgb(118, 207, 118);
}
.form-appointment .wpcf7-list-item-label {
color: rgb(130, 178, 136);
}
span.wpcf7-list-item {
display: block;
margin-left: -.02em;
}
$(document).ready(function () {
$('input[type=submit]').click(function () {
$('input[type=submit]').toggleClass('red');
});
});