├── LICENSE ├── README.md ├── assets ├── css │ ├── base.css │ └── style.css └── js │ └── script.js ├── index.php └── sendmail.php /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Alessandro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Write to Me 2 | Simple contact form in PHP & jQuery 3 | 4 | [Try the Demo](http://www.alecaddd.com/code-spellbook/write-to-me/ "Demo") 5 | 6 | ## Getting Started 7 | * Download the whole package and upload it on your server 8 | * Remove the example Code and make the .mail-container visible 9 | * insert your inbox address inside the file sendmail.php 10 | 11 | ### Dependencies 12 | 13 | **write-to-me** uses [jQuery 1.11.1](//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "jQuery") and a bunch of icons from [Font-Awesome v4.1](//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css "Font Awesome") 14 | 15 | #### Help 16 | 17 | If you have some trouble please let me know 18 | -------------------------------------------------------------------------------- /assets/css/base.css: -------------------------------------------------------------------------------- 1 | /* basic css style */ 2 | html, 3 | body { 4 | font-family: 'Yanone Kaffeesatz', sans-serif; 5 | font-weight: 200; 6 | font-size: 21px; 7 | background: #f5f5f5 url('http://api.thumbr.it/whitenoise-361x370.png?background=f5f5f5ff&noise=626262&density=7&opacity=6') repeat; 8 | color: #3a3a3a; 9 | } 10 | 11 | body { 12 | padding-bottom: 80px; 13 | } 14 | 15 | h1, 16 | h2 { 17 | text-align: center; 18 | } 19 | 20 | a, 21 | button { 22 | cursor: pointer; 23 | outline: none; 24 | } 25 | 26 | a, 27 | a:visited {color: #B15252;text-decoration: none;} 28 | a:hover, 29 | a:focus {text-decoration: none;color: #ae2525;} 30 | 31 | h1.page-title { 32 | font-size: 65px; 33 | font-weight: 200; 34 | color: #B15252; 35 | margin-bottom: 10px; 36 | text-shadow: 0 1px 1px #fff; 37 | } 38 | 39 | h2.page-description { 40 | font-size: 19px; 41 | font-weight: 200; 42 | font-style: italic; 43 | color: #919191; 44 | margin-top: -5px; 45 | } 46 | 47 | .foot { 48 | text-align: center; 49 | font-size: 16px; 50 | font-weight: 300; 51 | display: block; 52 | position: fixed; 53 | left: 0; 54 | right: 0; 55 | bottom: 0; 56 | background: #fff; 57 | padding: 10px 0 0; 58 | } 59 | 60 | .foot .fa { 61 | font-size: 14px; 62 | } 63 | 64 | a.btn.btn-github { 65 | color: #6F6F6F; 66 | background: #E4E4E4; 67 | font-size: 13px; 68 | padding: 5px 6px; 69 | box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); 70 | } 71 | 72 | a.btn.btn-github:hover { 73 | color: #E4E4E4; 74 | background: #6F6F6F; 75 | box-shadow: 0 1px 0px rgba(0, 0, 0, 0.7); 76 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* Write to Me css style */ 2 | 3 | /* 4 | --------------------------------------------------- 5 | FORM ELEMENTS 6 | --------------------------------------------------- 7 | */ 8 | 9 | label { 10 | display: block; 11 | text-align: center; 12 | margin: 5px 0; 13 | font-weight: 300; 14 | } 15 | 16 | input, 17 | textarea { 18 | font-size: 20px; 19 | padding: 10px 12px; 20 | border-radius: 2px; 21 | border: 1px solid #ccc; 22 | color: #ae2525; 23 | outline: none; 24 | max-width: 300px; 25 | width: 100%; 26 | } 27 | 28 | textarea { 29 | resize: none; 30 | } 31 | 32 | input:focus, 33 | textarea:focus { 34 | border-color: #B15252; 35 | } 36 | 37 | input.first-input { 38 | text-align: center; 39 | } 40 | 41 | .mail-body label { 42 | text-align: left; 43 | width: 100%; 44 | max-width: 322px; 45 | margin: 5px auto; 46 | } 47 | 48 | .required label:after { 49 | content: '*'; 50 | color: #C70000; 51 | font-size: 15px; 52 | font-weight: 600; 53 | padding-left: 4px; 54 | } 55 | 56 | .name-input label:before, 57 | .email-input label:before, 58 | .msg-input label:before { 59 | content: ''; 60 | font-size: 21px; 61 | color: #D1D1D1; 62 | padding-right: 8px; 63 | font-family: FontAwesome; 64 | font-style: normal; 65 | font-weight: normal; 66 | line-height: 1; 67 | -webkit-font-smoothing: antialiased; 68 | -moz-osx-font-smoothing: grayscale; 69 | } 70 | .name-input label:before { 71 | content: "\f183"; 72 | } 73 | .email-input label:before { 74 | content: "\f0e0"; 75 | } 76 | .msg-input label:before { 77 | content: "\f040"; 78 | } 79 | 80 | .btn { 81 | font-size: 20px; 82 | font-weight: 400; 83 | color: #fff; 84 | padding: 10px 12px; 85 | border: none; 86 | border-radius: 2px; 87 | background-color: #B15252; 88 | } 89 | 90 | .btn:hover, .btn:focus { 91 | background-color: #ae2525; 92 | } 93 | 94 | .btn, input, a { 95 | -webkit-transition: all .2s ease-in-out; 96 | -moz-transition: all .2s ease-in-out; 97 | -o-transition: all .2s ease-in-out; 98 | transition: all .2s ease-in-out; 99 | } 100 | 101 | .btn-init { 102 | width: 100%; 103 | max-width: 200px; 104 | } 105 | 106 | .sending { 107 | border-radius: 50%; 108 | max-width: 43px; 109 | } 110 | 111 | .send { 112 | width: 100%; 113 | max-width: 100%; 114 | } 115 | 116 | /* 117 | --------------------------------------------------- 118 | RESPONSE ELEMENTS 119 | --------------------------------------------------- 120 | */ 121 | 122 | .error > input { 123 | border-color: #B15252; 124 | } 125 | 126 | .error:after { 127 | content: 'Invalid value'; 128 | display: inline-block; 129 | padding: 3px 7px; 130 | color: #fff; 131 | background: #F35959; 132 | border-radius: 2px; 133 | position: relative; 134 | float: right; 135 | margin-top: 9px; 136 | margin-left: -100px; 137 | -webkit-animation: fadein .6s ease-in-out; 138 | animation: fadein .6s ease-in-out; 139 | } 140 | 141 | /* 142 | --------------------------------------------------- 143 | FORM CONTAINER 144 | --------------------------------------------------- 145 | */ 146 | 147 | .container { 148 | width: 100%; 149 | max-width: 570px; 150 | margin: 40px auto; 151 | position: relative; 152 | } 153 | 154 | .input-container { 155 | text-align: center; 156 | } 157 | 158 | p.description { 159 | font-weight: 300; 160 | font-size: 17px; 161 | text-align: center; 162 | line-height: 1.3em; 163 | margin: 40px 0; 164 | color: #727272; 165 | } 166 | 167 | /* 168 | --------------------------------------------------- 169 | MAIL FORM CONTAINER 170 | --------------------------------------------------- 171 | */ 172 | 173 | .mail-container { 174 | -webkit-perspective: 1000; 175 | -moz-perspective: 1000; 176 | -o-perspective: 1000; 177 | perspective: 1000; 178 | display: none; 179 | -moz-transform: perspective(1000px); 180 | -moz-transform-style: preserve-3d; 181 | } 182 | 183 | .mail-container.hover .mail-content { 184 | transform: rotateY(180deg); 185 | } 186 | 187 | .mail-container, .mail-front, .mail-back { 188 | width: 100%; 189 | } 190 | 191 | .mail-content { 192 | transition: 0.6s;/* change the flip speed */ 193 | transform-style: preserve-3d; 194 | position: relative; 195 | margin-bottom: 30px; 196 | -moz-transform: perspective(1000px); 197 | -moz-transform-style: preserve-3d; 198 | } 199 | 200 | .mail-front, .mail-back { 201 | -webkit-backface-visibility: hidden; 202 | -moz-backface-visibility: hidden; 203 | -o-backface-visibility: hidden; 204 | backface-visibility: hidden; 205 | 206 | -webkit-transition: 0.6s; 207 | -webkit-transform-style: preserve-3d; 208 | 209 | -moz-transition: 0.6s; 210 | -moz-transform-style: preserve-3d; 211 | 212 | -o-transition: 0.6s; 213 | -o-transform-style: preserve-3d; 214 | 215 | -ms-transition: 0.6s; 216 | -ms-transform-style: preserve-3d; 217 | 218 | transition: 0.6s; 219 | transform-style: preserve-3d; 220 | 221 | background: #fff; 222 | border-radius: 2px; 223 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 224 | position: absolute; 225 | top: 0; 226 | left: 0; 227 | } 228 | 229 | .mail-front { 230 | z-index: 2; 231 | -webkit-transform: rotateY(0deg); 232 | } 233 | 234 | .mail-back { 235 | transform: rotateY(180deg); 236 | text-align: center; 237 | } 238 | 239 | /* 240 | --------------------------------------------------- 241 | MAIL CONTENT 242 | --------------------------------------------------- 243 | */ 244 | 245 | .mail-back .fa { 246 | margin: 25px 0; 247 | color: #CA5353; 248 | } 249 | 250 | p.thanks-title { 251 | font-size: 35px; 252 | font-weight: 200; 253 | color: #B15252; 254 | margin: 0; 255 | text-shadow: 0 1px 1px #fff; 256 | } 257 | 258 | p.thanks-msg { 259 | margin: 0 0 40px; 260 | } 261 | 262 | .reload { 263 | display: inline-block; 264 | font-size: 15px; 265 | font-weight: 300; 266 | padding: 4px 5px; 267 | border-radius: 2px; 268 | } 269 | 270 | .reload:hover { 271 | color: #fff; 272 | background: #B15252; 273 | } 274 | 275 | .mail-body { 276 | padding: 20px; 277 | margin-bottom: 5px; 278 | } 279 | 280 | .mail-body .input-container { 281 | margin-bottom: 20px; 282 | } 283 | 284 | /* 285 | --------------------------------------------------- 286 | LOADING PANEL 287 | --------------------------------------------------- 288 | */ 289 | 290 | .loading { 291 | width: 100%; 292 | height: 100%; 293 | text-align: center; 294 | font-size: 10px; 295 | position: absolute; 296 | background: rgba(0, 0, 0, 0.65); 297 | display: none; 298 | z-index: 9999; 299 | color: #fff; 300 | } 301 | 302 | .loading > p { 303 | font-size: 30px; font-weight: 200; 304 | } 305 | 306 | .loading > div { 307 | background-color: #fff; 308 | height: 30px; 309 | width: 3px; 310 | margin-top: 215px; 311 | display: inline-block; 312 | } 313 | 314 | /* 315 | --------------------------------------------------- 316 | ANIMATIONS 317 | --------------------------------------------------- 318 | */ 319 | 320 | @-webkit-keyframes fadein { 321 | 0% { opacity: 0; } 322 | 100% { opacity: 1; } 323 | } 324 | 325 | .loading > div { 326 | -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 327 | animation: stretchdelay 1.2s infinite ease-in-out; 328 | } 329 | 330 | .loading .rect2 { 331 | -webkit-animation-delay: -1.1s; 332 | animation-delay: -1.1s; 333 | } 334 | 335 | .loading .rect3 { 336 | -webkit-animation-delay: -1.0s; 337 | animation-delay: -1.0s; 338 | } 339 | 340 | .loading .rect4 { 341 | -webkit-animation-delay: -0.9s; 342 | animation-delay: -0.9s; 343 | } 344 | 345 | .loading .rect5 { 346 | -webkit-animation-delay: -0.8s; 347 | animation-delay: -0.8s; 348 | } 349 | 350 | @-webkit-keyframes stretchdelay { 351 | 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 352 | 20% { -webkit-transform: scaleY(1.0) } 353 | } 354 | 355 | @keyframes stretchdelay { 356 | 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 357 | 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } 358 | } -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | jQuery( document ).ready(function( $ ) { 2 | 3 | /* IF YOU REMOVED THE HTML OF THE INITIALIZE EXAMPLE ACTIVATE THE CALL TO THIS FUCNTION BELOW*/ 4 | /* init(); */ 5 | 6 | var recipient; /* store the recipient email for the example, you can delete this */ 7 | 8 | /* you can delete from here */ 9 | $( document ).on( 'click' , '.btn-init' , function() { 10 | 11 | if( isValidEmailAddress( $('#emailRecipient').val() ) ) { 12 | 13 | recipient = $('#emailRecipient').val(); 14 | 15 | $('div.error').removeClass('error'); 16 | 17 | init(); 18 | 19 | } else { 20 | 21 | $('#emailRecipient').focus().parent('div').addClass('error'); 22 | 23 | } 24 | 25 | }); 26 | 27 | $( document ).on( 'click' , '.no-recipient' , function() { 28 | 29 | init(); 30 | 31 | }); 32 | /* to here */ 33 | 34 | $("#form-send").submit(function(e) { 35 | e.preventDefault(); /* prevent the submission of the form */ 36 | 37 | /* check if the email format is valid (text@text.ext) */ 38 | if( !isValidEmailAddress( $('#emailUser').val() ) ) { $('#emailUser').parent('.required').addClass('error'); } else { 39 | 40 | /* remove all the error class in case of a second sending attempt */ 41 | $(".required").removeClass('error'); 42 | /* show the loading animation */ 43 | $('.loading').fadeIn(500); 44 | /* POST ajax call */ 45 | $.post("sendmail.php", { 46 | recipient: recipient, /* you can remove this one */ 47 | name: $('#nameUser').val(), 48 | email: $('#emailUser').val(), 49 | message: $('#msgUser').val(), 50 | foo: $('#foo').val(), 51 | rand: Math.random() 52 | }, 53 | function(response) { 54 | 55 | if (response == 1) { /* positive response, mail sent */ 56 | 57 | $('.loading').fadeOut(400, function(){ /* hide the loading animation */ 58 | 59 | $('.mail-container').addClass('hover'); /* flip the mail container */ 60 | 61 | }); 62 | 63 | $('.send').fadeOut(1000); /* hide the button */ 64 | /* console.log('ok'); */ 65 | 66 | } else if(response == 2) { /* missing values, in case the HTML5 required attribute didn't work */ 67 | 68 | $('.loading').fadeOut(200, function(){ 69 | 70 | $(".required").each(function() { 71 | /* fore every required class, check if the inside input field is empty and add the error class */ 72 | $(this).find('.send-input').filter(function() { return !this.value; }).parent('.required').addClass('error'); 73 | 74 | }); 75 | 76 | }); 77 | /* console.log('not ok'); */ 78 | 79 | } else if(response == 3) { /* all the data were ok but the mail() function didn't work */ 80 | /* this could depend on your server, handle the answer as you wish */ 81 | //console.log('not ok technical'); 82 | } 83 | }); 84 | 85 | return false; 86 | 87 | } 88 | 89 | }); 90 | 91 | $( document ).on( 'click' , '.reload' , function() { /* reload the current page */ 92 | 93 | window.location.reload(); 94 | 95 | }); 96 | 97 | }); 98 | 99 | /* REGEXP pattern to check the written email address */ 100 | function isValidEmailAddress(emailAddress) { 101 | var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 102 | return pattern.test(emailAddress); 103 | }; 104 | 105 | /* initialize function, necessary to get the height of the mail content */ 106 | 107 | /* 108 | IF YOU REMOVED THE HTML OF THE INITIALIZE EXAMPLE USE THIS FUCNTION BELOW AND DELETE THE OTHER 109 | function init() { 110 | 111 | $('.mail-container').fadeIn(400,function(){ 112 | 113 | $('.mail-content').height($('.mail-front').outerHeight()); 114 | 115 | }); 116 | } 117 | 118 | */ 119 | 120 | /* you can remove this function if you're using the one above */ 121 | function init() { 122 | $('.btn-init').find('span').fadeOut(100,function(){ 123 | 124 | $(this).html('').fadeIn(100, function(){ 125 | 126 | $('.btn-init').addClass('sending'); 127 | 128 | $('.recipient-container').slideUp(400); 129 | 130 | $('.description').slideUp(400,function(){ 131 | 132 | $('.mail-container').fadeIn(400,function(){ 133 | 134 | $('.mail-content').height($('.mail-front').outerHeight()); 135 | 136 | $('.btn-init').prop('type', 'submit').removeClass('sending btn-init').addClass('send').find('span').fadeOut(100,function(){ 137 | 138 | $(this).html('Send').fadeIn(100); 139 | 140 | }); 141 | 142 | }); 143 | 144 | }); 145 | 146 | }); 147 | 148 | }); 149 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Write to Me - Simple contact form in PHP & jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Write to Me

17 |

Simple contact form in PHP & jQuery

18 | 19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |

Sending..

28 |
29 | 30 |
31 | 32 | 33 |
34 |

No worries! I won't store, save, or copy your email and you won't receive any email spam from me. I need an email so you can receive the message that you're going to send thru this form.
If you're not interested in seeing the message, click here

35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 |
43 | 44 |
45 | 46 |
47 | 48 | 49 |
50 | 51 | 55 | 56 |
57 | 58 | 59 |
60 | 61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 | 69 | 70 | 71 |

Thank you!

72 |

Your email is on its way

73 | 74 | Send another one 75 | 76 |
77 | 78 |
79 | 80 |
81 | 82 |
83 | 84 |
85 | 86 | 87 | 88 |
89 | 90 |
91 | 92 |
93 | 94 |
Coded with by Alecaddd under MIT license 95 |

DOWNLOAD SOURCE

96 |
97 | 98 | 99 | 100 | 110 | 111 | -------------------------------------------------------------------------------- /sendmail.php: -------------------------------------------------------------------------------- 1 | " . "\r\n" . "Reply-To: ".$email."" . "\r\n" . "X-Mailer: PHP/" . phpversion(); 20 | $header .= "MIME-Version: 1.0\n"; 21 | $header .= "Content-Type: text/html; charset=\"iso-8859-1\"\n"; 22 | $header .= "Content-Transfer-Encoding: 7bit\n\n"; 23 | $msg= 'New message from Your Website Contact Page.

Name: '.$name.'

Email: '.$email.'

Message: '.nl2br($message).'

Date: '.$date.'


From - Your website'; 24 | if(@mail("$mail","Your website - Contact form",$msg,$header)): echo '1'; else: echo '3'; endif;/* check if the mail() function succeded */ 25 | 26 | else: echo '1'; endif;/* send a positive fake return if SPAM is detected */ --------------------------------------------------------------------------------