ADD A CONTACT FORM TO PAGE ON BLOGGER
Bloggers contact gadget is a really easy way to add a contact form to your blog, however since it’s a gadget you can only place it in your sidebar or footer which is kind of an awkward place for a contact form. This tutorial will show you how to move it to it’s own page and how to customise it to suit your branding. When a visitor fills out the form, their message will be sent to the email associated with the blog. This is usually the admins email in settings.
HOW TO ADD A CONTACT FORM TO PAGE ON BLOGGER
1. Go to Layout, scroll down to the footer and add a new gadget > more gadgets > contact form > save.
2. Go to Template > Edit HTML > Jump to Widget > ContactForm1
3. Click the arrow on the left twice to expand the code so that you see the following
2. Go to Template > Edit HTML > Jump to Widget > ContactForm1
3. Click the arrow on the left twice to expand the code so that you see the following
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<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'/>
</b:includable>
</b:widget>
4. Delete the code that is shown above in pink so that all that is left is the following
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
</b:includable>
</b:widget>
5. Go to Pages. Create a new page or select your contact page. On the right click Options and under Compose Mode select Interpret typed HTML. Paste the code below into the editor where you want it to appear and save.
<div id='ContactForm1' class='widget ContactForm'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name:</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail: <span id="required">*</span></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message: <span id="required">*</span></p>
<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'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
6. Go to Template > Edit HTML and find
]]></b:skin>, if you have trouble finding it check out this post for help. Above ]]></b:skin> add the following CSS/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}
.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }
.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}
.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}
.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}
.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px;
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center;
}
/* END CUSTOM CONTACT FORM BY XOMISSE */
7. Edit the CSS to match your blog and branding. The /* … */ are known as comments, they are there to help you identify what to change. There’s no need to remove them as they won’t appear on your blog.
8. Test your form to make sure everything is working correctly and that the email is being sent. The message will be sent to the email associated with the blog. This is usually the admins email in settings.
