Responsive Static Contact Page For Blogger

Responsive Static Contact Page For Blogger

The official version of the Contact Form Widget has been launched by Blogger, but can only be added on the sidebar.
In this tutorial I will show you how to create an external contact page with your contact form showing up statically on that specific page.

Livoxt Contact Page

Step 1:

Open your Notepad and then Minimize

Step 2:

Open your Blogger Page

Step 3:

Copy your Blog Id as shown in your google search bar, by highlighting and pressing "Ctrl + C" and then Minimize.

Step 4:

Maximize your Notepad and paste your code "Ctrl + V" and then Minimize.

Step 5:

Copy the code below by highliting and pressing "Ctrl + C"

<script>

var blogId = '625367430532119763';//this number should be manually edited.

//The 5 String messages below 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>

Step 6:

Maximize your Blogger Page and navigate to your pages menu

Step 7:

Add a New Page with a Page Title for example: "Contact Page" and Customize as you prefer.

Step 8:

After Customisation, Press Html View

Step 9:

Paste the code and navigate to the top of the code to the Blog ID and Highlight the ID

Step 10:

Maximize your Notepad and Copy your unique Blog ID "Ctrl C"

Step 11:

Maximize your Blogger Page, make sure the ID is highlighted, the paste your code by pressing "Ctrl + V"

Step 12:

Disable the Reader Comments on the right navigation menu. And Press Done.