Normally, on sites hosted on the Blogger.com platform, the contact form is placed in the sidebar.
I don't like this, I find it hard to use. Plus I can make better use of the sidebar space. That's why on my blogs I prefer to move the contact form to a separate page.
To do this, I add the contact form widget to the sidebar. If the theme has multiple sidebars, I choose one position for the contact form that is displayed on all pages.
Then, in the Custom CSS of the theme I add the following lines:
/* Do not show the contact form widget */ div#ContactForm1{display: none !important;}
After this I create a new page named Contact. In the page settings I will set Reader comments to "Do not allow, hide existing".
Then, I swith to HTML mode and copy-paste the following code:
<form name="contact-form"> <p></p> Name<br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="name"/> <p></p> Email <span style="font-weight: bolder;">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="email (required)"/> <p></p> Message<span style="font-weight: bolder;">*</span><br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="8" placeholder="enter your message"></textarea> <p></p> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="submit" value="Send" /> <p></p> <div style="max-width: 222px; text-align: center; width: 100%;"> <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> </div> </form> <style> /* Only for the Trova theme */ .data.post__data, .shareButtons { display: none !important; } .contact-form-name{ width:100%; padding: 6px; } .contact-form-email{ width:100%; padding: 6px; } .contact-form-email-message{ width:100%; padding: 6px; } .contact-form-button, .contact-form-button-submit{ width:100%; padding: 10px; border: 0px; font-size: 18px; font-weight: bold; /* change color to #000000 if the button is if the button is light coloured */ color: #ffffff; /* set the color to match the main theme color */ background-color: #0076a1; letter-spacing: 0.1em; } .contact-form-button:hover, .contact-form-button-submit:hover{ width:100%; padding: 10px; border: 0px; font-size: 18px; font-weight: bold; /* change color to #000000 if the button is if the button is light coloured */ color: #ffffff; /* choose a lighter shade of the color - https://www.w3schools.com/colors/colors_picker.asp */ background-color: #0083b3; letter-spacing: 0.1em; } </style>
Photo by Markus Winkler on Unsplash
Comments
Post a Comment