Monday, October 21, 2013

31 Days of Helping other Bloggers: Contact Page

Remember I said I would miss some days here and there? Most of those days were missed last week! Life with five squishers gets crazy at times. October is always nuts in our home. But I'm back to help you!

Now that you understand how to set up static pages let's set up a contact page for your Blogger site!

Blogger Dashboard > Layout > Add a gadget

create a contact page

create a contact page

You can add this gadget anywhere because you will remove it from your main site later.

Select "More Gadgets" and add "Contact Form"

create a contact page

Save your arrangement and now a contact form is visible on your site! Contact messages will be sent to the email address you have set with your Blogger account. You can send a test message to yourself to be sure it is working properly. 

I want the contact form to have it's own page.

No problem! To achieve this you will need to edit the HTML of your template, but don't worry I will hold your hand the whole time!

Before editing any of your code backup your template. In the event something happens you can always restore the latest copy of your template! 

create a contact page

Now you are ready to edit your code!

Blogger Dashboard > Template > Edit HTML

Place your cursor anywhere inside your template and press ctrl+F to bring up a search box. Search "contact form" and press enter to find the code line we will be working with today. 

create a contact page

You will need to expand the line twice by clicking on the black arrows.

create a contact page

Remove the highlighted text. {I have also included the text to be removed below.}

create a contact page

1:   <b:if cond='data:title != &quot;&quot;'>  
2:    <h2 class='title'><data:title/></h2>  
3:   </b:if>  
4:   <div class='contact-form-widget'>  
5:    <div class='form'>  
6:     <form name='contact-form'>  
7:      <p/>  
8:      <data:contactFormNameMsg/>  
9:      <br/>  
10:      <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>  
11:      <p/>  
12:      <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>  
13:      <br/>  
14:      <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>  
15:      <p/>  
16:      <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>  
17:      <br/>  
18:      <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>  
19:      <p/>  
20:      <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'/>  
21:      <p/>  
22:      <div style='text-align: center; max-width: 222px; width: 100%'>  
23:       <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>  
24:       <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>  
25:      </div>  
26:     </form>  
27:    </div>  
28:   </div>  
29:   <b:include name='quickedit'/>  

Save your work. Now you can create a static page for readers to contact you.

Once you have your contact page set up add this code (click on the HTML button located on the top left of your compose screen) :

  <div class='widget ContactForm' id='ContactForm1'>  
  <div class='contact-form-widget'>  
   <div class='form'>  
    <form name='contact-form'>  
     <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>  
     <p>E-mail *</p>  
     <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>  
     <p>Message *</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>  

After this code has been added you can click the compose button again and add a note to your readers. Publish your page. Now you are ready to view your contact page and send a test email to yourself to be sure it is working.

Leave a comment below letting me know where you have set up a contact page. I would love to see your work and send you a message!

I'm linking up with the Nester for her 31 Days series.

31 days blogging help with tips and tricks - @AndiGould
This post is part of the 31 Days of Helping Other Bloggers series. If you have questions about your blog leave a comment and I will see if I can help you!

Andi and Brad have been married since 2002. They have five squishers who keep them on their toes. She is a second generation home educator. In her spare time Andi creates and sells handmade goodies in her shop, Andi Gould Designs.

No comments:

Post a Comment

Thank you for stopping by today. I love hearing from you. Leave a comment and we can chat more!