How To Create A Contact Page

Created:
by:
SimplyTheStudio
Open page
How To Create A Contact Page
A contact form allows your readers and visitors to easily reach out to you when they have a question, a problem or simply want to get in touch with you. You will receive an email after they send you a message. In this tutorial, we will show you how to create and customize a contact page and how to include it in your top navigation.

Create a contact form

  1. Open your Blogger Dashboard and go to “Layout”.
  2. Find the “Sidebar” section and add a new gadget by clicking on “+ Add a gadget”.
  3. Select “Contact Form” from the list.
  4. Move the gadget to the very bottom of the Sidebar section.
  5. Save!

Create a contact page

  1. In your Blogger Dashboard, from the left menu select “Pages”.
  2. Click on “New Page” and view it as HTML (you’ll find this button after you click on the pencil icon in the formatting menu).
  3. Copy and paste the code below: 
    You can contact me here:<br />
<br />
<html>
<head>
<div class="widget ContactForm" id="custom_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" placeholder="Name" size="30" type="text" value="" /><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your message" rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send!" /><br />
<div style="text-align: center; width: 100%;">
<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>
</head>
</html>
  4. Change the text in brown to anything you want. You can add more text (your email address or social media handles) as well, just make sure you don’t change the code between <html> and </html>.
  5. Save!

Customization

  1. Go to “Theme” and below the preview of the template click on “Customize”.
  2. From the left menu, click on “Advanced”. Click on “Body” to open the drop-down menu, sctoll to the bottom and click on “Add CSS”.
  3. Copy and paste the code below: 
    .ContactForm .form-label {
display: none;}
    
.contact-form-widget, .ContactForm input, .ContactForm textarea {
max-width: 100%;
width: 100%;
margin: 0 auto;
border: 1px solid #000;}
    
.contact-form-widget {
margin: 0 auto;
border: 0;}
    
.ContactForm input, .ContactForm textarea {
margin-bottom: 5px;
padding: 15px;}
    
.contact-form-button-submit, #ContactForm1_contact-form .contact-form-button-submit, 
#ContactForm1_contact-form-submit.contact-form-button.contact-form-buttom-submit {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: 10px auto 0 auto !important;
padding: 5px 7px !important;
display: block;
background: #000;
border-radius: 0 !important;
border: 1px solid #000;
color: #ffffff !important;
text-align: center;}
    
.contact-form-button-submit:focus, .contact-form-button-submit:hover, #ContactForm1_contact-form .contact-form-button-submit:focus, #ContactForm1_contact-form .contact-form-button-submit:hover {
background: #ffffff;
color: #000 !important;
cursor: pointer;}
    
.ContactForm input:focus, .ContactForm input:hover, .ContactForm textarea:focus, .ContactForm textarea:hover, #ContactForm1_contact-form .contact-form-button-submit:focus, #ContactForm1_contact-form .contact-form-button-submit:hover {
background: #ffffff !important;
border: 1px solid #000000;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;}
    
.contact-form-success-message, .contact-form-error-message {
position: static;
bottom: 0;
margin-left: 0;
background: #FFFFFF;
border: 0 solid #000000;
box-shadow: 0;
color: #000;
font-size: 11px;
line-height: 19px;
text-align: center;
opacity: 1;}
    
.contact-form-widget ::-webkit-input-placeholder {color: #000000;}
.contact-form-widget ::-moz-placeholder {color: #000000;}
.contact-form-widget :-ms-input-placeholder {color: #000000;}
.contact-form-widget :-moz-placeholder {color: #000000;}
.sidebar-wrap #ContactForm1 {
display: none;}
  4. Save by clicking on the save icon in bottom right corner.

Adding into the top navigation

  1. Go back to “Pages” and find the contact page you created earlier. Open it in a new tab by clicking on the eye icon.
  2. Copy the link of the page from your browser.
  3. Go to “Layout” and find the “Pages” gadget in the “Top Menu” section. Click on “Edit”.
  4. As “New Site Name” enter Contact (or Contact Page — whatever you want).
  5. As “New Site URL” enter the link you copied.
  6. Add a new link, change its position and save the widget!
Is this not what you were looking for?
Perhaps you need a different tutorial. Return to the main Tutorials page and also browse through our Troubleshooting pages and FAQ for most common solutions.
Tutorials Page
Troubleshooting Page
FAQ Page