Moving the contact form to a page

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