How to make your Blog Professional with “Contact Form widget”

Published by kelvin Ehiozefe on

The appearance of your blog/ website surely determines the kind of attention people will attribute to it. Starting from the kind of theme or blog design you use along with the pages will determine the credibility of your blog.

Now when we talk about blog credibility we want you to understand that when visitor land their search on your blog/ website the first thing that caught their attention is the design/ layout of your site and the content within the pages of your site. Adding the contact form widget to your blog/ website is one way to improve the credibility of your blog.

contact form infoexposure.com

How to add contact form widget to BLOGGER?

·
Sign in to your blogger account and navigate to your website/ blog

·
On the left side bar click on Pages and click on create new page and add the following code (don’t forget to change your input style to HTML before adding the code)

<script>

var blogId = ‘8694494030520005341’; //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>

<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>

Customization

‘8694494030520005341’;                 Replace with your blogID (your BlogiD is the number that is attached

                                                                     with blog URL when you open it in abrowser)

Delete these two messages;            //this number should be mandatorily edited.

                    //The below message 5 Strings can also be edited

Note; this contact form widget will deliver all mails sent directly to the Gmail account you used in creating
your blog which appears as your admin mail. But if you want to receive you mails on a separate mail box or with your webmail then you may use any of these platforms. They are free and easy to set up;

KONTACTR

Kontactr

 

Kontactr is a one-click free contact form service which allows you create highly customize-able contact forms on the fly.

How to create contact form with Kontactr?

Step 1; Go to kontactr form site or click here

Step 2; sign-up with kontactr form

Step 3; fill in the required information (Name, Username, Email address and Password)

Step 4; validate your email address

Step 5; sign in and a contact form is created

Step 6; copy the code to embed your contact form widget

Step 7; Go to Blogger create new page (in html) and add code.

Note; when choosing a username bear in mind that a hosted version of your contact form will be made available in the format: kontactr.com/user/yourusername. Also only one contact form can be created for one email address.

FOXYFORM

contactform2

Foxyform contact form service is one of the most easiest and straight to the point contact form service to use on your website with anti-spam protection. No sign-up required..!!

How do I create contact form with Foxyform?

Step 1; Go to foxyform.com

Step 2; select all what you want or how you want your contact to appear as well as the email you want receive all your mails.

Step 3; finally click on create formula button, copy code and add to your contact us page on Blogger.

Step 4; Save and publish

The contact form widget makes your blog more professional and more convenient for users of your site to reach you.

If you have any question please contact me or leave a comment in the comment area. You may also share this post with friends on social media

Categories: Blog Business

Leave a Reply

Your email address will not be published. Required fields are marked *

Do NOT follow this link or you will be banned from the site!
error: Content is protected !!
%d bloggers like this: