Hello Publisher,
Did you know, there are times when a visitor wants to convey something that is unrelated to the topic of the post, or there are times when what he wants to convey is private, so by adding a contact form to the blog allows visitors to get the opportunity to communicate according to their needs, so besides the comment box, a contact form is also important and absolutely must be there.
Here I will try to show you how to create a Contact form for the blogger platform. The first way is with a widget, the second way is with Google Drive.
Method 1 - Modify the Blogger Contact Widget
First
Go to the Blogger Layout page, Click Add a Gadget in the sidebar or footer. Select More Gadgets, then add a Contact Form.
Adding Blogger Contact Widget
Second
Go to Template, then click Edit HTML. After that click the cursor to the template code page, then use CTRL+F to search for the following element, you must find it!
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>Click the small arrow on the left side of the element row to expand the structure inside. Just below it you will see the following code:
<b:includable id='main'>Third
You will be shown the following code, so please DELETE all the codes that I have marked with comments FROM HERE - TO HERE.
<b:includable id='main'>
<!-- MULAI DARI SINI -->
<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
<!--SAMPAI SINI-->
</b:includable>Leaving the following elements:
<b:includable id='main'></b:includable>Fourth
Do a new search for the style element by using CTRL+F, look for the following code:
]]></b:skin>Once found, Copy-Paste the CSS code below right above it (right before the closing syntax above):
/*CUSTOM CONTACT FORM BY GATEWAN.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%;
max-width: 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-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}Don't forget to click SAVE TEMPLATE!
Fifth (Last)
Continue to the Pages menu, create a new page, name it Contact / Contact Us / Contact Me / Guest Book or whatever, free, as long as it is relevant. The previous one was still in Compose mode, then please change to HTML mode first. Next, Copy - Paste the Code 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="Submit" />
<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>Don't forget to click Save / Publish. Here are the results,
Method 2 - Using Google Drive - Forms
Here I will show you how to create an anti-spam contact form in the easiest way, without coding and all done using a graphical method (GUI) using the facilities available on Google Drive and feel the ease, as easy as embedding a video or image into a blog post.
In this tutorial, I collaborate text and video, to make it easier to understand the process, text learner or visual learner, it's up to you:
I assume you all already have a google account (google mail). Login to google drive and Create a new form:
Google Forms
- Don't forget to fill in the form title and description.
- Create fields as specified or as you need
- Choose a form theme according to your taste
- Check the results by selecting preview / see the finished form, before embedding it on the blog.
- Submit the form to get the frame code, and adjust the size.
- Copy the code and embed it on a new page, not a new post.
- View the results, take the test, fill out the form and send a message,
- Go back to the Google Drive page, select the View responses menu on the previous form.
- There you can see/review/review messages from guests without having to worry about your mailbox being full of spam, junk, etc. Because messages from guests are displayed in spreadsheet format,
Google Form View
If it's not clear, you can watch this video;
The result,
