1. Browse www.blogger.com/www.blogspot.com In Any Supported Browser.
First of all, you need a supported browser to browse Blogger's homepage and signing to your blog.
Remember, your browser must be supported like Google Chrome or Mozilla Firefox to browse comfortably and also wait until the page lodes completely.
2. Sign In With Your Blogger Account.
Now, click on sign in button, add your blogger connected Google account there and now, you have full access to your blog. If you don't have any blog or website still now, see the below tutorial about:
HOW TO CREATE A FREE WEBSITE AND EARN MONEY
3. Select Pages And Add A New Page.
To add a new professional contact form in a page, you need to create a separate page for that. You can give it a title "Contact Us" or "Contact Me" and follow the below steps to go ahead.
4. Click On HTML And Paste The Below Code.
While pasting codes, you must know your Blog ID. Don't worry, you don't have to create a new one, it is already on your blogger blog. You can see clearly in the below photo. It is in your blogger url while editing.
Like : https://www.blogger.com/blog/2018/06/BlogID=9272725272899?XXXXX_XXXXX
where 9272725272899 is your blog ID.
Code:
<script> var blogId = 'Your Blog ID';//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> <br />
<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="" /> <br />
<div>
Your Email: <i>(required)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br />
<div>
Your Message: <i>(required)</i></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /> <br />
<div style="max-width: 450px; 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>
Simply, copy above code to your clipboard and paste in that page , you have created. Must remember that you have to switch from compose to html before pasting those codes. After pasting codes, to check it, click on compose, you will find a better preview. After pasting codes, see below steps.
5. Click On Publish And All Done!
After these all, now it's time to share your contact form to your blog So click on publish, place your link in different parts of your blog and all is done.
By following these processes , you can be able to add a contact form in a separate page of your Blogger/Blogspot Blog. If you have any problem, feel free to comment below. Share this post if you like and follow us for more new posts.