the best method to Create Contact Page on Blogger -gbojom

 

How to Create a Contact Page on Blogger

So, I’m going to teach you 2 ways to add a Contact Page to Blogger. The first method uses the native Blogger contact widget. This method is great because it’s easy to set up and you don’t have to sign up for any outside services or apps. The main limit is that you can’t add any extra fields or use an email other than the email associated with your Blogger account.

The second method shows you a free service you can use to embed a custom form into your site and receive emails at any email address you want.

So, let’s get started and add a Contact Page to your Blogger site.

Method 1: Native Blogger Contact Widget

This method uses the default Blogger Contact Widget. But rather than placing it in the sidebar, we’re going to add it to a page for a much more professional look.
Step 1: Add Widget to Sidebar

  1》  Login to your Blogger Dashboard.
  2》   Go to the Layout page.
 3》   In a sidebar area, click the Add a gadget link.Create a Contact Page Blogger

   4》 In the Add a gadget popup, click on the More gadgets link.
 5》   To add the Contact Form to your widget area, click the blue plus icon.

    Create a Contact Page Blogger
    Save
 6》In the Configure Contact Form Widget popup window, you can ignore the widget title.
7》    If you’re using one of the newest default Blogger templates, you may see a checkbox option that says “Visible – Show contact form”. If you see this option, check it. If you don’t see this option, don’t worry about it, we will take care of this with some code.

    Create a Contact Page Blogger
    Save
    Click the Save button to save your widget.

Step 2: Hide the Widget

If your widget has the “Visibility – Show contact form” option, skip this step.

    On the Blogger Dashboard, go to the Theme page.
    Click the Edit HTML button. The theme code window will open.Create a Contact Page Blogger

    Press the [Control + F] or [Command + F] keys to open the search box in the code window.

    Search for: ]]></b:skin>

    Press the Enter key to search.
Create a Contact Page Blogger
    Paste the following code right BEFORE the ]]></b:skin> code.


    Code to add:

    div#ContactForm1 {
    display: none !important;
    }

    Click the Save theme button to save your changes.

Create a Contact Page Blogger



Step 3: Add Code to Page

    On the Blogger Dashboard, go to the Pages page.
    Create or open your Contact Page.Create a Contact Page Blogger
    Add any content you want like a heading, image or text to the top of the page in Compose mode.Create a Contact Page Blogger
    Switch to HTML mode. Click on the HTML button.
    Paste the code below into the code window below your content.

    Code to add:<!-- Contact Form Code -->
    <style>
    .page-contact-form input,
    .page-contact-form textarea {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    }

    .page-contact-form input.contact-form-button.contact-form-button-submit {
    padding: 10px;
    background: #000; /* Button background color */
    color: #fff; /* Button text color */
    border: none;
    }

    .page-contact-form input.contact-form-button.contact-form-button-submit:hover {
    background: #777; /* Button background hover color */
    color: #fff; /* Button text hover color */
    }

    </style>
    <div class="contact-form-widget page-contact-form">
    <div class="form">
    <form name="contact-form">
    Name:<br />
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    E-mail: <span id="required">*</span><br />
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    Message: <span id="required">*</span><br />
    <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" />
    <br />
    <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>
    </form>
    </div>
    </div>

    <!-- End Contact Form Code -->

    Click the Publish or Update button to save your changes.Create a Contact Page Blogger

Huzzah, you now have a Contact Page on your Blogger site!

I have added a bit of style to the form. You can change the submit button background and text colors if you want them to better match your site. The CSS code is annotated.

Method 2: Embed a JotForm

JotForm is an online form builder and form creator. It is FREE up to:

    100 monthly form submissions
    5 forms
    1,000 monthly form views
    500 stored forms
    JotForm branding on form

So, if you’ve got a crazy busy Contact Form, this may not be the solution for you and you may want to stick to Method above which is totally unlimited.

But if you anticipate less than 100 contacts per month, this is a great option.

It offers some really handy features like:

    Thank You Page creation
    Custom fields
    Choose the email for delivery
    Send an automated reply to contactees
    Custom styling
    and more!

Step 1: Create a JotForm Form

    Signup for JotForms.
    In the JotForms Dashboard, click the Create Form button.

Create a Contact Page Blogger with JotForm
    Choose Classic Form (all fields on one page) or Card Form (one field per page). Click the Create a Form button under the style of your choice.

    Create a Contact Page Blogger with JotForm
    Save
    Next, choose whether you want to start from a Blank Form, Use Template or Import a form.      

I recommend using a template.Create a Contact Page Blogger with JotForm
    Choose the template that best fits your needs.

There are several Contact Form options. You can always edit fields, text and style later.
    Once you select your template and click Continue, you will be able to edit a preview version of your form.

    Click the Add Form Element button if you need to add another field, more text, etc. I have added a Subject line in my example.

Create a Contact Page Blogger with JotFormCreate a Contact Page Blogger with JotForm
    To edit the styles of your form, click on the blue paint roller icon.

 You can edit colors, fonts, choose color schemes or even pick one of their pre-made themes.

Create a Contact Page Blogger with JotForm
    When you’re done Building your form, click on the Settings tab. Under this tab you can set conditional logic (show hide fields, etc.) as well as set notifications (emails to you) plus autoresponder message to the person who contacted you.

    Under Settings, you can also integrate your form with services like MailChimp and add a Thank You page (great idea!).

Create a Contact Page Blogger with JotForm
    Once your Settings are complete, it’s time to Publish your form.

Click on the Publish tab.

    Click on the Platforms tab on the left side of the page.

    You will find an option for Blogger.

Create a Contact Page Blogger with JotForm
    The embed code will be displayed.

 Click the green Copy Code button.

Create a Contact Page Blogger with JotForm

Step 2: Add Contact Form to Your Page

    In the Blogger Dashboard, go to the Pages page.
    Click on the page you wish to edit.

Create a Contact Page Blogger
    In Compose mode, add any content you wish to add to the page.

Create a Contact Page Blogger
    Switch to HTML mode.

    Under your content, paste the form code you copied.Create a Contact Page Blogger with JotForm
    Click the Update or Publish button to save your page.

Yeah, you will now have a custom form embedded in your Contact Page.

Emails will be delivered to your inbox according to your settings.
You Now Have a Contact Page on Blogger!

Having a dedicated Contact Page makes your blog look more professional and also makes it easier for your readers, potential sponsors and others to contact you.

Happy blogging!