Cara Membuat Formulir Kontak di Halaman Statis

Cara Membuat Formulir Kontak di Halaman Statis - Hai sobat, pada kesempatan kali ini saya akan membagikan tutorial tentang Cara Membuat Formulir Kontak di Halaman Statis.

Formulir Kontak ini sebenernya untuk ditampilkan di Widget. Namun pada tutorial ini kita akan membuat Formulir Kontak di Halaman Statis.

Formulir Kontak ini harus ada dalam sebuah blog, supaya pengunjung blog kita bisa memberikan Saran, Kritik, atau yang mau curhat bisa disampaikan melalui Formulir Kontak ini.

Langsung aja disimak berikut tutorialnya :

Buat Laman baru
Ubah dari mode Compose ke mode HTML

Copy code berikut :


<style type="text/css">
#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}
</style>

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span><br>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br>

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span><br>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br>

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span><br>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> 
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</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'] = 'ID_BLOG_SOBAT';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dID_BLOG_SOBAT','//domain.com/','ID_BLOG_SOBAT');
_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': 'ID_BLOG_SOBAT', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Paste didalam mode HTML, lalu Publish

Jangan lupa ganti ID_BLOG_SOBAT dan domain.com

Result

Kalau diblog sobat belum ada font awesome, silahkan tambahkan link berikut sebelum tag </head>
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

Cukup sekian tutorial tentang Cara Membuat Formulir Kontak di Halaman Statis. Kalau ada yang mau ditanyakan silahkan tinggalkan komentar.