Cara Memindahkan Widget Contact ke Halaman Statis

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Memindahkan Widget Contact ke Halaman Statis, Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Baca juga:

Cara Memindahkan Widget Contact ke Halaman Statis

Advertisement

Cara memasang widget kontak di halaman statis - Halo sobat, sebelumnya saya telah membagikan cara memasang sticky widget di blogger, bagi sobat yang ingin menerapkannya pada blog sobat silahkan baca artikel tersebut dengan mencarinya menggunakan kotak pencarian pada blog ini. Dan pada kesempatan kali ini, saya akan membagikan cara untuk memindahkan widget kontak form ke halaman statis. Sebelumnya saya akan sedikit menjelaskan mengenai widget kontak form dan apa manfaatnya bila di pindahkan ke halaman statis. 

Widget contact form merupakan salah satu widget penting dalam sebuah blog, karena apabila ada pengunjung blog yang ingin menghubungi anda baik untuk penawaran kerjasama ataupun kepentingan lainnya mereka dapat langsung mengirimkan pesan mereka melalui widget tersebut.

Salah satu keuntungan dalam memindahkan widget contact tersebut yakni dapat meringankan loading blog sobat karena pada saat halaman blog sobat di buka tanpa harus menload banyak widget. Disamping itu, dengan memindahkan widget tersebut ke halaman statis blog anda akan terlihat lebih profesional dan juga dapat menghemat ruang widget yang ada dalam blog sobat. Baiklah, bagi anda yang ingin langsung memindahkannya silahkan ikuti langkah-langkah di bawah ini.

Cara Memindahkan Widget Contact ke Halaman Statis

1. Langkah pertama, silahkan sobat memasang widget contact form terlebih dahulu pada blog sobat.
2. Setelah sobat memasangnya dalam blog. langkah selanjutnya silahkan sobat menuju laman dan silahkan membuat laman baru da silahkan masuk pada mode HTML.

3. Kemudian, silahkan pastekan kode di bawah ini ke dalamnya.

<script>
var blogId = 'XXXX';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang valid diperlukan.'

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>
<form name="contact-form">
<div>
Nama Anda : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<div>
Email: <em>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div>
Pesan: <em>(wajib)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

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

Note : Silahkan ganti tulisan XXXX dengan ID blog sobat.

4. Terakhir silahkan publish dan lihat hasilnya. selamat mencoba :)

Hasil dari pemasangan di atas yakni kita masih menggunakan contact form defalut bawaan blogger. Nah bagi anda yang ingin memasang kontak form dengan desain yang lebih menarik. Sobat dapat menggunakan tools yang di sediakan oleh 123 Contact Form, untuk lebih jelasnya silahkan ikuti langkah-langkah pendaftaran dan juga langkah-langkah pemasangannya di bawah ini.

1. Pertama silahkan sobat menuju ke halaman resmi 123 Contact Form
2. Kemudian silahkan sobat membuat akun terlebih dahulu dengan mengetuk tombol sign-up.

3. Selanjutnya anda akan di bawa ke halaman dashoard dan di hadapkan pada beberapa pilihan pembuatan akun, silahkan sobat pilih opsi yang gratis saja dengan memilih "Basic Free Always"

4. Selanjutnya silahkan ikuti langkah-langkah registrasinya.

5. Setelah anda berhasil membuat akun, selanjutnya anda akan di hadapkan pada beberapa jenis form yang dapat anda gunakan, silahkan pilih "contact and lead form" dan silahkan sesuaikan dengan keutuhan anda.

6. Setelah anda selesai membuat kontak form dan juga memilih temanya, selanjutnya silahkan pilih publish dan silahkan pilih opsi embed code dan silahkan pilih HTML/ Javascript.

7. Langkah berikutnya, silahkan copy kode yang telah di sediakan dan silahkan masukkan kode tersebut pada Mode HTML pada laman statis seperti langkah pertama di atas.

8. Terakhir silahkan publish dan lihat hasilnya :)

Baca juga : Cara memasang contact form di halaman statis versi 2.

Demikian artikel kali ini mengenai cara memindahkan contak form ke halaman statis. Bagi sobat yang masih mengalami kesulitan dalam proses pemindahannya silahkan meninggalkan komentar pada kotak komentar di bawah, Semoga bermanfaat :)