Cara Memasang Formulir Kontak Pada Halaman Statis Blog

Cara Memasang Formulir Kontak Pada Halaman Statis Blog

Memasang formulir kontak pada halaman statis sangatlah mudah dan tentu saja fungsinya cukup banyak. Silahkan lihat pada halaman contact blog ini, jika Anda tertarik silahkan ikuti tutorial berikut.

Cara Membuat Halaman Contact Pada Blog.

1. Pertama-tama buatlah halaman statis terlebih dahulu dengan nama contact, contact me, atau apa pun yang Anda suka. Jika sudah, jangan di publish dulu melainkan di save/simpan lalu tutup.

2. Menuju ke tata letak, lalu add widget dan pilih formulir kontak. Saya sarankan untuk memasangnya di footer saja.

3. Setelah itu pilih Template lalu Edit HTML. Masukkan CSS berikut sebelum kode ]]></b:skin> atau </style>.

/* CSS Contact ---- http://wajahilmu.blogspot.com/ */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:50%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e6e6e6;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #e6e6e6;border-radius:3px;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:#666;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {font-family:'Open Sans';float:left;background:#f3f3f3;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:none;border-radius:4rem;background-image: linear-gradient(110deg, #fe3434 0%, #fe3434 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;transition: background-position .4s ease, color .4s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}

4. Masih pada edit HTML, silahkan cari kode widget Formulir Kontak yang dipasang sebelumnya. Kira-kira seperti ini kodenya.

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

5. Hapus kode yang telah saya warnai lalu save. Jika sudah, langsung menuju ke halaman statis yang telah di buat sebelumnya lalu ubahlah Compose ke HTML.

6. Dalam Mode HTML, masukkan kode berikut lalu publish.

<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form"><span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-user"></i> Name </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-envelope-o"></i> Email Address <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-pencil-square-o"></i> Content <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</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="Send" />  <br />
<div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form>
<br /></div>

Jika sudah, silahkan uji coba halaman contact tersebut lalu cek email Anda. Sekian tutorial kali ini, jika ada pertanyaan, kritik dan saran silahkan berkomentar pada halaman ini. Terima kasih telah membaca artikel di Opick Weblog.

Original post by wajahilmu.blogspot.com (Opick Weblog)

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/06/cara-membuat-halaman-contact.html

Share this :