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.

Time to create a contact form widget on a static page Blogger page. Go to the menu Pages and then click the button new page. Give any title freely, your like. Make sure to select a mode HTML(not Compose).
Pay attention to open URLs. There the format is more or less like this:
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.

Copy all the following code into a text editor.
<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.

Also Read:  How to get a Virtual dollar card in Nigeria and Foreign Bank account
No. Value Information
1 Name
Email
Massage
Writing on the form.
2 Send Post on the submit button.
3 8199515440000000000 Blog ID. There are 4 times writing
4 www.xandertech.com.ng Blog address without http / https.

When finished changing, click the  Publish button.

Okay, enough of the tutorial to create a contact us form widget on this Blogger page. Hopefully, prospective clients are not confused anymore when they want to contact you.

Subscribe Now

Get a variety of tutorial articles, interesting insights and tips about the online world directly through your email. Subscribe now and be successful with us!
I am Omotunmihse Temitope (Xander), A Contents Writer, Web and Graphic designer, and A pro blogger who has a passion for blogging and has taken blogging as part of my daily activities.
en_USEnglish