Skip to content

Instantly share code, notes, and snippets.

@jnritchie

jnritchie/contact.html

Forked from ajtroxell/contact.html
Last active August 29, 2015 14:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jnritchie/673f07813cac6ca5caba to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jnritchie/673f07813cac6ca5caba to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ajtroxell revised this gist Feb 5, 2014. 1 changed file with 10 additions and 3 deletions.
    13 changes: 10 additions & 3 deletions validate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    jQuery.validator.addMethod('answercheck', function (value, element) {
    return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");

    // validate contact form
    $(function() {
    $('#contact').validate({
    @@ -13,7 +17,7 @@ $(function() {
    message: {
    required: true
    },
    captcha: {
    answer: {
    required: true,
    answercheck: true
    }
    @@ -30,7 +34,7 @@ $(function() {
    required: "um...yea, you have to write something to send this form.",
    minlength: "thats all? really?"
    },
    captcha: {
    answer: {
    required: "sorry, wrong answer!"
    }
    },
    @@ -40,7 +44,10 @@ $(function() {
    data: $(form).serialize(),
    url:"process.php",
    success: function() {
    $('#contact :input').attr('disabled', 'disabled');
    $('#contact').fadeTo( "slow", 0.15, function() {
    $(this).find(':input').attr('disabled', 'disabled');
    $(this).find('label').css('cursor','default');
    $('#success').fadeIn();
    });
    },
    @@ -52,4 +59,4 @@ $(function() {
    });
    }
    });
    });
    });
  2. ajtroxell revised this gist Sep 28, 2013. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ form label.error {
    line-height:12px;
    color:#c0392b
    }
    form input[type="text"], form input[type="password"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="week"], form input[type="email"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="time"], form input[type="url"], form textarea {
    form input[type="text"], form textarea {
    margin-bottom:1.25em;
    font-family:"Inconsolata", sans-serif;
    font-size:1.4rem;
    @@ -34,16 +34,16 @@ form input[type="text"], form input[type="password"], form input[type="date"], f
    -webkit-border-radius:0.2em;
    border-radius:0.2em
    }
    form input[type="text"]:focus, form input[type="password"]:focus, form input[type="date"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus, form input[type="month"]:focus, form input[type="week"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus, form input[type="time"]:focus, form input[type="url"]:focus, form textarea:focus {
    form input[type="text"]:focus, form textarea:focus {
    border-color:#191919;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none
    }
    form input[type="text"][disabled], form input[type="password"][disabled], form input[type="date"][disabled], form input[type="datetime"][disabled], form input[type="datetime-local"][disabled], form input[type="month"][disabled], form input[type="week"][disabled], form input[type="email"][disabled], form input[type="number"][disabled], form input[type="search"][disabled], form input[type="tel"][disabled], form input[type="time"][disabled], form input[type="url"][disabled], form textarea[disabled] {
    form input[type="text"][disabled], form textarea[disabled] {
    background:#fff
    }
    form input[type="text"].error, form input[type="password"].error, form input[type="date"].error, form input[type="datetime"].error, form input[type="datetime-local"].error, form input[type="month"].error, form input[type="week"].error, form input[type="email"].error, form input[type="number"].error, form input[type="search"].error, form input[type="tel"].error, form input[type="time"].error, form input[type="url"].error, form textarea.error {
    form input[type="text"].error, form textarea.error {
    background:#e6e6e6;
    border-color:#c0392b
    }
    @@ -55,16 +55,16 @@ fieldset {
    .required {
    color:#e9266d
    }
    #success,#error {
    #success, #error {
    display:none
    }
    #success span,#erro span {
    #success span, #erro span {
    display:block;
    position:absolute;
    top:0;
    width:100%
    }
    #success span p,#error span p {
    #success span p, #error span p {
    margin-top:6em
    }
    #success span p {
  3. ajtroxell revised this gist Sep 28, 2013. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions contact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,22 @@
    <form id="contact" name="contact" method="post">
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>
    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>

    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />
    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />

    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>
    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>

    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>
    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>

    <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
    <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
    </form>

    <div id="success">
  4. ajtroxell revised this gist Sep 28, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions contact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <form id="contact" name="contact" method="post">
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>
    @@ -22,11 +22,11 @@
    <div id="success">
    <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
    </span>
    </span>
    </div>

    <div id="error">
    <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
    </span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
    </span>
    </div>
  5. ajtroxell revised this gist Sep 28, 2013. 2 changed files with 31 additions and 25 deletions.
    50 changes: 26 additions & 24 deletions contact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,32 @@
    <form id="contact" name="contact" method="post">
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>
    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>

    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />
    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />

    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>
    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>

    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>
    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>

    <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
    </form>
    <div id="success">
    <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
    </span>
    </div>
    <div id="error">
    <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
    </span>
    </div>
    <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
    </form>

    <div id="success">
    <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
    </span>
    </div>

    <div id="error">
    <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
    </span>
    </div>
    6 changes: 5 additions & 1 deletion validate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,11 @@ $(function() {
    $('#success').fadeIn();
    });
    },
    error: $('#error').show()
    error: function() {
    $('#contact').fadeTo( "slow", 0.15, function() {
    $('#error').fadeIn();
    });
    }
    });
    }
    });
  6. ajtroxell revised this gist Sep 28, 2013. 3 changed files with 17 additions and 5 deletions.
    7 changes: 6 additions & 1 deletion contact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,12 @@
    </fieldset>
    </form>
    <div id="success">
    <span class="green textcenter">
    <span>
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
    </span>
    </div>
    <div id="error">
    <span>
    <p>Something went wrong, try refreshing and submitting the form again.</p>
    </span>
    </div>
    12 changes: 9 additions & 3 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -55,15 +55,21 @@ fieldset {
    .required {
    color:#e9266d
    }
    #success {
    #success,#error {
    display:none
    }
    #success span {
    #success span,#erro span {
    display:block;
    position:absolute;
    top:0;
    width:100%
    }
    #success span p {
    #success span p,#error span p {
    margin-top:6em
    }
    #success span p {
    color:#9bd32d;
    }
    #error span p {
    color:#c0392b;
    }
    3 changes: 2 additions & 1 deletion validate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,8 @@ $(function() {
    $('#contact').fadeTo( "slow", 0.15, function() {
    $('#success').fadeIn();
    });
    }
    },
    error: $('#error').show()
    });
    }
    });
  7. ajtroxell revised this gist Sep 28, 2013. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,36 +3,36 @@ form {
    }
    form label {
    margin-bottom:.2em;
    font-size:13px;
    line-height:13px;
    font-size:1.3rem;
    line-height:1.3rem;
    font-size:13px;
    line-height:13px;
    color:#e6e6e1;
    text-shadow:0px -1px #202020
    }
    form label.error {
    margin-bottom:1em;
    font-size:12px;
    line-height:12px;
    font-size:1.2rem;
    line-height:1.2rem;
    font-size:12px;
    line-height:12px;
    color:#c0392b
    }
    form input[type="text"], form input[type="password"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="week"], form input[type="email"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="time"], form input[type="url"], form textarea {
    margin-bottom:1.25em;
    font-family:"Inconsolata", sans-serif;
    font-size:14px;
    line-height:14px;
    font-size:1.4rem;
    line-height:1.4rem;
    font-size:14px;
    line-height:14px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    background:#e6e6e6;
    border:1px solid #191919;
    -moz-border-radius:0.2em 0.2em 0.2em 0.2em;
    -webkit-border-radius:0.2em 0.2em 0.2em 0.2em;
    border-radius:0.2em 0.2em 0.2em 0.2em
    -moz-border-radius:0.2em;
    -webkit-border-radius:0.2em;
    border-radius:0.2em
    }
    form input[type="text"]:focus, form input[type="password"]:focus, form input[type="date"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus, form input[type="month"]:focus, form input[type="week"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus, form input[type="time"]:focus, form input[type="url"]:focus, form textarea:focus {
    border-color:#191919;
  8. ajtroxell renamed this gist Sep 27, 2013. 1 changed file with 0 additions and 0 deletions.
    0 contact.php → contact.html
    View file
    File renamed without changes.
  9. ajtroxell revised this gist Sep 27, 2013. 1 changed file with 69 additions and 0 deletions.
    69 changes: 69 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    form {
    margin:0
    }
    form label {
    margin-bottom:.2em;
    font-size:13px;
    line-height:13px;
    font-size:1.3rem;
    line-height:1.3rem;
    color:#e6e6e1;
    text-shadow:0px -1px #202020
    }
    form label.error {
    margin-bottom:1em;
    font-size:12px;
    line-height:12px;
    font-size:1.2rem;
    line-height:1.2rem;
    color:#c0392b
    }
    form input[type="text"], form input[type="password"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="week"], form input[type="email"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="time"], form input[type="url"], form textarea {
    margin-bottom:1.25em;
    font-family:"Inconsolata", sans-serif;
    font-size:14px;
    line-height:14px;
    font-size:1.4rem;
    line-height:1.4rem;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    background:#e6e6e6;
    border:1px solid #191919;
    -moz-border-radius:0.2em 0.2em 0.2em 0.2em;
    -webkit-border-radius:0.2em 0.2em 0.2em 0.2em;
    border-radius:0.2em 0.2em 0.2em 0.2em
    }
    form input[type="text"]:focus, form input[type="password"]:focus, form input[type="date"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus, form input[type="month"]:focus, form input[type="week"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus, form input[type="time"]:focus, form input[type="url"]:focus, form textarea:focus {
    border-color:#191919;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none
    }
    form input[type="text"][disabled], form input[type="password"][disabled], form input[type="date"][disabled], form input[type="datetime"][disabled], form input[type="datetime-local"][disabled], form input[type="month"][disabled], form input[type="week"][disabled], form input[type="email"][disabled], form input[type="number"][disabled], form input[type="search"][disabled], form input[type="tel"][disabled], form input[type="time"][disabled], form input[type="url"][disabled], form textarea[disabled] {
    background:#fff
    }
    form input[type="text"].error, form input[type="password"].error, form input[type="date"].error, form input[type="datetime"].error, form input[type="datetime-local"].error, form input[type="month"].error, form input[type="week"].error, form input[type="email"].error, form input[type="number"].error, form input[type="search"].error, form input[type="tel"].error, form input[type="time"].error, form input[type="url"].error, form textarea.error {
    background:#e6e6e6;
    border-color:#c0392b
    }
    fieldset {
    border:0px;
    margin:0;
    padding:0
    }
    .required {
    color:#e9266d
    }
    #success {
    display:none
    }
    #success span {
    display:block;
    position:absolute;
    top:0;
    width:100%
    }
    #success span p {
    margin-top:6em
    }
  10. ajtroxell revised this gist Sep 27, 2013. 5 changed files with 97 additions and 1 deletion.
    25 changes: 25 additions & 0 deletions contact.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <form id="contact" name="contact" method="post">
    <fieldset>
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>
    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>
    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />
    <label for="Message" id="message">Message<span class="required">*</span></label>
    <textarea name="message" id="message" required></textarea>
    <label for="Captcha" id="captcha">Name the small house pet that says "<i>meow</i>"<span class="required">*</span></label>
    <input type="text" name="captcha" value="" required/>
    <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
    </form>
    <div id="success">
    <span class="green textcenter">
    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
    </span>
    </div>
    3 changes: 3 additions & 0 deletions function.answercheck.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    jQuery.validator.addMethod('answercheck', function (value, element) {
    return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");
    1 change: 0 additions & 1 deletion new_gist_file
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    _
    19 changes: 19 additions & 0 deletions process.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <?php

    $to = "[email protected]";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
    $headers = "From: $from";
    $subject = "You have a message sent from your site";

    $fields = array();
    $fields{"name"} = "name";
    $fields{"email"} = "email";
    $fields{"phone"} = "phone";
    $fields{"message"} = "message";

    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

    $send = mail($to, $subject, $body, $headers);

    ?>
    50 changes: 50 additions & 0 deletions validate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    // validate contact form
    $(function() {
    $('#contact').validate({
    rules: {
    name: {
    required: true,
    minlength: 2
    },
    email: {
    required: true,
    email: true
    },
    message: {
    required: true
    },
    captcha: {
    required: true,
    answercheck: true
    }
    },
    messages: {
    name: {
    required: "come on, you have a name don't you?",
    minlength: "your name must consist of at least 2 characters"
    },
    email: {
    required: "no email, no message"
    },
    message: {
    required: "um...yea, you have to write something to send this form.",
    minlength: "thats all? really?"
    },
    captcha: {
    required: "sorry, wrong answer!"
    }
    },
    submitHandler: function(form) {
    $(form).ajaxSubmit({
    type:"POST",
    data: $(form).serialize(),
    url:"process.php",
    success: function() {
    $('#contact').fadeTo( "slow", 0.15, function() {
    $('#success').fadeIn();
    });
    }
    });
    }
    });
    });
  11. ajtroxell created this gist Sep 27, 2013.
    1 change: 1 addition & 0 deletions new_gist_file
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    _