Cara Membuat Contact Form Responsive dan Keren di Blog

formulir kontak ringan dan responsive
Cara memasang contact form

Contact form atau form contact merupakan sebuah halaman yang dipasang untuk mempermudah pengunjung menghubungi admin sebuah blog. Seorang blogger dapat dikatakan wajib memasang formulir kontak ini di situs blog mereka. Namun bagaimana cara memasang contact form di blog agar responsive, keren dan ringan?

Cara Memasang Contact Form Keren dan Responsive di Blog

Membuat sebuah halaman formulir kontak di blog tidak terlalu sulit, kamu hanya perlu memasang beberapa script pembantu seperti CSS dan HTML di blog.

Cara kerja nya adalah, ketika seorang pengunjung mengisi formulir kontak, setelah dikirim maka akan otomatis terkirim kepada email admin blog tersebut. Dan pesan email yang dikirim biasanya akan segera tiba dalam waktu beberapa detik saja. Penasaran bagaimana cara membuatnya? Berikut tutorial dari tulisanpanda.com


  • Login ke akun blogger kamu
  • Pada tab menu klik Halaman > Buat halaman Baru > Mode HTML
  • Kemudian pastekan kode HTML berikut didalam halaman

  • 
    
    <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>
    <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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <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'] = '5705102215223474422';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5705102215223474422','//enterblogger.com/','5705102215223474422');
    _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': '5705102215223474422', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>
    


  • Ganti 5705102215223474422 dengan ID blog anda
  • Klik Pratinjau jika sudah sesuai keinginan anda dapat mempublikasikan halaman tersebut


  • Selamat anda telah berhasil memasang formulir kontak responsive di blog anda.

    Sangat mudah bukan memasang contact form respnsive di blog? Nah, pembaca blog kamu sekarang bisa bertanya dan menghubungimu melalui blog,

    Sumber Script : Enterblogger.com

    Dapatkan Tips Menarik Setiap Harinya!

    • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
    • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
    • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

    0 Response to "Cara Membuat Contact Form Responsive dan Keren di Blog"

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel