Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adding responsive styles to footer, modal, and nav & activating forms…

… for BOTH contact forms
  • Loading branch information...
commit 59223a882104973caf8adf221aeb073e852a5c71 1 parent c270789
Nick DiMatteo authored
Showing with 114 additions and 76 deletions.
  1. +36 −0 css/style.css
  2. +12 −12 footer.php
  3. +66 −64 js/main.js
View
36 css/style.css
@@ -654,6 +654,42 @@ footer .top:hover {
}
+/*-----Responsive-----*/
+
+@media (max-width: 979px) {
+
+ .navbar {
+ width: 100%;
+ padding: 0 20px;
+ margin-left: -20px;
+ margin-top: -22px;
+ }
+
+ .navbar .nav { display: block; }
+
+}
+
+@media (max-width: 767px) {
+
+ .modal {
+ width: 540px;
+ margin: -220px 0 0 -270px;
+ }
+
+ footer .top {
+ width: 100%;
+ height: auto;
+ line-height: 40px;
+ top: auto;
+ right: auto;
+ position: relative;
+ margin: 40px 0 20px -20px;
+ padding: 0 20px;
+ }
+
+}
+
+
/*--Custom Scrollbar--*/
.jspContainer
View
24 footer.php
@@ -88,33 +88,33 @@
</aside>
<div class="span4 offset3 form">
- <form class="wrapper">
+ <form class="wrapper" action="<?php echo get_template_directory_uri(); ?>/form/" method="post">
<div class="control-group">
- <label>First Name</label>
- <input type="text" class="input-small">
+ <label for="firstName">First Name</label>
+ <input type="text" class="input-small" name="firstName">
</div>
<div class="control-group">
- <label>Last Name</label>
- <input type="text" class="input-small">
+ <label for="lastName">Last Name</label>
+ <input type="text" class="input-small" name="lastName">
</div>
<div class="control-group">
- <label>Email Address</label>
- <input type="text" class="input-small">
+ <label for="email">Email Address</label>
+ <input type="text" class="input-small" name="email">
</div>
<div class="control-group">
- <label>Phone Number</label>
- <input type="text" class="input-small">
+ <label for="phone">Phone Number</label>
+ <input type="text" class="input-small" name="phone">
</div>
<div class="control-group">
- <label>How can we help you?</label>
- <textarea class="input-large" id="textarea" rows="4"></textarea>
+ <label for="message">How can we help you?</label>
+ <textarea class="input-large" id="message" name="message" rows="4"></textarea>
</div>
- <button type="submit" class="btn">Submit</button>
+ <button type="submit" class="btn submit">Submit</button>
</form>
</div>
View
130 js/main.js
@@ -668,70 +668,72 @@
//contact form validation
$(function() {
- $('.form form').validate({
- // Specify what the errors should look like
- // when they are dynamically added to the form
- errorElement: "label",
- wrapper: "div",
- errorPlacement: function(error, element) {
- error.insertBefore( element.parent() );
- error.wrap("<div class='error'></div>");
- },
-
- // Add requirements to each of the fields
- rules: {
- firstName: {
- required: true,
- minlength: 2
- },
- lastName: {
- required: true,
- minlength: 2
- },
- email: {
- required: true,
- email: true
- },
- message: {
- required: true,
- minlength: 10
- }
- },
-
- // Specify what error messages to display
- // when the user does something horrid
- messages: {
- firstName: {
- required: "Please enter your first name.",
- minlength: jQuery.format("At least {0} characters required.")
- },
- lastName: {
- required: "Please enter your last name.",
- minlength: jQuery.format("At least {0} characters required.")
- },
- email: {
- required: "Please enter your email.",
- email: "Please enter a valid email."
- },
- message: {
- required: "Please enter a message.",
- minlength: jQuery.format("At least {0} characters required.")
- }
- },
-
- // Use Ajax to send everything to processForm.php
- submitHandler: function(form) {
- $(".submit").attr("value", "Sending...");
- $(form).ajaxSubmit({
- target: "#response",
- success: function(responseText, statusText, xhr, $form) {
- $(form).slideUp("fast");
- $("#response").html(responseText).hide().slideDown("fast");
- }
- });
- return false;
- }
- });
+ $('.form form').each(function() {
+ $(this).validate({
+ // Specify what the errors should look like
+ // when they are dynamically added to the form
+ errorElement: "label",
+ wrapper: "div",
+ errorPlacement: function(error, element) {
+ error.insertBefore( element.parent() );
+ error.wrap("<div class='error'></div>");
+ },
+
+ // Add requirements to each of the fields
+ rules: {
+ firstName: {
+ required: true,
+ minlength: 2
+ },
+ lastName: {
+ required: true,
+ minlength: 2
+ },
+ email: {
+ required: true,
+ email: true
+ },
+ message: {
+ required: true,
+ minlength: 10
+ }
+ },
+
+ // Specify what error messages to display
+ // when the user does something horrid
+ messages: {
+ firstName: {
+ required: "Please enter your first name.",
+ minlength: jQuery.format("At least {0} characters required.")
+ },
+ lastName: {
+ required: "Please enter your last name.",
+ minlength: jQuery.format("At least {0} characters required.")
+ },
+ email: {
+ required: "Please enter your email.",
+ email: "Please enter a valid email."
+ },
+ message: {
+ required: "Please enter a message.",
+ minlength: jQuery.format("At least {0} characters required.")
+ }
+ },
+
+ // Use Ajax to send everything to processForm.php
+ submitHandler: function(form) {
+ $(".submit").attr("value", "Sending...");
+ $(form).ajaxSubmit({
+ target: "#response",
+ success: function(responseText, statusText, xhr, $form) {
+ $(form).slideUp("fast");
+ $("#response").html(responseText).hide().slideDown("fast");
+ }
+ });
+ return false;
+ }
+ });
+ });
});
Please sign in to comment.
Something went wrong with that request. Please try again.