{"id":10845,"date":"2025-06-19T12:33:02","date_gmt":"2025-06-19T07:03:02","guid":{"rendered":"https:\/\/veewom.com\/articles\/?p=10845"},"modified":"2025-06-19T12:34:38","modified_gmt":"2025-06-19T07:04:38","slug":"add-contact-form-blogger-page","status":"publish","type":"post","link":"https:\/\/veewom.com\/articles\/add-contact-form-blogger-page.htm","title":{"rendered":"How To Add a Contact Form on a Blogger Page"},"content":{"rendered":"<p>Hey friend&#8217;s welcome to veewom ,in this article i will teach you how to add contact form on a blogger page ,so first of all directly is not possible to add contact form to blogger page so please first watch below video and follow all step.<\/p>\n<h2>Watch a Video<\/h2>\n<h2><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/mDL668sLPC8\" width=\"100%\" height=\"350\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/h2>\n<p>Now, visit your Customize &gt; Edit HTML page,Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type ]]&gt; and pasting this code directly before it.<\/p>\n<pre><code class=\"css\">\r\n.contact-form-widget {\r\nmargin-left:auto;\r\nmargin-right:auto;\r\nwidth: 600px;\r\nmax-width: 100%;\r\npadding: 0px;\r\ncolor: #000;\r\n}\r\n.fm_name, .fm_email {\r\nfloat:left;\r\npadding:5px;\r\nwidth:48%\r\n}\r\n.fm_message {\r\npadding:5px;\r\n}\r\n.contact-form-name, .contact-form-email {\r\nwidth: 100%;\r\nmax-width: 100%;\r\nmargin-bottom: 10px;\r\nheight:40px;\r\npadding:10px;\r\nfont-size:16px;\r\n}\r\n.contact-form-email-message {\r\nwidth:100%;\r\nmax-width: 100%;\r\nheight:100px;\r\nmargin-bottom:10px;\r\npadding:10px;\r\nfont-size:16px;\r\n}\r\n.contact-form-button-submit {\r\nborder-color: #C1C1C1;\r\nbackground: #E3E3E3;\r\ncolor: #585858;\r\nwidth: 20%;\r\nmax-width: 20%;\r\nmargin-bottom: 10px;\r\nheight:30px;\r\nfont-size:16px;\r\n}\r\n.contact-form-button-submit:hover{\r\nbackground: #ffffff;\r\ncolor: #000000;\r\nborder: 1px solid #FAFAFA;\r\n}\r\n<\/code><\/pre>\n<p>Save the template then go to Pages to create a new Contact page if you haven\u2019t got one already. In the page editor, switch to HTML mode and paste the following<\/p>\n<pre><code class=\"html\">\r\n&lt;div class=\"widget ContactForm\" id=\"ContactForm1\"&gt;\r\n&lt;div class=\"contact-form-widget\"&gt;\r\n&lt;div class=\"form\"&gt;\r\n&lt;form name=\"contact-form\"&gt;\r\n&lt;div class=\"fm_name\"&gt;\r\nYour Name:\r\n&lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"name\" size=\"30\" type=\"text\" value=\"\" \/&gt;&lt;\/div&gt;\r\n&lt;div class=\"fm_email\"&gt;\r\nE-mail Address *:\r\n&lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"email\" size=\"30\" type=\"text\" value=\"\" \/&gt;&lt;\/div&gt;\r\n&lt;div style=\"clear:both\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"fm_message\"&gt;\r\nMessage *:\r\n&lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"email-message\" rows=\"5\"&gt;&lt;\/textarea&gt;\r\n&lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"Submit\" \/&gt;\r\n&lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/form&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>We hope this article helped you learn how to easily add contact form on blogger page. You may also want to see &#8211; <a href=\"https:\/\/veewom.com\/articles\/how-to-change-default-wordpress-email-address.htm\" target=\"_blank\" rel=\"noopener\">How To Change The Default WordPress Email Address<\/a>.<\/p>\n<p>If you liked this article, then please share to social networking site. You can also find us on <a href=\"https:\/\/twitter.com\/veewom\" target=\"_blank\" rel=\"noopener\">Twitter<\/a>,<a href=\"https:\/\/www.facebook.com\/veewom\" target=\"_blank\" rel=\"noopener\">Facebook<\/a> and <a href=\"https:\/\/www.instagram.com\/veewom\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey friend&#8217;s welcome to veewom ,in this article i will teach you how to add contact form on a blogger page ,so first of all directly is not possible to add contact form to blogger page so please first watch below video and follow all step. Watch a Video Now, visit your Customize &gt; Edit &hellip; <a href=\"https:\/\/veewom.com\/articles\/add-contact-form-blogger-page.htm\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How To Add a Contact Form on a Blogger Page&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11060,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[198,196,197],"class_list":["post-10845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogger","tag-contact-form","tag-how-to-add-a-contact-form-in-blogger","tag-how-to-add-contact-form-in-blogger-page"],"featured_image_src":"https:\/\/veewom.com\/articles\/wp-content\/uploads\/2017\/10\/blogger.png","author_info":{"display_name":"Editorial Staff","author_link":"https:\/\/veewom.com\/articles\/author\/admin"},"_links":{"self":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/10845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/comments?post=10845"}],"version-history":[{"count":1,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/10845\/revisions"}],"predecessor-version":[{"id":12608,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/10845\/revisions\/12608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media\/11060"}],"wp:attachment":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media?parent=10845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/categories?post=10845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/tags?post=10845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}