Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Free Contact Form code For Blogger


are Looking for free contact form code for blogger like this? if so just follow this step by step tutorial.

     

    contact form code
     


     Follow the below steps to create a free Contact Form Code For Blogger to a separate page. If you would like to see a demo, you can check out my Demo.



    1.First go to Lyout



    remove-contact-form-gadget-from-sidebar




    2.Now find out the unique Blogid of your blog. Where can i find blogID? on the URL bar of your browser when you are on any page on your blog’s dashboard. This blogID is required to generate the code for the new Contact Form page. 

    The below screenshot explains how you can find out the blogId. Find this number and note it down. This number will be needed to generate code for the contact form.  




    Blogger blogID






     3.Now create a new page in your blog 



    create new page in blogger



    Copy and edit the below the free contact form code snippet . Editing the blogId number is mandatory(Use the number which you noted down in step 2)




    var blogId = '8123020903950952473';//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;
    }


    Your Name :


    Your Email: (required)


    Your Message: (required)











    While creating the Page, you have to switch to the HTML mode as shown in the image below. Then paste the above contact form code into the post editor(after proper editing), disable the comments and publish your page.





    blogger-comment-form-contact-form-code



    Once the page is published, go to this new page fill out the contact form, click on the send button and verify that it sends out the email to yours.






    I hope that you have enjoyed 'Free Contact Form code For Bogger ' tutorial . Dont forget to share my post. You can use Social Sharing Widget provided at the end of every post. After all, Sharing is Caring!




    This post first appeared on All Tech - All The Time, please read the originial post: here

    Share the post

    Free Contact Form code For Blogger

    ×

    Subscribe to All Tech - All The Time

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×