Cara Membuat Contact Us Keren Terbaru 2020 - Kenapa halaman Contact ini menjadi halaman yang harus ada pada website atau blog kita. Kalau blog kita masuk pada kategori blog bisnis online lalu pada siapa harus menghubungi admin? Sekilas kalau kita cermati pertanyaan tersebut maka kita akan tahu fungsi dari halaman kontak yang akan kita buat ini.
Membuat Halaman Contact pada sebuah website yang keren dan mudah seperti yang ada pada halaman kontak Blog Rapi Serui ini. Saya bagikan cara membuat kontak blog keren ini karena ada hubungannya dengan pembuatan Privacy Policy Blog. Copy dan Pastekan saja kode dibawah ini pada halam kontak anda. Save dan Publih. Penampakannya silahkan buka halam kontak blog ini.
<style>
/*<![CDATA[*/
.contact-form-box {
width: 100%;
margin: 20px auto;
padding: 0
}
#contactForm .floating-label-form-group {
font-size: 16px;
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: #C51162;
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: 16px;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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-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: #C51162
}
#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:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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: #C51162;
border: 1px solid #be403a;
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;
}
.fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?v=4.6.0);src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?#iefix&v=4.6.0) format('embedded-opentype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff?v=4.6.0) format('woff'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.ttf?v=4.6.0) format('truetype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}
.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>
<div class="contact-form-box">
<div>Silahkan isi form di bawah ini untuk menghubungi admin blog. </div>
<br/>
<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>
</div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />
<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'] = '3772129406538546599';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3963684013506391597','//blogkangerend.blogspot.com/','3772129406538546599');
_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 langsung 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": "3772129406538546599", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
Keterangan:
Tulisan yang saya cetak Merah silahkan ganti sama URL Blog dan Blog Id anda. Demikian cara termudah Membuat Contact Us Keren Terbaru 2020 yang bisa saya bagikan pada anda, semoga bisa bermanfaat, Aamiin !
