Create Custom Contact Page

15.10.19

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 tough with you. You'll receive an email after they send you a message, which also contains their email address — this way you can contact them back and help them or answer their question.

In this tutorial I'll 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 — it should be fourth from the bottom.
  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 next to "Compose" 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. Feel free to 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". This opens second menu — scroll down until you see "Add CSS".
  3. Copy and paste the code below:

    .ContactForm .form-label {
    display: none;}

    .contact-form-widget,
    .ContactForm input,
    .ContactForm textarea {
    max-width: 600px;
    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 "Apply To Blog".


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 "View".
  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 wish).
  5. As "New Site URL" enter the link you copied.
  6. Add a new link, change its position and save the widget!


If you need help, you can contact me here.

1 comment

  1. Just wanted to say THANK YOU Berenica for such clear and detailed instructions!

    ReplyDelete

Contact Form

Name

Email *

Message *

BERENICA DESIGNS.