Cara membuat Contact Us (Contact Form) di Blog
Tuesday, February 19, 2019
Add Comment
Cara membuat Contact Us (Contact Form) di Blog - Hai sobat,Artikel kali ini saya akan membahas cara pembuatan halaman contact us di blog.Halaman contact us ini memang sangat di perlukan dalam sebuah web/blog.Fungsi halaman ini adalah mempermudah pengunjung menghubungi kamu , apabila ada sesuatu yang akan kamu tanyakan tetapi tidak ingin menanyakannya di kolom komentar karena sifatnya pribadi.
Memang banyak situs yang menyediakan pembuatan contact us untuk web/blog.Tapi bagi kamu yang tak ingin repot bisa dengan cara yang saya berikan.Keuntungannya?Lebih cepat dalam proses pembuatan.Kamu hanya perlu copy paste saja kode/script yang saya berikan.Dalam segi tampilan pun lebih menarik.Langsung saja simak langkah-langkah di bawah ini:
Cukup mudah kan sobat?Kamu tidak perlu repot-repot lagi membuat contact form.Hanya dengan copas kode yang saya berikan maka akan tampilah halaman contact form yang menarik.Semoga artikel ini bermanfaat buat kamu sobat.Jika ada pertanyaan silahkan tanyakan di kolom komentar.
Memang banyak situs yang menyediakan pembuatan contact us untuk web/blog.Tapi bagi kamu yang tak ingin repot bisa dengan cara yang saya berikan.Keuntungannya?Lebih cepat dalam proses pembuatan.Kamu hanya perlu copy paste saja kode/script yang saya berikan.Dalam segi tampilan pun lebih menarik.Langsung saja simak langkah-langkah di bawah ini:
- Log in ke blogger
- Pilih Halaman(page) - Halaman baru
- Pilih mode HTML lalu copy paste kode di bawah ini:
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.notification{
height: 35%;
width: 90%;
font-size: 16px;
font-weight:bold;
text-align: left;
color: #fff!important;
background: #51d499;
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);
margin-top: 15px;
}
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#51d499;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #51d499;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#51d499 transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
.contact-us{
float:none;
position:relative;
margin-bottom:45px;
margin-right:10px
}
.contact-us input,.contact-us textarea{
font-size:15px;
padding:15px 0;
display:block;
width:100%;
border:none;
border-bottom:1px solid #ddd
}
.contact-us input:focus,.contact-us textarea:focus{
outline:none
}
.contact-us label{
color:#999;
font-size:15px;
font-weight:400;
position:absolute;
pointer-events:none;
left:0;
top:10px;
transition:.2s ease all;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:14px;
color:#51d499;
}
.form{
position:relative;
display:block;
width:100%;
}
.form:before,.form:after{
content:'';
height:2px;
width:0;bottom:1px;
position:absolute;
background:#51d499;
transition:.2s ease all;
}
.form:before{
left:50%;
}
.form:after{
right:50%;
}
.contact-us input:focus ~ .form:before,.contact-us input:focus ~ .form:after,.contact-us textarea:focus ~ .form:before,.contact-us textarea:focus ~ .form:after{
width:50%;
}
.minimalis{
position:absolute;
height:50%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:.5;
}
.contact-us input:focus ~ .minimalis,.contact-us textarea:focus ~ .minimalis{
animation:inputminimaliser .3s ease;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:13px;
color:#51d499;
}
input#ContactForm1_contact-form-email-message{
height:150px;
}
input#ContactForm1_contact-form-submit{
color:#fff!important;
height: 50px;
font-size: 14px;
font-weight:bold;
background:#51d499;
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);
}
input#ContactForm2_contact-form-submit{
height: 50px;
font-weight: bold;
font-size: 14px;
color:#fff!important;
background:#51d499;
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:right;
margin-top:15px;
}
input#ContactForm2_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 />
<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Hubungi Kami</strong>
</h1>
<div>
<strong class="ribbon-nama"><span style="background-color: white; font-family: "roboto" , sans-serif; font-size: 15px; font-weight: normal;">Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. </span></strong></div>
<div>
<strong class="ribbon-nama"><br /></strong></div>
<form name="contact-form">
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Name</label>
</div>
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Email</label>
</div>
<div class="contact-us">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<input id="ContactForm2_contact-form-submit" type="reset" value="Reset" />
<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'] = '8391815387066xxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx8391815387066xxxxx','//','8391815387066xxxxx');
_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': '8391815387066xxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>
<br /></div>
<style>
.notification{
height: 35%;
width: 90%;
font-size: 16px;
font-weight:bold;
text-align: left;
color: #fff!important;
background: #51d499;
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);
margin-top: 15px;
}
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#51d499;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #51d499;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#51d499 transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
.contact-us{
float:none;
position:relative;
margin-bottom:45px;
margin-right:10px
}
.contact-us input,.contact-us textarea{
font-size:15px;
padding:15px 0;
display:block;
width:100%;
border:none;
border-bottom:1px solid #ddd
}
.contact-us input:focus,.contact-us textarea:focus{
outline:none
}
.contact-us label{
color:#999;
font-size:15px;
font-weight:400;
position:absolute;
pointer-events:none;
left:0;
top:10px;
transition:.2s ease all;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:14px;
color:#51d499;
}
.form{
position:relative;
display:block;
width:100%;
}
.form:before,.form:after{
content:'';
height:2px;
width:0;bottom:1px;
position:absolute;
background:#51d499;
transition:.2s ease all;
}
.form:before{
left:50%;
}
.form:after{
right:50%;
}
.contact-us input:focus ~ .form:before,.contact-us input:focus ~ .form:after,.contact-us textarea:focus ~ .form:before,.contact-us textarea:focus ~ .form:after{
width:50%;
}
.minimalis{
position:absolute;
height:50%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:.5;
}
.contact-us input:focus ~ .minimalis,.contact-us textarea:focus ~ .minimalis{
animation:inputminimaliser .3s ease;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:13px;
color:#51d499;
}
input#ContactForm1_contact-form-email-message{
height:150px;
}
input#ContactForm1_contact-form-submit{
color:#fff!important;
height: 50px;
font-size: 14px;
font-weight:bold;
background:#51d499;
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);
}
input#ContactForm2_contact-form-submit{
height: 50px;
font-weight: bold;
font-size: 14px;
color:#fff!important;
background:#51d499;
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:right;
margin-top:15px;
}
input#ContactForm2_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 />
<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Hubungi Kami</strong>
</h1>
<div>
<strong class="ribbon-nama"><span style="background-color: white; font-family: "roboto" , sans-serif; font-size: 15px; font-weight: normal;">Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. </span></strong></div>
<div>
<strong class="ribbon-nama"><br /></strong></div>
<form name="contact-form">
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Name</label>
</div>
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Email</label>
</div>
<div class="contact-us">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<input id="ContactForm2_contact-form-submit" type="reset" value="Reset" />
<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'] = '8391815387066xxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx8391815387066xxxxx','//','8391815387066xxxxx');
_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': '8391815387066xxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>
<br /></div>
- Ganti 8391815387066xxxxx yang berwarna merah dengan ID blog kamu
- Terakhir klik publikasikan.
Baca juga cara: Cara Membuat Sitemap Keren Pada Blog
0 Response to "Cara membuat Contact Us (Contact Form) di Blog"
Post a Comment