Add a Contact Form on Blogger

Add a Contact Form on Blogger-on this occasion I will try to elaborate on the matter of contact form (contat form). In wordpress it is usually already very easily fill in the contact form (contact form) using the plugins already exist, many live in select.

Well for bloggers actually have one named Contact Form plugin, but can only be obtained from the menu widget.

Continue to how for example if we want to fill in the contact form at a specific page or post? Then jump to the tutorial.

Step 1. Enter the menu Layout Add a Gadget > > More Gadgets > Contact Form.

Fill in the name of the form to your liking (non neat) next click the Save to save him.

Step 2. Enter the menu Templates > Edit HTML.

Click the Jump to the widget and then select ContactForm1, then you will find there is a script:

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1' visible='true'></b:widget>

Click the arrow next to the left of the script then you will find the complete scripts from the contact form.

<b:includable id='main'></b:includable>
  <b:if cond='data:title != &quot;&quot;'></b:if>
    <h2 class='title'><data:title></data:title></h2>
 
  <div class='contact-form-widget'></div>
    <div class='form'></div>
      <form name='contact-form'></form>
        <p>
        <data:contactFormNameMsg></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></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></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'></textarea>
        <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%'></div>
          <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;'>
       
     
   
 
  <b:include name='quickedit'></b:include>

Step 3. Search script that contains]] > by pressing CTRL + F and type]] >. Once you find it now copy and paste the following script immediately above]] >.

/* CONTACT FORM by WERDIMEDIA.COM */contact-form-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 0px; color: #000;} fm_name, fm_email.. {float: left; padding: 5px; width: 48%}. fm_message {padding: 5px;}. contact-form-name, contact-form-email {width: 100%; maxwidth: 100%; margin-bottom: 10px; height: 40px; padding: 10px; font-size: 16px;}. contact-form-email-message {width: 100%; max-width: 100%; height: 100px; margin-bottom: 10px; padding: 10px; font-size: 16px; }. contact-form-submit-button {border-color: #C1C1C1; background: #E3E3E3; color: #585858; width: 20%; max-width: 20%; margin-bottom: 10px; height: 30px; font-size: 16px;}. contact-form-submit-button: hover {background: #ffffff; color: #000000; border: "1px" solid #FAFAFA; }

After that, don't forget to click Save template to save any changes you have done.

Step 4. Now please make a post or page that wants to contact form is filled, then copy the script below.

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="fm_name">Your Name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""></div><div class="fm_email">E-mail Address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""></div><div style="clear:both"></div><div class="fm_message">Message *: <textarea class="contact-form-email-message" cols="25" 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" type="button" value="SEND"><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></div></div></div>

Part of the Red Fox can be to your liking.

So everything is sorted out, hopefully this tutorial could be useful and don't forget the positive input on the bottom yaaaa …

Design

Leave a Reply

Your email address will not be published. Required fields are marked *