Skip to main content

Add Blogger Contact Form in Contact Us page

contact form
Each professional blogger must have its contact us page. Don’t worry if you don’t have it. Here are the details on how to add a contact form to your Blog. Blogger has its own contact form widget. You can customize it to a page very easily follow the steps:

1. Goto your blog to Layout Add a Gadget Name contact form:

ad contact us form to blogger

2. Add the below CSS before the </b: skin>  tag in your blog template: 

Style sheet codding : .contact-form-widget { width: 500px; max-width: 100%; margin: 0 auto; padding: 10px; background: #F8F8F8; color: #000; border: 1px solid #C1C1C1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); border-radius: 10px; } .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } .contact-form-button-submit { border-color: #C1C1C1; background: #E3E3E3; color: #585858; width: 20%; max-width: 20%; margin-bottom: 10px; } .contact-form-button-submit:hover{ background: #4C8EF9; color: #ffffff; border: 1px solid #FAFAFA; }

3. Goto template and choose Jump to widget and select ContactForm1, and
Remove all data between widget 

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> <b:includable id='main'> ………………………………..delete all data</b:includable> </b:widget>
4. Now Goto Pages add New page select HTML and past the below code:
Note:Replace Blog-Id with your blog ID

add a contact us page

<script>var blogId = ‘8911313474536XXXXXThe below message 5 Strings can also be editedvar 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><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /><div style="max-width: 450px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form>

5. Your contact us page will look like as follow:
contact us page sample

Image copyright: Blogger.com

Comments

Popular posts from this blog

Join the Beauty Course for Massage Beauty License Training

Massage Beauty School of California: Massage beauty program is one of the top ten beauty courses which are well recognized and sought after in the beauty sector. Several students from various cities and states enroll in this training program to get better learning opportunities and understand the minute technicalities of beauty massaging services. Certified schools and beauty institutes located in Los Angeles are offering cutting-edge training to the students who are eligible for the program. Palace Beauty College is an accredited beauty school that does offer a massage therapy program and also offers holistic learning facilities to the students. The college has years of experience in providing massage therapy license training in Los Angeles for more than half a decade now. The college maintains its official website to reach out to distant students and provide them relevant information related to the available beauty courses. The college takes pride in its impressive infrastru...

Having issue with MDaemon Outlook Connector to connect MDaemon data with Outlook

Migration from MDaemon to Outlook is the right way to access MDaemon data in Outlook by using Outlook Connector Migration from MDaemon to Outlook Without Outlook Connector Migration from MDaemon to Outlook Overview: MDaemon Mail Server provides Outlook Connector for MDaemon which let you view and open MDaemon data with Outlook. Using Outlook Connector users will be able to view MDaemon Mail and contacts in Outlook. But if have you deleted any file from MDaemon then it will also missing from Outlook as well.   The way MDaemon Outlook Connector works is by keeping a locally cached copy file of the mail body in a database and the attach   files as a separate file. This is completely different from Microsoft Outlook Exchange caching where everything is kept in one OST file. The problem with this is it takes around 30 minutes to open Outlook (from a cold boot) which is quite unacceptable!! Sometimes users couldn’t able to send and receive email while using Ou...

5 Best Foods for Stronger Bones

5 Best Foods for Stronger Bones: We are as strong as our bones. So its very good to make as food which make our bone more stronger. Our diet plays very important role to make stronger from inside. List of foods which make their bone stronger Vegetables (especially leafy greens, and also roots and stalks)  Protein ( beans, and soy foods)  Whole grains  Foods rich in trace minerals ( nuts, and seeds)  Healthy fats  Vegetables : Vegetables are full of different types of vitamins. The iron and calcium,magnesium, potassium, iron, and other minerals  Vitamins K and C  Full of protein  Help deposit the collagen matrix  Protein Foods  Beans and Soya is best example of protein food.  Whole Grains Whole grain is full of magnesium. Excellent sources of complex carbohydrates, fiber, and B vitamins. Brown rice  Whole wheat  Barley  Oats  Rye  Millet  Cornmeal  Amaranth  ...