├── backend ├── conexao.php └── index.php └── frontend ├── js.js ├── index.html └── css.css /backend/conexao.php: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /backend/index.php: -------------------------------------------------------------------------------- 1 | query($query) === TRUE) { 16 | echo "New record created successfully"; 17 | } else { 18 | echo "Error: " . $link->error; 19 | } 20 | ?> -------------------------------------------------------------------------------- /frontend/js.js: -------------------------------------------------------------------------------- 1 | $("#button-blue").on("click", function() { 2 | 3 | var txt_nome = $("#name").val(); 4 | var txt_email = $("#email").val(); 5 | var txt_comentario = $("#comment").val(); 6 | 7 | $.ajax({ 8 | url: "", 9 | 10 | type: "post", 11 | data: {nome: txt_nome, comentario: txt_comentario, email: txt_email}, 12 | beforeSend: function() { 13 | 14 | console.log("Tentando enviar os dados...."); 15 | 16 | } 17 | }).done(function(e) { 18 | alert("Dados Salvos"); 19 | }) 20 | 21 | }); -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Formulário 11 | 12 | 13 |
14 |
15 |
16 | 17 |

18 | 19 |

20 | 21 | 24 | 25 |

26 | 27 |

28 | 29 | 30 |
31 | 32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /frontend/css.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); 2 | 3 | html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat; 4 | background-size: cover; 5 | height:100%; 6 | } 7 | 8 | #feedback-page{ 9 | text-align:center; 10 | } 11 | 12 | #form-main{ 13 | width:100%; 14 | float:left; 15 | padding-top:0px; 16 | } 17 | 18 | #form-div { 19 | background-color:rgba(72,72,72,0.4); 20 | padding-left:35px; 21 | padding-right:35px; 22 | padding-top:35px; 23 | padding-bottom:50px; 24 | width: 450px; 25 | float: left; 26 | left: 50%; 27 | position: absolute; 28 | margin-top:30px; 29 | margin-left: -260px; 30 | -moz-border-radius: 7px; 31 | -webkit-border-radius: 7px; 32 | } 33 | 34 | .feedback-input { 35 | color:#3c3c3c; 36 | font-family: Helvetica, Arial, sans-serif; 37 | font-weight:500; 38 | font-size: 18px; 39 | border-radius: 0; 40 | line-height: 22px; 41 | background-color: #fbfbfb; 42 | padding: 13px 13px 13px 54px; 43 | margin-bottom: 10px; 44 | width:100%; 45 | -webkit-box-sizing: border-box; 46 | -moz-box-sizing: border-box; 47 | -ms-box-sizing: border-box; 48 | box-sizing: border-box; 49 | border: 3px solid rgba(0,0,0,0); 50 | } 51 | 52 | .feedback-input:focus{ 53 | background: #fff; 54 | box-shadow: 0; 55 | border: 3px solid #3498db; 56 | color: #3498db; 57 | outline: none; 58 | padding: 13px 13px 13px 54px; 59 | } 60 | 61 | .focused{ 62 | color:#30aed6; 63 | border:#30aed6 solid 3px; 64 | } 65 | 66 | /* Icons ---------------------------------- */ 67 | #name{ 68 | background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 69 | background-size: 30px 30px; 70 | background-position: 11px 8px; 71 | background-repeat: no-repeat; 72 | } 73 | 74 | #name:focus{ 75 | background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 76 | background-size: 30px 30px; 77 | background-position: 8px 5px; 78 | background-position: 11px 8px; 79 | background-repeat: no-repeat; 80 | } 81 | 82 | #email{ 83 | background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 84 | background-size: 30px 30px; 85 | background-position: 11px 8px; 86 | background-repeat: no-repeat; 87 | } 88 | 89 | #email:focus{ 90 | background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 91 | background-size: 30px 30px; 92 | background-position: 11px 8px; 93 | background-repeat: no-repeat; 94 | } 95 | 96 | #comment{ 97 | background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); 98 | background-size: 30px 30px; 99 | background-position: 11px 8px; 100 | background-repeat: no-repeat; 101 | } 102 | 103 | textarea { 104 | width: 100%; 105 | height: 150px; 106 | line-height: 150%; 107 | resize:vertical; 108 | } 109 | 110 | input:hover, textarea:hover, 111 | input:focus, textarea:focus { 112 | background-color:white; 113 | } 114 | 115 | #button-blue{ 116 | font-family: 'Montserrat', Arial, Helvetica, sans-serif; 117 | float:left; 118 | width: 100%; 119 | border: #fbfbfb solid 4px; 120 | cursor:pointer; 121 | background-color: #3498db; 122 | color:white; 123 | font-size:24px; 124 | padding-top:22px; 125 | padding-bottom:22px; 126 | -webkit-transition: all 0.3s; 127 | -moz-transition: all 0.3s; 128 | transition: all 0.3s; 129 | margin-top:-4px; 130 | font-weight:700; 131 | } 132 | 133 | #button-blue:hover{ 134 | background-color: rgba(0,0,0,0); 135 | color: #0493bd; 136 | } 137 | 138 | .submit:hover { 139 | color: #3498db; 140 | } 141 | 142 | .ease { 143 | width: 0px; 144 | height: 74px; 145 | background-color: #fbfbfb; 146 | -webkit-transition: .3s ease; 147 | -moz-transition: .3s ease; 148 | -o-transition: .3s ease; 149 | -ms-transition: .3s ease; 150 | transition: .3s ease; 151 | } 152 | 153 | .submit:hover .ease{ 154 | width:100%; 155 | background-color:white; 156 | } 157 | 158 | @media only screen and (max-width: 580px) { 159 | #form-div{ 160 | left: 3%; 161 | margin-right: 3%; 162 | width: 88%; 163 | margin-left: 0; 164 | padding-left: 3%; 165 | padding-right: 3%; 166 | } 167 | } --------------------------------------------------------------------------------