Cara Membuat Formulir Kontak di Halaman Statis Blogger

Halaman kontak atau contact form memang sangat penting untuk dipasang pada setiap website atau blog agar pengunjung situs lebih mudah untuk menghubungi Anda.

Apapun jenis website yang Anda kelola halaman kontak wajib ada, baik itu berisi alamat tempat tinggal atau alamat toko / perusahaan, bisa juga nomor hp / telepon, atau bahkan formulir kontak.

Membuat halaman hubungi kami atau contact us di blogspot memang sangat mudah, kita bisa membuatnya dengan menggunakan fitur yang sudah disediakan dari platform blogger.

Anda bisa menambahkan widget contact form melalui Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak.

Cara di atas bisa Anda gunakan jika ingin menampilkan widget formulir kontak di bagian tertentu, dengan tampilan atau desain yang masih sederhana tergantung dari template blog Anda yang digunakan saat ini.

Setiap template blog yang digunakan tentu memiliki desain yang berbeda, beberapa orang juga membagikan kode script untuk membuat form kontak ini dengan desain yang berbeda-beda.

Pada kesempatan kali ini saya akan membagikan tutorial cara membuat formulir kontak di halaman statis blogger dengan desain yang keren dan tampilan yang lebih profesional.

Ada tiga jenis kode script untuk membuat form kontak di blog yaitu kode HTML untuk kerangkanya, kode CSS untuk mempercantik tamapilannya, dan kode JavaScript untuk menjalankan perintah atau fungsinya agar jika ada yang menggunakan formulir ini akan secara otomatis masuk ke email Gmail yang Anda gunakan.

Nah, bagi Anda yang tertarik untuk membuat form kontak di blog khusus untuk halaman statis (static page) silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Form Kontak di Halaman Statis Blogger

1. Masuk ke Blogger.com
2. Klik Halaman > Halaman baru
3. Kemudian beri judul "Contact" atau "Kontak" atau sesuai keingnan Anda
4. Lalu pada editor konten pilih HTML bukan compose, lalu masukkan kode di bawah ini:

<style type="text/css">
.contact-form-widget {
}
.contact-form-success-message, .contact-form-error-message {
    background: #f9edbe;
    border: 0 solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 500px;
    border-radius: 3px;
}
.contact-form-success-message-with-border, .contact-form-error-message-with-border {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 5px 10px;
}
.contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: -8.5%;
    width: 11px;
}
.contact-form-email, .contact-form-name {
    color: inherit;
    height: 40px;
    margin-top: 5px;
    max-width: 300px;
    width: 100%;
    padding: 0 15px;
    border-radius: 3px;
    border: 1px solid #cacaca;
    box-sizing: border-box;
}
.contact-form-email-message {
    color: inherit;
    margin-top: 5px;
    vertical-align: top;
    max-width: 600px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #cacaca;
    padding: 15px;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
    outline: none;
    border: 1px solid #4381ce;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
    outline: none;
    border: 1px solid #4381ce;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
    background: #f8f8f8;
}
.contact-form-button {
    display: block;
    font-size: 14px;
    line-height: 24px;
    padding: 0 20px;
    margin: 30px 0;
    text-align: center;
    border: none;
    background: #4381ce;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
}
.contact-form-button:hover, .contact-form-button.hover {
    cursor: pointer;
    outline: none;
    opacity: .85;
}
.contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus {
    outline: none;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
    outline: none;
    opacity: .85;
}
.swajib {
    font-weight: bold;
    color: #e85e5e;
}
.ctitles {
    font-weight: 500;
    display: block;
    margin: 30px 0 0;
}
</style>

<div class="contact-form-widget">
<form name="contact-form">
<span class="ctitles">Nama <span class="swajib">*</span> :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
<span class="ctitles">Alamat Email <span class="swajib">*</span> :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
<span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<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>
</form>
</div>
<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'] = '6515396942964738584';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6515396942964738584','//www.caramanual.com/','6515396942964738584');
_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': '6515396942964738584', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

5. Lakukan beberapa pengeditan pada ID dan URL blog yang saya tandai dengan huruf tebal (bold).
6. Kemudian klik Publikasikan.

- Ganti ID blog: 6515396942964738584 (total ada 4 kode) dengan ID blog milik Anda. Caranya lihat di bagian URL saat Anda membuka blogger.com
- Ganti URL blog: www.caramanual.com dengan URL blog Anda

Itulah artikel cara membuat formulir kontak di halaman statis blogger, jika Anda mengalami masalah saat mencobanya silahkan hubungi kami melalui halaman kontak blog ini. Selamat mencoba dan semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini