Saya akan membagikan kode membuat Contact Form pada blog dengan mudah, serta dengan tampilan yang keren. Contact Form memiliki beberapa nama yang cukup populer seperti Contact Us, Hubungi Kami, Kontak atau Contact yang memiliki pengertian yang sama.
Halaman Contact Form pada blog sangatlah penting sebagai kelengkapan pada blog kita, Contact Form juga berfungsi untuk mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara langsung atau bertanya suatu hal pribadi atau melakukan kerjasama.
Membuat Contact Form Responsive di Blogspot:
- Masuk ke Blog anda > pilih menu Halaman > kemudian buat Halaman Baru
- Selanjutnya pilih menu HTML > kemudian letakkan kode dibawah ini
<div class="winfoku-icon">
<i class="material-icons md-48">contact_mail</i>
</div>
<style scoped="scoped">
.winfoku-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;}
.winfoku-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.winfoku-code input,.winfoku-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.winfoku-code input:focus,.winfoku-code textarea:focus{outline:none}.winfoku-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.winfoku-code input:focus ~ label,.winfoku-code input:valid ~ label,.winfoku-code textarea:focus ~ label,.winfoku-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%}.winfoku-code input:focus ~ .bar:before,.winfoku-code input:focus ~ .bar:after,.winfoku-code textarea:focus ~ .bar:before,.winfoku-code textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.winfoku-code input:focus ~ .highlight,.winfoku-code textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.winfoku-code input:focus ~ label,.winfoku-code input:valid ~ label,.winfoku-code textarea:focus ~ label,.winfoku-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="winfoku-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="winfoku-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="winfoku-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'] = '5772957328215277134';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5772957328215277134','//winfoku.blogspot.com/','5772957328215277134');
_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': '5772957328215277134', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>KET:
5772957328215277134 = Ganti dengan ID Blog anda
winfoku.blogspot.com = Ganti dengan URL Blog Anda
Cukup sekian tentang Kode Contact Form Responsive di Blogspot atau Membuat Contact Form Responsive di Blogger. Jika ada sesuatu yang kurang dipahami silahkan bertanya di kolom komentar, Terimakasih.
EmoticonEmoticon