Cara Menciptakan Contact Form Responsive Di Blogger
Cara Membuat Contact Form Responsive di Blogger - Saya akan membagikan tutorial cara menciptakan contact form / contact us pada blog dengan mudah, serta dengan tampilan pengaruh yang keren dan yummy di pandang.
Sebenarnya aku sudah pernah membahas wacana cara menciptakan kontak pada blog, namun pada kesempatan kali ini aku akan membagikan Contact Form yang lebih responsive, lebih keren dan cocok untuk aneka macam macam template pada blog. Sebelumnya aku jelaskan terlebih dahulu contact form ini mempunyai beberapa nama yang cukup terkenal ibarat contact us, hubungi kami, kontak namun bahwasanya mempunyai pengertian yang sama.
Halaman kontak atau contact form pada blog sangatlah penting, selain sebagai kelengkapan dalam blog contact form juga berfungsi untuk mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara pribadi atau bertanya suatu hal pribadi atau melaksanakan kerjasama.
Cara menciptakan Contct Form pada blog ini sangatlah mudah, kita tidak perlu memakai jasa website pihak ketiga untuk menggunakannya, cukup dengan menyalin arahan di bawah ini kita pribadi sanggup menggunakannya dengan simpel dan tentunya dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 Versi Contact Form, anda tinggal menentukan mana yang anda suka dan ingin digunakan.
2. Selanjutnya pilih sajian HTML > kemudian letakkan arahan ini di dalamnya
Versi 1
Kode di atas pribadi sanggup anda gunakan dan sanggup bekerja dengan baik dikala mengirim pesan, Untuk Versi 2 nya anda sanggup mengunakan arahan di bawah ini
Versi 2
Untuk tampilan Versi 2 ganti semua arahan yang di tandai 6154920600666252113 dengan ID Blog anda dan analisyuki.com dengan Blog Anda, Jika sudah silahkan Publikasikan.
Bagaimana berdasarkan anda? cukup kere kan pengaruh dan tampilannya. Sebelum aku akhiri dan bagi yang belum tau BlogID anda, kau sanggup melihatnya sempurna berada di URL pada sajian blog anda.
Saya rasa cukup sekian tutorial dari aku wacana Cara Membuat Contact Form Responsive di Blogger. Jika ada sesuatu yang kurang dipahami silahkan bertanya di kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/
Sebenarnya aku sudah pernah membahas wacana cara menciptakan kontak pada blog, namun pada kesempatan kali ini aku akan membagikan Contact Form yang lebih responsive, lebih keren dan cocok untuk aneka macam macam template pada blog. Sebelumnya aku jelaskan terlebih dahulu contact form ini mempunyai beberapa nama yang cukup terkenal ibarat contact us, hubungi kami, kontak namun bahwasanya mempunyai pengertian yang sama.
Halaman kontak atau contact form pada blog sangatlah penting, selain sebagai kelengkapan dalam blog contact form juga berfungsi untuk mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara pribadi atau bertanya suatu hal pribadi atau melaksanakan kerjasama.
Cara menciptakan Contct Form pada blog ini sangatlah mudah, kita tidak perlu memakai jasa website pihak ketiga untuk menggunakannya, cukup dengan menyalin arahan di bawah ini kita pribadi sanggup menggunakannya dengan simpel dan tentunya dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 Versi Contact Form, anda tinggal menentukan mana yang anda suka dan ingin digunakan.
Cara Membuat Contact Form Responsive di Blogger
1. Masuk ke Blog anda > pilih sajian Halaman > kemudian buat Halaman Baru2. Selanjutnya pilih sajian HTML > kemudian letakkan arahan ini di dalamnya
Versi 1
<style scoped="" type="text/css"> /*<![CDATA[*/ .contact-form-box {width: 100%;margin: 20px auto;padding: 0} #contactForm .floating-label-form-group {font-size: 14px;position: relative;margin-bottom: 0;padding-bottom: 20px;border-bottom: 1px solid #ddd} #contactForm .floating-label-form-group.floating-label-form-group-with-focus {position: relative} #contactForm .floating-label-form-group:after, #contactForm .floating-label-form-group:before {position: absolute;bottom: -1px;width: 0;height: 2px;background-color: #36d7b7;content: "";transition: width .4s ease-in-out;display: block} #contactForm .floating-label-form-group:before {right: 50%} #contactForm .floating-label-form-group:after {left: 50%} #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after, #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {width: 50%} #contactForm .floating-label-form-group input, #contactForm .floating-label-form-group textarea {z-index: 1;position: relative;padding-right: 0;padding-left: 0;border: none;border-radius: 0;font-size: 14px;font-family: Roboto, Arial, sans-serif;font-weight: 400;background: 0 0;box-shadow: none!important;resize: none} #contactForm .floating-label-form-group label {display: block;z-index: 0;position: relative;top: 2em;margin: 0;font-size: 12px;font-family: Roboto, Arial, sans-serif;font-weight: 300;line-height: 1.764705882em;vertical-align: middle;vertical-align: baseline;opacity: 0; -webkit-transition: top .3s ease, opacity .3s ease; -moz-transition: top .3s ease, opacity .3s ease; -ms-transition: top .3s ease, opacity .3s ease; transition: top .3s ease, opacity .3s ease } #contactForm .floating-label-form-group::not(:first-child) {padding-left: 14px;border-left: 1px solid #eee} #contactForm .floating-label-form-group-with-value label {top: 0; opacity: 1} #contactForm .floating-label-form-group-with-focus label {color: #36d7b7} #contactForm {border-top: 1px solid #ddd} #contactForm textarea.form-control {height: auto} #contactForm .form-control {display: block;width: 100%;color: #555} #contactForm input:active, #contactForm input:focus, #contactForm textarea:active, #contactForm textarea:focus { outline: 0 } #contactForm .btn, #contactForm .contact-form-button-submit {font-family: Roboto, Arial, sans-serif;font-weight: 700;text-transform: uppercase;font-size: 18px;letter-spacing: 1px;border-radius: 0;padding: 0 25px;height: 51px;line-height: 51px;color: #333;background-color: #fff;border: 1px solid #ccc;cursor: pointer;margin: 20px 0 0;background-image: none} #contactForm .contact-form-button {height: 51px;line-height: 51px} #contactForm .btn-default:focus, #contactForm .btn-default:hover, #contactForm .contact-form-button-submit:focus, #contactForm .contact-form-button-submit:hover {background-color: #36d7b7;border: 1px solid #36d7b7;color: #fff} .contact-form-error-message-with-border, .contact-form-success-message-with-border {background: #fff;border: 1px solid #ddd;bottom: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);color: #666;font-size: 16px;font-weight: 400;line-height: 30px;opacity: 1;position: static;text-align: center;margin: 20px 0 0} .contact-form-cross {height: 11px;margin: 0 5px;vertical-align: 0!important;width: 11px; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -goog-ms-box-shadow: none!important; box-shadow: none!important} .contact_layout {text-align: center;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background:rgba(0, 0, 0, .8);z-index: 99999} .contact_message {width: 50%;background: #fff;border-radius: 5px;padding: 20px;border: 1px solid transparent;text-align: center;color: #333;position: absolute;top: 10%;left: 50%;margin-left: -25%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;box-sizing: border-box;} .contact_message:before {content: "\f164";font-family: FontAwesome;font-weight: 500;font-size: 30px;display: block;margin-bottom: 10px;} @media screen and (max-width:768px) { .contact_message {width: 90%!important;margin-left: -45%!important;} .contact-form-box {width: 100%;} } /*]]>*/ </style> <br /> <div class="contact-form-box"> <div> Jika ada sesuatu yang ingin ditanyakan secara probadi, anda sanggup mengirimkan email melalui form di bawah ini.<br /> <b><br /></b></div> <form id="contactForm" name="contact-form"> <div class="floating-label-form-group"> <label>Name</label> <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div> <div class="floating-label-form-group"> <label>Email Address</label> <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div> <div class="floating-label-form-group"> <label>Message</label> <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> </div> <input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <div class="clear"> </div> <div style="max-width: 100%; text-align: left; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script> $(function() { $("body").on("input propertychange", ".floating-label-form-group", function(e) { $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); }).on("focus", ".floating-label-form-group", function() { $(this).addClass("floating-label-form-group-with-focus"); }).on("blur", ".floating-label-form-group", function() { $(this).removeClass("floating-label-form-group-with-focus"); }); }); </script> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'id blog anda';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','url blog anda','id blog anda'); _WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'> <div class='contact_message'> <b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan pribadi merespon pesan yang Anda kirimkan.</div> </div> <br/>", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "id blog anda", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>Kode di atas pribadi sanggup anda gunakan dan sanggup bekerja dengan baik dikala mengirim pesan, Untuk Versi 2 nya anda sanggup mengunakan arahan di bawah ini
Versi 2
<div class="analisyuki-icon"> <i class="material-icons md-48">contact_mail</i> </div> <br /> Jika ada sesuatu yang ingin ditanyakan secara pribadi, anda sanggup mengirimkan email melalui form di bawah ini. Admin akan pribadi merespon pesan yang anda kirim, terimkasih.<style scoped="scoped"> .analisyuki-icon{text-align:center;} @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align:middle; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .md-48{font-size: 100px; color: #1E8BC3; padding: 10px; background: #dde3ff; border-radius: 100px;} .analisyuki-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.analisyuki-code input,.analisyuki-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.analisyuki-code input:focus,.analisyuki-code textarea:focus{outline:none}.analisyuki-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.analisyuki-code input:focus label,.analisyuki-code input:valid label,.analisyuki-code textarea:focus label,.analisyuki-code textarea:valid label{top:-20px;font-size:14px;color:#f14062}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#f14062;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.analisyuki-code input:focus .bar:before,.analisyuki-code input:focus .bar:after,.analisyuki-code textarea:focus .bar:before,.analisyuki-code textarea:focus .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.analisyuki-code input:focus .highlight,.analisyuki-code textarea:focus .highlight{animation:inputHighlighter .3s ease}.analisyuki-code input:focus label,.analisyuki-code input:valid label,.analisyuki-code textarea:focus label,.analisyuki-code textarea:valid label{top:-20px;font-size:13px;color:#f14062} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#000000;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px} input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px} </style> <br /> <form name="contact-form"> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> account_circle </i> Name</label> </div> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> email </i> Email</label> </div> <div class="analisyuki-code"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> mode_comment </i> Message</label> </div> <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </form> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6154920600666252113';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6154920600666252113','//analisyuki.com/','6154920600666252113'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6154920600666252113', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>Untuk tampilan Versi 2 ganti semua arahan yang di tandai 6154920600666252113 dengan ID Blog anda dan analisyuki.com dengan Blog Anda, Jika sudah silahkan Publikasikan.
Bagaimana berdasarkan anda? cukup kere kan pengaruh dan tampilannya. Sebelum aku akhiri dan bagi yang belum tau BlogID anda, kau sanggup melihatnya sempurna berada di URL pada sajian blog anda.
Saya rasa cukup sekian tutorial dari aku wacana Cara Membuat Contact Form Responsive di Blogger. Jika ada sesuatu yang kurang dipahami silahkan bertanya di kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/