✓ [UPDATE] Cara Membuat Contact US Keren Di Blog

Cara-membuat-contact-us-keren-di-blog

Contack US adalah sebuah halaman yang menghubungkan pengunjung dengan si pemilik blog, dengan adanya contact US ini dapat membantu para pengunjung untuk bertanya tentang situs yang di kelola ataupun artikel yang dibutuhkan para pengunjung, untuk itulah contack US ini sangat lah penting untuk situs website ataupun blog.

Contack US dapat bermacam-macam untuk membuat nya, seperti halnya hanya menulis keterangan saja ataupun bisa mempercantik contack US tersebut.

Seperti contoh contack US yang hanya sebuah tulisan saja,"Jika ada kepentingan tentang situs kami, harap hubungi contak Gmail ini masarif@blabala.com"

Tetapi contack US juga bisa dipercantik, nah untuk mempercantik contack US harus menggunakan kod3 CSS, yang dimana kita bisa mengubah tampilan nya agar terlihat menarik. Simak dibawah ini untuk mempercantik tampilan contack US nya.

Cara membuat Style Contak keren di blog

Untuk blogger pemula yang masih bingung untuk membuat halaman contact US, kalian datang ke blog yang tepat, karena kebetulan saya sedang membahas tampilan contack US di blog.

Disini saya akan membagikan style keren dan tentunya responsive untuk kalian terapkan di blog kalian, cara yang akan kalian pelajari adalah HTML dan tentunya sangat mudah dipelajari, oke langsung saja kita simak dibawah ini.

[PENTING]

Untuk menambahkan kode style contack tersebut dan agar work, kalian simak dibawah ini terlebih dahulu.

  • Pertama kalian harus masuk ke Blogger
  • Kedua kalian pergi ke halaman, setelah masuk ke halaman, jangan lupa beri judul (contoh contact US atau hubungi kami)
  • Ketiga kalian masuk ke HTML (ingat jangan compose) 
  • Keempat kalian masukan kode style contack tersebut, kalian bebas memilih style apa aja yang akan kalian buat nanti, kalian bisa memilih style nya dibawah ini, jika sudah memilih kalian salin kode style tersebut ke dalam HTML.
  • Kelima kalian ganti kode 1238330405694320316 dengan kode id blog kalian dan juga kalian ganti https://demomasarif.blogspot.com dengan blog kalian.
Note : untuk mencari id blog kalian, kalian masuk ke blogger, nah disitu kalian KLlK LlNK nya, maka nanti akan terlihat id blog kalian.


  • Setelah langkah langkah diatas sudah diterapkan, maka langkah selanjutnya kalian simpan dan lihat hasilnya.

Style 1

Style yang pertama ini merupakan style yang terbilang simpel, karena style ini hanya ada Nama, Email, dan pesan.

Meskipun simpel tetapi style ini juga banyak yang gunakan.


<div dir="ltr" style="text-align: left;" trbidi="on">

<div class="enterblogger-logo">

<i class="material-icons md-48">verified_user</i>

</div>

<style scoped="scoped">

  .enterblogger-logo{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: #546de5;

    padding: 10px;

    background: #dde3ff;

    border-radius: 100px;}

.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;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="enterblogger-input">

<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="enterblogger-input">

<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">

contact_mail

</i> Email</label>

</div>

<div class="enterblogger-input">

<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">

message

</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'] = '1238330405694320316';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1238330405694320316','//https://demomasarif.blogspot.com/','1238330405694320316');

_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': '1238330405694320316', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script></div>


Style 2

Untuk yang style 2 ini cukup berbeda dengan style 1, walaupun Nama, Email, Dan pesan. tetapi tampilan nya yang berbeda.

Jika kalian ingin menggunakannya, kalian salin saja kode nya.


Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form id="kontak-arlina" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />

<div style="max-width: 100%; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak-arlina{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}

#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '1238330405694320316';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1238330405694320316','//https://demomasarif.blogspot.com/','1238330405694320316');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', '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': '1238330405694320316', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

Style 3

Untuk Style 3 ini berbeda dengan style yang ada di atas, karena style 3 ini menggunakan nama, email, subject, message.

Nah jika tertarik kalian bisa gunakannya di blog.



<pre><code>

<div dir="ltr" style="text-align: left;" trbidi="on">

<div class="container">

<h2>

Contact me</h2>

<form action="#" id="contact" method="post">

<div class="left">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" required="required" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" required="required" size="30" type="text" value="" />

<input placeholder="Subject" required="required" type="text" />

    </div>

<div class="right">

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

    </div>

<div class="send-button cl">

<div class="send-button cl">

<button id="ContactForm1_contact-form-submit" type="submit">Send</button>

    </div>

<br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</div>

</form>

<style scoped="" type="text/css">

/*Contact Us */

*{

 margin: 0;

 padding: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

::-webkit-input-placeholder{color: #777;}

:-moz-placeholder { /* Firefox 18- */ color: #777;}

::-moz-placeholder {  /* Firefox 19+ */ color: #777;}

:-ms-input-placeholder {color: #777;}



.container{

  position: relative;

  width: 100%;

 padding: 1em;

 margin: auto;

}



.container h2{

 text-align: center;

 text-transform: uppercase;

 color: #f55;

}



#contact input[type="text"],#contact input[type="email"], #contact textarea{

 display: block;

 padding: 10px;

 margin: 10px auto;

 width: 100%;

 font-size: 18px;

 color: #777;

  border: 1px solid #ccc;

}



#contact textarea{

 font-size: 16px;

}



#contact input:hover, #contact textarea:hover{

 border: 1px solid #888;

}

#contact input:focus, #contact textarea:focus{

 border: 1px solid #777;

}





#contact textarea{

 max-width: 100%;

 min-width: 100%;

 max-height: 180px;

 min-height: 180px;

  resize: none;

}



#contact .send-button{

 text-align: center;

}



#contact .send-button button[type="submit"]{

 color: #fff;

  background: #e74c3c;

  border: none;

 width: 100%;

 padding: 10px 0;

 font-size: 20px;

 text-transform: uppercase;

 transition: .5s all ease;

  cursor: pointer;

}



#contact .send-button button[type="submit"]:hover{

 background: #c0392b;

}



#contact .send-button button[type="submit"]:focus{

 position: relative;

 top: 2px;

}





/* Contact US Responsive*/



@media screen and (min-width: 640px){

 .container{

  width: 600px;

 }



  #contact textarea{

    max-width: 98%;

    min-width: 98%;

    min-height: 152px;

    margin-right: 0;

  }



 #contact .right,#contact .left{

  display: block;

 }



 #contact .right{

  float: right;

  width: 50%;

 }



 #contact .left{

  float: left;

  width: 50%;

 }

 .cl{

    clear: both;

  }

}

</style> </div>

</div>



</code></pre>

Style 4

Untuk Style 4 ini tampilan nya cukup terbilang menarik, karena tampilan ini diberi dropdown. Tentunya dengan adanya tampilan tersebut, membuat pengunjung akan tertarik untuk melihatnya. Dengan tampilan yang begitu elegan dan unik untuk dilihat nya, Style 4 ini menerapkan dropdown yang dimana jika kalian menekan gambar pesan.



<div dir="ltr" style="text-align: left;" trbidi="o n">

<br /></div>

<div dir="ltr" style="text-align: left;" trbidi="on">

<div dir="ltr" style="text-align: left;" trbidi="on">

<br /></div>

<br />

<section id="contact">

 <div class="sectionheader">

<h1>

CONTACT</h1>

</div>

<article>

 Silahkan contact kami jika Anda ingin memberikan kritik, saran, serta motivasi terhadap blog ini, dan kami berharap sekali atas dukungan Anda yang membangun tersebut.<br />





   <label class="contactbutton" for="checkcontact"><div class="mail">

</div>

</label><input id="checkcontact" type="checkbox" />

   <form class="contactform" name="contact-form">

<div class="input_wrapper">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><label for="contact_nom">NAME</label></div>

<div class="input_wrapper">

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><label for="contact_email">EMAIL</label></div>

<div class="input_wrapper">

<input id="contact_sujet" name="contact_sujet" type="text" value="" /><label for="contact_sujet">SUBJECT</label></div>

<div class="textarea_wrapper">

<textarea id="ContactForm1_contact-form-email-message" name="contact_message"></textarea></div>

<div class="submit_wrapper">

<input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" /> 

</div>

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

</article>

</section>







<style scoped="" type="text/css">

/* Contact Us By Lk21.news */

#contact {

width: 600px;

margin:2em auto;

background:white;

position: relative;

}

#contact::after {

content: "";

display: block;

height: 30px;

width: 100%;

left: 5%;

bottom: 0;

position: absolute;

-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);

box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);

border-radius: 100%;

z-index: -1;

}

#contact article {

  padding: 1em;

}

#contact h1 {

background: #27dbd2;

font-family: Oswald ,sans-serif;

font-size: 1.75em;

padding: 0.6em 0 0.6em 0.4em;

color: white;

text-shadow: 0 0.06em 0 #424242;

position: relative;

}

.contactbutton {

background: #27dbd2;

-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;

box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;

text-align: center;

display: block;

width: 100%;

height: 50px;

margin-top: 20px;

margin-bottom: 2px;

cursor: pointer;

}

.contactbutton:hover {

-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;

box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;

margin-top: 22px;

margin-left: 2px;

margin-bottom: 0px;

}

.mail {

margin-top: 11px;

font-size: 15px;

display: inline-block;

border-top: 2em solid transparent;

border-left: 2.6em solid #fff;

height: 0;

width: 0;

position: relative;

}

.mail:before {

content: '';

top: -2.5em;

left: -2.95em;

display: block;

position: absolute;

border-top: 1.2em solid #fff;

border-left: 1.6em solid transparent;

border-right: 1.6em solid transparent;

border-bottom: 1em solid transparent;

font-size: 0.8em;

}

.mail::after {

display: block;

content: "";

position: absolute;

border-top: 2em solid transparent;

border-right: 2.6em solid #fff;

height: 0;

width: 0;

left: -2.18em;

bottom: 0;

}

#checkcontact{

position: absolute;

left: -99999px;

}

.contactform {

overflow: hidden;

max-height: 0px;

-webkit-transition: all linear 1s;

-moz-transition: all linear 1s;

-o-transition: all linear 1s;

-ms-transition: all linear 1s;

transition: all linear 1s;

}

#checkcontact:checked + .contactform {

max-height: 1000px;

}

.input_wrapper {

position: relative;

}

.textarea_wrapper textarea {

margin-top: 20px;

display: block;

width: 100%;

background: white;

border: 1px solid #DADADA;

box-shadow: 0 0 1px 0 #E4E4E4;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 1em;

-webkit-transition: all 250ms ease;

-moz-transition: all 250ms ease;

-ms-transition: all 250ms ease;

-o-transition: all 250ms ease;

transition: all 250ms ease;

color: #5E5E5E;

}

.input_wrapper input[type="text"] {

margin-top: 1em;

display: block;

width: 100%;

background: white;

border: 1px solid #DADADA;

box-shadow: 0 0 1px 0 #E4E4E4;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 1em;

-webkit-transition: all 250ms ease;

-moz-transition: all 250ms ease;

-ms-transition: all 250ms ease;

-o-transition: all 250ms ease;

transition: all 250ms ease;

color: #5E5E5E;

text-indent: 15%;

}

.input_wrapper input[type="text"]:focus {

background: rgba(242, 56, 90, 0.05);

box-shadow: inset 2px 2px 5px 0 #DADADA;

outline: none;

text-indent: 0;

}

.input_wrapper label {

position: absolute;

left: 0;

top: 0;

height: 100%;

background: #27dbd2;

color: white;

font-family: Oswald ,sans-serif;

box-sizing: border-box;

width: 15%;

text-align: center;

line-height: 2.8em;

-webkit-transition: all 250ms ease;

-moz-transition: all 250ms ease;

-ms-transition: all 250ms ease;

-o-transition: all 250ms ease;

transition: all 250ms ease;

}

.input_wrapper input[type="text"]:focus + label {

left: 85%;

}

.textarea_wrapper textarea {

margin-top: 20px;

display: block;

width: 100%;

  min-height:150px;

background: white;

border: 1px solid #DADADA;

box-shadow: 0 0 1px 0 #E4E4E4;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 1em;

-webkit-transition: all 250ms ease;

-moz-transition: all 250ms ease;

-ms-transition: all 250ms ease;

-o-transition: all 250ms ease;

transition: all 250ms ease;

color: #5E5E5E;

}

.textarea_wrapper textarea:focus {

background: rgba(242, 56, 90, 0.05);

box-shadow: inset 2px 2px 5px 0 #DADADA;

outline: none;

}

.submit_wrapper {

text-align: center;

}

.submit_wrapper input {

text-align: center;

display: inline-block;

width: 40%;

height: 50px;

margin-top: 1em;

margin-bottom: 6px;

cursor: pointer;

background: #27dbd2;

color: white;

font-family: Oswald ,sans-serif;

font-size: 1em;

border: none;

-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;

box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;

-webkit-appearance: none;

  -webkit-transition: all 250ms ease;

-moz-transition: all 250ms ease;

-ms-transition: all 250ms ease;

-o-transition: all 250ms ease;

transition: all 250ms ease;

}

.submit_wrapper input:hover {

-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;

box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;

margin-top: 22px;

margin-left: 2px;

margin-bottom: 0px;

}



@media (max-width: 500px){

#contact {

width: 100%;

}

  .input_wrapper label {

line-height: 3.5em;

font-size: 0.8em;

}

}

</style></div>

Style 5

Untuk style 5 ini terbilang sederhana namun tetap menarik untuk dilihat, ada tiga kolom yaitu Nama, Email, Dan juga Pesan. Untuk tombol mengirimnya pun sangat simpel seperti style 2, hanya saja yang ini lebih kecil.



<div dir="ltr" style="text-align: left;" trbidi="on">

<style type="text/css">

.contact-form {

  width: 600px;

  max-width:100%;

  margin-left:auto;

  margin-right:auto;

  padding: 0;

  color: #000;

}

.contactf-name {

  float: left;

  width: 45%;

}

.contactf-email {

  float: right;

  width: 45%;

}

.contact-form-name, .contact-form-email, .contact-form-email-message {

  width: 100%;

  max-width: 100%;

  padding: 20px 15px;

  margin: 20px 0 30px 0;

}

.contact-form-button, .contact-form-button-submit {

  width: 20%;

  max-width: 20%;

  height: 40px;

  color: #fff;

  background: #097b84;

  font-size: 0.875em;

  border-radius: 5px;

}

.contact-form-button-submit {

  -webkit-transition: background-color 100ms ease-out 100ms;

  -moz-transition: background-color 100ms ease-out 100ms;

  -o-transition: background-color 100ms ease-out 100ms;

  transition: background-color 100ms ease-out 100ms;

}

.contact-form-button-submit:hover {

  background: #076269;

}

</style>











<script>

var blogId = '1238330405694320316';//gunakan nomor ID blog kamu

//Kamu juga bisa mengedit pesan di bawah ini, jangan lupa tanda kutipnya

var contactFormMessageSendingMsg ='Mengirim...';

var contactFormMessageSentMsg = 'Pesan sudah terkirim.';

var contactFormMessageNotSentMsg = 'Pesan tidak dapat terkirim, coba beberapa saat lagi.';

var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';

var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'

var widgetLoaded=false;

function sendEmailMsg() {

if(widgetLoaded== false) {

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

widgetLoaded=true;

document.getElementById('ContactForm1_contact-form-submit').click();

}

return true;

}

</script>

<div class="contact-form">

<form name="contact-form">

<div class="contactf-name">

Nama : <br/>

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>

<div class="contactf-email">

Email: <em>(harap diisi)</em><br/>

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>



<div style="clear:both"></div>

<div class="contactf-message">

Pesan: <em>(harap diisi)</em><br/>

<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>

<br />

 

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />

<div style="max-width: 450px; text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

KESIMPULAN

Bagaimana kalian tertarik bukan untuk menerapkan nya ? Jika kalian tertarik kalian bisa menerapkan nya di blog kalian. Peran halaman contact US ini sangatlah penting, karena dengan adanya halaman contact US ini dapat membantu para pengunjung untuk berinteraksi dengan pemilik blog.

Note : contact US style 1-5 sudah saya uji coba, tentunya hasil uji coba tersebut work dan tidak ada masalah. Pesan yang dikirim pengunjung pun sampai ke pemilik blog, jadi sudah pasti work dan tidak eror.

Semua style yang ada diatas, saya sudah cek di blog saya sendiri, dan tidak ada masalah ataupun eror

Sekian dari blog ini, jika kalian ingin bertanya mengenai seputar artikel ini kalian bisa menghubungi kontak yang ada di blog ini, semoga dengan adanya artikel ini dapat membantu kalian semua.

TERIMAKASIH SUDAH BERKUNJUNG
Buka Komentar

0 Response to "✓ [UPDATE] Cara Membuat Contact US Keren Di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel