How To Create Contact Us Form In Separate Page

Contact-Us-Page-Form

It’s a frustrating job after I try and add contact type in my blogger contact United States of America page. Since, by default blogger solely provides a contraption to feature contact type in your facet bar so you would like some cryptography techniques to feature it within your contact United States of America page. but you'll be able to realize those cryptography by looking on web except for Maine the matter arises once my submit button wasn't operating. All of my fields ar operating fine except submit button. it had been the foremost frustrating time that I had ever faced . I worked for two hours to feature that contact type in an exceedingly page however finally the result was noting. finally i believed of adding my very own contact type rather than victimisation blogger’s type and so I found some way to feature an ideal operating blogger contact type in-tuned United States of America page.

1. How To Add Contact Form In Website.

Before starting the work you must logged in to your blogger dashboard and lets start the work

1. Click on Layout in Blogger
2. click Add a Gadget where you want to add your contact form
3. Now new blogger gadgets window is open and click on "More Gadgets" and click contact form and than choose the display name and click save
4. now view your blog and see your contact form and test your contact form!

2. How To Create Contact Us Form In Separate Page.

Step 1: copy the given code

<script>
var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

Step 2: Create a new page and given it a name "Contact Us"

Step 3: click HTML section of the page and paste the copied code

Step 4: Now publish the page and view you dynamic separate Contact us page.

Customizing the Contact Us Form:

Step 1 : login to you blogger dashboard 

Step 2 : Click Template >> Customize >> Advanced

Step 3: In Advanced Tab click "Add CSS script"

Step 4: Now Copy the given below script and paste it in css box and click apply

 /* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Step 5 : Now view you blog and see the new look of your "Contact Us" Form.