How to create a Contact Us Form on Blogspot

One of the widgets that I think is very important is the contact form (contact me) on the static page of Blogger. I do not feel comfortable when I have to spread private numbers in public places.

That’s why you choose this widget because the message goes to the email. Potential customers can contact me directly without knowing my number. Unless they ask for a new number I give it.

With this widget, visitors who intend to invite cooperation become easy to contact. If your hiring services agree with the experience, content placement, place banner ads, writing reviews, etc. I am very well helped by this contact form widget because it facilitates the business.

Watch? The offer was naturally coming. Potential customers can flee, you know, if you have trouble finding a contact or a place that can be used to contact you.

How to create a “Contact me” form on the BlogSpot page

Enter the Blogger panel and go to the HTML settings by accessing the menu theme »Edit HTML. Add the following code “Before / Top” </ Head>.

<b:if cond='data:view.isPage'><style>

/* Contact Form by xandertech.com.ng*/

#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial}

</style></b:if>

Save first so the code works. Click the button to save the theme.

https://www.blogger.com/blogger.g?blogID=8199515440000000000#editor/target=page;pageID=xxxx

8199515440000000000your blog ID. Save it first because it will be used later.

<form id="kontak" name="contact-form">

  <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />

  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Massage" rows="5"></textarea>

  <input id="ContactForm1_contact-form-submit" type="button" value="Send"/>

  <div style="max-width: 222px; text-align: center; width: 100%;">

    <div id="ContactForm1_contact-form-error-message"></div>

    <div id="ContactForm1_contact-form-success-message"></div>

  </div>

</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>

<script>//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8199515440000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8199515440000000000','//www.xandertech.com.ng/','8199515440000000000');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8199515440000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]></script>

Replace some of the codes below with your own.

When finished changing, click the  Publish button.