Contact Form

You can add the native Blogger contact form to a page. The messages will be sent to the email of your admin Blogger account.
To add the form on your page, follow these steps:
  1. Go to Pages on the Blogger dashboard vertical menu.
  2. Locate your Contact page or create a new page.
  3. Switch from the Compose tab to the HTML tab.
  4. Copy the code below and paste it on the page panel.
<div style="text-align: center;">
Send me a hello :)<br/>
Write to</div>
<div style="text-align: center;">
<b><span style="font-size: large;"> email@email.com
</span></b></div>
<div style="text-align: center;">
or use the form below:</div>
<html>
<head>
<div class="widget ContactForm" id="custom_ContactForm100">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm100_contact-form-name" name="name" placeholder="name" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm100_contact-form-email" name="email" placeholder="email" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm100_contact-form-email-message" name="email-message" placeholder="your message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm100_contact-form-submit" type="button" value="Send" />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm100_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm100_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</head></html>

You are free to change the orange text.


Displaying the contact form on the theme's homepage (Optional)

Most of the Lovelogic themes have the Contact Form gadget added on the theme. It can be seen on the Layout page but it is hidden on the theme. To display it also on the homepage theme, follow this:
  1. Go to Theme on the Blogger dashboard vertical menu.
  2. Click on the Customize button
  3. Click on Advanced link on the left menu
  4. Open the General dropdown and scroll the list of theme sections until the end and locate Add CSS
  5. Copy the code below and paste it on the Add custom CSS line
  6. Save
#ContactForm100, .sidebar #ContactForm100 { display: block; }


Unlocking the Contact Form (Optional)

Some gadgets are locked and can't be moved to another place. If you want to move the contact form gadget to another spot on the theme, follow the how to unlock gadgets tutorial to enable the possibility of move it and also to enable the Remove button.


How to redirect the Contact Form messages to another email (Optional)

Follow this tutorial.

Contact Form