How to Add Contact Form in Blogger (Create Separate Contact Page in Blogger)
Blogger contact shape widget works handiest on the blogger sidebar. if you want to feature the contact form to the sidebar, prevent studying and refer this tutorial – touch shape widget for blogger sidebar contact form widget for blogger sidebar. In case you don’t need to feature the contact shape on your blog’s sidebar, however, want it to appear on a selected web page, then this educational will assist you out. I didn’t want the contact shape to seem everywhere on my weblog. So I’ve moved it to a separate contact me page
Create Contact Form in Blogger
How to move the blogger touch shape to a separate web page
observe the beneath steps to transport the contact form to a separate web page. In case you would like to look for a demo, you could take a look at out my touch web page.
Step 1:
Add contact form on your blog sidebar and take a look at it. make sure which you are receiving emails on your inbox whilst you click the ship button.
Now remove the form gadget from your sidebar. You could do that on the layout web page.
Step 2:
Now discover the particular blogid of your blog. Whilst can find this blogid at the URL bar of your browser when you are on any web page to your weblog’s dashboard. This blogid is required to generate the code for the brand new contact shape web page. The underneath screenshot explains how you may discover the blogid. find this quantity and word it down.
Step 3:
Now create a new web page on your weblog
Step 4:
Reproduction and edit the code snippet. You can use the wide variety that you mentioned down in step 2.
Code to Copy: and change the red color id with your blogid
Contact Form in Blogger HTML Code
<script>var blogId = ‘8694494030520005341‘;//this number should be mandatorily edited.//The below message 5 Strings can also be editedvar 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 5:
Whilst developing the page, you need to transfer to the HTML mode as proven within the photo below. Then paste the above code into the submit editor(after proper modifying), disable the comments and publish your page.
Once the web page is posted, visit this new page fill out the contact shape, click on the send button and affirm that it sends out the e-mail to all the weblog admins.
