{"id":4302,"date":"2015-04-08T04:15:16","date_gmt":"2015-04-08T04:15:16","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=4302"},"modified":"2015-04-08T04:23:50","modified_gmt":"2015-04-08T04:23:50","slug":"mau-contact-form-don-gian-voi-jquery-va-css3","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/mau-contact-form-don-gian-voi-jquery-va-css3\/","title":{"rendered":"M\u1eabu contact form \u0111\u01a1n gi\u1ea3n v\u1edbi jQuery v\u00e0 CSS3"},"content":{"rendered":"

Ch\u00e0o c\u00e1c b\u1ea1n, trong b\u00e0i n\u00e0y m\u00ecnh s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n m\u1ed9t m\u1eabu form r\u1ea5t ph\u00f9 h\u1ee3p cho trang li\u00ean h\u1ec7 (contact), m\u1eabu form n\u00e0y c\u00f3 \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 th\u1ebb input , select box, radio button v\u00e0 m\u1ed9t text area \u0111\u01a1n gi\u1ea3n cho ng\u01b0\u1eddi d\u00f9ng nh\u1eadp li\u1ec7u. V\u1edbi m\u1eabu form n\u00e0y, c\u00e1c b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 thu th\u1eadp \u00fd ki\u1ebfn c\u0169ng nh\u01b0 th\u00f4ng tin ng\u01b0\u1eddi d\u00f9ng hi\u1ec7u qu\u1ea3 v\u00e0 t\u1ed1t nh\u1ea5t.<\/p>\n

\"mau-contact-form-don-gian-voi-jquery-va-css3\"
\nDownload<\/a><\/center><\/p>\n

HTML<\/h2>\n

Ch\u00fang ta c\u1ea7n c\u00f3 khung chu\u1ea9n html cho trang li\u00ean h\u1ec7 nh\u01b0 sau:<\/p>\n

\r\n\r\n<form class="cd-form floating-labels">\r\n        <fieldset>\r\n            <legend>Account Info<\/legend>\r\n \r\n            <div class="error-message">\r\n                <p>Please enter a valid email address<\/p>\r\n            <\/div>\r\n \r\n            <div class="icon">\r\n                <label class="cd-label" for="cd-name">Name<\/label>\r\n                <input class="user" type="text" name="cd-name" id="cd-name" required>\r\n            <\/div> \r\n \r\n            <div class="icon">\r\n                <label class="cd-label" for="cd-company">Company<\/label>\r\n                <input class="company" type="text" name="cd-company" id="cd-company">\r\n            <\/div> \r\n \r\n            <div class="icon">\r\n                <label class="cd-label" for="cd-email">Email<\/label>\r\n                <input class="email error" type="email" name="cd-email" id="cd-email" required>\r\n            <\/div>\r\n        <\/fieldset>\r\n \r\n        <fieldset>\r\n            <legend>Project Info<\/legend>\r\n \r\n            <div>\r\n                <h4>Budget<\/h4>\r\n \r\n                <p class="cd-select icon">\r\n                    <select class="budget">\r\n                        <option value="0">Select Budget<\/option>\r\n                        <option value="1">&lt; $5000<\/option>\r\n                        <option value="2">$5000 - $10000<\/option>\r\n                        <option value="3">&gt; $10000<\/option>\r\n                    <\/select>\r\n                <\/p>\r\n            <\/div> \r\n \r\n            <div>\r\n                <h4>Project type<\/h4>\r\n \r\n                <ul class="cd-form-list">\r\n                    <li>\r\n                        <input type="radio" name="radio-button" id="cd-radio-1" checked>\r\n                        <label for="cd-radio-1">Choice 1<\/label>\r\n                    <\/li>\r\n                         \r\n                    <li>\r\n                        <input type="radio" name="radio-button" id="cd-radio-2">\r\n                        <label for="cd-radio-2">Choice 2<\/label>\r\n                    <\/li>\r\n \r\n                    <li>\r\n                        <input type="radio" name="radio-button" id="cd-radio-3">\r\n                        <label for="cd-radio-3">Choice 3<\/label>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/div>\r\n \r\n            <div>\r\n                <h4>Features<\/h4>\r\n \r\n                <ul class="cd-form-list">\r\n                    <li>\r\n                        <input type="checkbox" id="cd-checkbox-1">\r\n                        <label for="cd-checkbox-1">Option 1<\/label>\r\n                    <\/li>\r\n \r\n                    <li>\r\n                        <input type="checkbox" id="cd-checkbox-2">\r\n                        <label for="cd-checkbox-2">Option 2<\/label>\r\n                    <\/li>\r\n \r\n                    <li>\r\n                        <input type="checkbox" id="cd-checkbox-3">\r\n                        <label for="cd-checkbox-3">Option 3<\/label>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/div>\r\n \r\n            <div class="icon">\r\n                <label class="cd-label" for="cd-textarea">Project description<\/label>\r\n                <textarea class="message" name="cd-textarea" id="cd-textarea" required><\/textarea>\r\n            <\/div>\r\n \r\n            <div>\r\n                <input type="submit" value="Send Message">\r\n            <\/div>\r\n        <\/fieldset>\r\n    <\/form>\r\n\r\n<\/pre>\n
CSS<\/h2>\n
\u0110\u1ecbnh d\u1ea1ng form v\u1edbi \u0111o\u1ea1n css sau:<\/p>\n
\r\n\r\n\/* -------------------------------- \r\n \r\nForm\r\n \r\n-------------------------------- *\/\r\n.cd-form {\r\n  width: 90%;\r\n  max-width: 600px;\r\n  margin: 4em auto;\r\n}\r\n.cd-form::after {\r\n  clear: both;\r\n  content: "";\r\n  display: table;\r\n}\r\n.cd-form fieldset {\r\n  margin: 24px 0;\r\n}\r\n.cd-form legend {\r\n  padding-bottom: 10px;\r\n  margin-bottom: 20px;\r\n  font-size: 2rem;\r\n  border-bottom: 1px solid #ecf0f1;\r\n}\r\n.cd-form div {\r\n  \/* form element wrapper *\/\r\n  position: relative;\r\n  margin: 20px 0;\r\n}\r\n.cd-form h4, .cd-form .cd-label {\r\n  font-size: 1.3rem;\r\n  color: #94aab0;\r\n  margin-bottom: 10px;\r\n}\r\n.cd-form .cd-label {\r\n  display: block;\r\n}\r\n.cd-form input, .cd-form textarea, .cd-form select, .cd-form label {\r\n  font-family: "Open Sans", sans-serif;\r\n  font-size: 1.6rem;\r\n  color: #2b3e51;\r\n}\r\n.cd-form input[type="text"],\r\n.cd-form input[type="email"],\r\n.cd-form textarea,\r\n.cd-form select,\r\n.cd-form legend {\r\n  display: block;\r\n  width: 100%;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  -ms-appearance: none;\r\n  -o-appearance: none;\r\n  appearance: none;\r\n}\r\n.cd-form input[type="text"],\r\n.cd-form input[type="email"],\r\n.cd-form textarea,\r\n.cd-form select {\r\n  \/* general style for input elements *\/\r\n  padding: 12px;\r\n  border: 1px solid #cfd9db;\r\n  background-color: #ffffff;\r\n  border-radius: .25em;\r\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);\r\n}\r\n.cd-form input[type="text"]:focus,\r\n.cd-form input[type="email"]:focus,\r\n.cd-form textarea:focus,\r\n.cd-form select:focus {\r\n  outline: none;\r\n  border-color: #2c97de;\r\n  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);\r\n}\r\n.cd-form .cd-select {\r\n  \/* select element wapper *\/\r\n  position: relative;\r\n}\r\n.cd-form .cd-select::after {\r\n  \/* arrow icon for select element *\/\r\n  content: '';\r\n  position: absolute;\r\n  z-index: 1;\r\n  right: 16px;\r\n  top: 50%;\r\n  margin-top: -8px;\r\n  display: block;\r\n  width: 16px;\r\n  height: 16px;\r\n  background: url("..\/img\/cd-icon-arrow.svg") no-repeat center center;\r\n  pointer-events: none;\r\n}\r\n.cd-form select {\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\r\n  cursor: pointer;\r\n}\r\n.cd-form select::-ms-expand {\r\n  display: none;\r\n}\r\n.cd-form .cd-form-list {\r\n  margin-top: 16px;\r\n}\r\n.cd-form .cd-form-list::after {\r\n  clear: both;\r\n  content: "";\r\n  display: table;\r\n}\r\n.cd-form .cd-form-list li {\r\n  \/* wrapper for radio and checkbox input types *\/\r\n  display: inline-block;\r\n  position: relative;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  margin: 0 26px 16px 0;\r\n  float: left;\r\n}\r\n.cd-form input[type=radio],\r\n.cd-form input[type=checkbox] {\r\n  \/* hide original check and radio buttons *\/\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  -webkit-transform: translateY(-50%);\r\n  -moz-transform: translateY(-50%);\r\n  -ms-transform: translateY(-50%);\r\n  -o-transform: translateY(-50%);\r\n  transform: translateY(-50%);\r\n  margin: 0;\r\n  padding: 0;\r\n  opacity: 0;\r\n  z-index: 2;\r\n}\r\n.cd-form input[type="radio"] + label,\r\n.cd-form input[type="checkbox"] + label {\r\n  padding-left: 24px;\r\n}\r\n.cd-form input[type="radio"] + label::before,\r\n.cd-form input[type="radio"] + label::after,\r\n.cd-form input[type="checkbox"] + label::before,\r\n.cd-form input[type="checkbox"] + label::after {\r\n  \/* custom radio and check boxes *\/\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  margin-top: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n.cd-form input[type="radio"] + label::before,\r\n.cd-form input[type="checkbox"] + label::before {\r\n  border: 1px solid #cfd9db;\r\n  background: #ffffff;\r\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);\r\n}\r\n.cd-form input[type="radio"] + label::before,\r\n.cd-form input[type="radio"] + label::after {\r\n  border-radius: 50%;\r\n}\r\n.cd-form input[type="checkbox"] + label::before,\r\n.cd-form input[type="checkbox"] + label::after {\r\n  border-radius: .25em;\r\n}\r\n.cd-form input[type="radio"] + label::after,\r\n.cd-form input[type="checkbox"] + label::after {\r\n  background-color: #2c97de;\r\n  background-position: center center;\r\n  background-repeat: no-repeat;\r\n  box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);\r\n  display: none;\r\n}\r\n.cd-form input[type="radio"] + label::after {\r\n  \/* custom image for radio button *\/\r\n  background-image: url("..\/img\/cd-icon-radio.svg");\r\n}\r\n.cd-form input[type="checkbox"] + label::after {\r\n  \/* custom image for checkbox *\/\r\n  background-image: url("..\/img\/cd-icon-check.svg");\r\n}\r\n.cd-form input[type="radio"]:focus + label::before,\r\n.cd-form input[type="checkbox"]:focus + label::before {\r\n  \/* add focus effect for radio and check buttons *\/\r\n  box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);\r\n}\r\n.cd-form input[type="radio"]:checked + label::after,\r\n.cd-form input[type="checkbox"]:checked + label::after {\r\n  display: block;\r\n}\r\n.cd-form input[type="radio"]:checked + label::before,\r\n.cd-form input[type="radio"]:checked + label::after,\r\n.cd-form input[type="checkbox"]:checked + label::before,\r\n.cd-form input[type="checkbox"]:checked + label::after {\r\n  -webkit-animation: cd-bounce 0.3s;\r\n  -moz-animation: cd-bounce 0.3s;\r\n  animation: cd-bounce 0.3s;\r\n}\r\n.cd-form textarea {\r\n  min-height: 200px;\r\n  resize: vertical;\r\n  overflow: auto;\r\n}\r\n.cd-form input[type="submit"] {\r\n  \/* button style *\/\r\n  border: none;\r\n  background: #2c97de;\r\n  border-radius: .25em;\r\n  padding: 16px 20px;\r\n  color: #ffffff;\r\n  font-weight: bold;\r\n  float: right;\r\n  cursor: pointer;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  -ms-appearance: none;\r\n  -o-appearance: none;\r\n  appearance: none;\r\n}\r\n.no-touch .cd-form input[type="submit"]:hover {\r\n  background: #42a2e1;\r\n}\r\n.cd-form input[type="submit"]:focus {\r\n  outline: none;\r\n  background: #2b3e51;\r\n}\r\n.cd-form input[type="submit"]:active {\r\n  -webkit-transform: scale(0.9);\r\n  -moz-transform: scale(0.9);\r\n  -ms-transform: scale(0.9);\r\n  -o-transform: scale(0.9);\r\n  transform: scale(0.9);\r\n}\r\n.cd-form [required] {\r\n  background: url("..\/img\/cd-required.svg") no-repeat top right;\r\n}\r\n.cd-form .error-message p {\r\n  background: #e94b35;\r\n  color: #ffffff;\r\n  font-size: 1.4rem;\r\n  text-align: center;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  border-radius: .25em;\r\n  padding: 16px;\r\n}\r\n.cd-form .error {\r\n  border-color: #e94b35 !important;\r\n}\r\n@media only screen and (min-width: 600px) {\r\n  .cd-form div {\r\n    \/* form element wrapper *\/\r\n    margin: 32px 0;\r\n  }\r\n  .cd-form legend + div {\r\n    \/* reduce margin-top for first form element after the legend *\/\r\n    margin-top: 20px;\r\n  }\r\n  .cd-form h4, .cd-form .cd-label {\r\n    font-size: 1.4rem;\r\n    margin-bottom: 10px;\r\n  }\r\n  .cd-form input[type="text"],\r\n  .cd-form input[type="email"],\r\n  .cd-form textarea,\r\n  .cd-form select {\r\n    padding: 16px;\r\n  }\r\n}\r\n \r\n@-webkit-keyframes cd-bounce {\r\n  0%, 100% {\r\n    -webkit-transform: scale(1);\r\n  }\r\n  50% {\r\n    -webkit-transform: scale(0.8);\r\n  }\r\n}\r\n@-moz-keyframes cd-bounce {\r\n  0%, 100% {\r\n    -moz-transform: scale(1);\r\n  }\r\n  50% {\r\n    -moz-transform: scale(0.8);\r\n  }\r\n}\r\n@keyframes cd-bounce {\r\n  0%, 100% {\r\n    -webkit-transform: scale(1);\r\n    -moz-transform: scale(1);\r\n    -ms-transform: scale(1);\r\n    -o-transform: scale(1);\r\n    transform: scale(1);\r\n  }\r\n  50% {\r\n    -webkit-transform: scale(0.8);\r\n    -moz-transform: scale(0.8);\r\n    -ms-transform: scale(0.8);\r\n    -o-transform: scale(0.8);\r\n    transform: scale(0.8);\r\n  }\r\n}\r\n\/* -------------------------------- \r\n \r\nCustom icons\r\n \r\n-------------------------------- *\/\r\n.cd-form .icon input, .cd-form .icon select, .cd-form .icon textarea {\r\n  padding-left: 54px !important;\r\n}\r\n.cd-form .user {\r\n  background: url("..\/img\/cd-icon-user.svg") no-repeat 16px center;\r\n}\r\n.cd-form [required].user {\r\n  background: url("..\/img\/cd-icon-user.svg") no-repeat 16px center, url("..\/img\/cd-required.svg") no-repeat top right;\r\n}\r\n.cd-form .company {\r\n  background: url("..\/img\/cd-icon-company.svg") no-repeat 16px center;\r\n}\r\n.cd-form [required].company {\r\n  background: url("..\/img\/cd-icon-company.svg") no-repeat 16px center, url("..\/img\/cd-required.svg") no-repeat top right;\r\n}\r\n.cd-form .email {\r\n  background: url("..\/img\/cd-icon-email.svg") no-repeat 16px center;\r\n}\r\n.cd-form [required].email {\r\n  background: url("..\/img\/cd-icon-email.svg") no-repeat 16px center, url("..\/img\/cd-required.svg") no-repeat top right;\r\n}\r\n.cd-form .budget {\r\n  background: url("..\/img\/cd-icon-budget.svg") no-repeat 16px center;\r\n}\r\n.cd-form .message {\r\n  background: url("..\/img\/cd-icon-message.svg") no-repeat 16px 16px;\r\n}\r\n.cd-form [required].message {\r\n  background: url("..\/img\/cd-icon-message.svg") no-repeat 16px 16px, url("..\/img\/cd-required.svg") no-repeat top right;\r\n}\r\n \r\n\/* -------------------------------- \r\n \r\nFLoating labels \r\n \r\n-------------------------------- *\/\r\n.js .floating-labels div {\r\n  margin: 28px 0;\r\n}\r\n.js .floating-labels .cd-label {\r\n  position: absolute;\r\n  top: 16px;\r\n  left: 16px;\r\n  font-size: 1.6rem;\r\n  cursor: text;\r\n  -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;\r\n  -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;\r\n  transition: top 0.2s, left 0.2s, font-size 0.2s;\r\n}\r\n.js .floating-labels .icon .cd-label {\r\n  left: 56px;\r\n}\r\n.js .floating-labels .cd-label.float {\r\n  \/* move label out the input field *\/\r\n  font-size: 1.2rem;\r\n  top: -16px;\r\n  left: 0 !important;\r\n}\r\n@media only screen and (min-width: 600px) {\r\n  .js .floating-labels legend + div {\r\n    \/* reduce margin-top for first form element after the legend *\/\r\n    margin-top: 16px;\r\n  }\r\n  .js .floating-labels .cd-label {\r\n    top: 20px;\r\n  }\r\n}\r\n\r\n<\/pre>\n
jQuery<\/h2>\n
X\u1eed l\u00fd hi\u1ec7u \u1ee9ng \u1edf c\u00e1c th\u1ebb, ch\u00fang ta c\u1ea7n c\u00f3 \u0111o\u1ea1n script sau.<\/p>\n
\r\n\r\njQuery(document).ready(function($){\r\n    if( $('.floating-labels').length > 0 ) floatLabels();\r\n \r\n    function floatLabels() {\r\n        var inputFields = $('.floating-labels .cd-label').next();\r\n        inputFields.each(function(){\r\n            var singleInput = $(this);\r\n            \/\/check if user is filling one of the form fields \r\n            checkVal(singleInput);\r\n            singleInput.on('change keyup', function(){\r\n                checkVal(singleInput);  \r\n            });\r\n        });\r\n    }\r\n \r\n    function checkVal(inputField) {\r\n        ( inputField.val() == '' ) ? inputField.prev('.cd-label').removeClass('float') : inputField.prev('.cd-label').addClass('float');\r\n    }\r\n});\r\n\r\n<\/pre>\n
Download:<\/h2>\n
M\u1eabu contact form \u0111\u01a1n gi\u1ea3n v\u1edbi jQuery v\u00e0 CSS3<\/a><\/p>\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
Ch\u00e0o c\u00e1c b\u1ea1n, trong b\u00e0i n\u00e0y m\u00ecnh s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n m\u1ed9t m\u1eabu form r\u1ea5t ph\u00f9 h\u1ee3p cho […]<\/p>\n","protected":false},"author":6,"featured_media":4303,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-4302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-thu-thuat-jquery"],"views":538,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=4302"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/4303"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=4302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=4302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=4302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}