Adding Contact form within Blogger Contact Page

Let me be quick on this one :
This is 2 step process I am using Contempo template but things are pretty same for any blogger theme.

1. Getting the contact form widget: Add a contact form gadget to sidebar from layout section to get the contact form and then hide it from sidebar by using CSS: style="Display:None;" To do that jump to Contact form widget from Theme>> HTML Editor>>contact form widget and expand  <b:includable id='content'> Find this: <div class='contact-form-widget'> and replace it with this:
 <div class='contact-form-widget' style='display:none!important'>
2. Moving the contact form to Page: Create a new contact page from pages section switch to HTML editor add the following html between the div tags already present there and publish it.
   Note: Below code is coming from expanded content section of contact form widget from theme editor so in case you are facing some issues that's the place you should be looking into .

<div class="contact-form-widget">
<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="" />
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="" />
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="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; 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>

This will also contain the title of the widget which you cannot set to NULL or empty from layout from widget settings so to hide the name of the contact form widget from Contact page:

• Goto Theme>>HTML editor >>Jump to contact form widget and remove or just comment the part which says <b:include name='widget-title'/> like shown below:

<b:widget id="ContactForm1" locked="false" title="Contact Form" type="ContactForm" version="2" visible="true">
  <b:includable id="main">
  <!--<b:include name='widget-title'/>-->
  <b:include name="content">
</b:include></b:includable></b:widget>

Add some CSS to make it look pretty, leaving that upto you, thanks.

Here is the Css used on TCBIN just in case you need it:

.contact-form-name, .contact-form-email, .contact-form-email-message{
 width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
.contact-form-button, .contact-form-button-submit{
background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.contact-form-button:hover, .contact-form-button-submit:hover{
background-color: #45a049;
}
.contact-form-error-message-with-border{position: absolute;
}