How to create a Contact Us Form on Blogspot

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.

With this widget, visitors who intend to invite cooperation become easy to contact. If your hiring services agree with te 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 buttonSave theme.

Time to create a contact form widget on a static page Blogger page . Go to the menu Pagesand then click the buttonNew 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.

 

Check Out  10 Tips for Choosing a Good Hosting for Personal Blog 2021
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.

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.