2013 June 17 Archive - EXEIdeas – Let's Your Mind Rock

Previously I posted a post about The New Blogger Contact Form and described there the list of features why to use this form instead of third parties and what are the main function and limitation of this foirm with awesome features. After that I also shared a blog post about Custom CSS Of Blogger Contact Form because the official look is so simple. But not many readers are asking about “How To add It In Post/Page?” so here I described how to put the contact form into specific page.Here is tutorial how to add blogger official contact form into specific page in blogger blog. A contact form is one of the most important element of a blog. Contact form allows people to say you “Hi”, “Invite you to their blogs”, “Share their views on your blog and posts”, “Give suggestions for improvement of your blog”, “Guest posting”, “Advertising”, etc. Contact forms are really important for a blog. So does your blog has a contact form? If no, let me help you to add a simple and fast contact form in your blog.Contact form is for contractual use.It’s very useful for those who are using third party forms because they now use it free and without ads showing. It’s also comfortable and good viewable in mobile devices also. It’s with error detection so if anyone enter bad email then it’ll not going to submit #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) Pure HTML-CSS Code.2.) Easy To Add And Quick To Load.3.) Simple But Awesome Design.4.) Completely Customizable Code.5.) Changeable Code Values.6.) CSS3 Shades Effect Added.7.) OnClick Enable Shades On Input/Textarea.8.) Font Style Changed.9.) You Can Use This In Post Or Page And HTML/JavaScript Widget Also.10.) Full New Submit Button With Hover Effect Added.11.) Button Will Be Hidden While Sending Message. (Extra Feature Added)12.) Colourful Success And Error Notice CSS Added.13.) Awesome Success Text DIV Added With Related Image.14.) Also Added Awesome Error Text With Related Image.15.) More Codes Can Be Added Easily.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To “Layout“.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Click On The “More Gadgets” Tab On The Left.6.) Than Move On “Contact Form” Gadget.7.) Click “+” Icon To Add It.8.) Give The Title.9.) Click “Save,”.10.) Now Go To “Template” On The Left.11.) Click “Edit HTML“.12.) Now Click Within Code Box.13.) Press [CTRL+F] To Search ]]> Code.14.) Now Copy The Below Code And Paste It Before ]]> Code.#ContactForm1{display: none ! important;}15.) Click “Save Template“.16.) Now Go To “Posts” Or “Page” On The Left.17.) Create A “New Post“, “New Page” Or “Edit” Some One Existing.18.) Click “HTML” Tab In The Post Editor Just Beside “Compose” Tab.19.) Now Copy The Below Code And Paste It There. .form{font-family: Arial; text-shadow: 0 1px 0 white; font-size: 18px;}input.exe-contact-form-name:focus, input.exe-contact-form-email:focus, textarea.exe-contact-form-email-message:focus {-webkit-box-shadow: 0 0 5px 2px #dcdcdc;-moz-box-shadow: 0 0 5px 2px #dcdcdc;box-shadow: 0 0 5px 2px #dcdcdc;}input.exe-contact-form-name, input.exe-contact-form-email, textarea.exe-contact-form-email-message {-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}input.exe-contact-form-name, input.exe-contact-form-email, textarea.exe-contact-form-email-message {background-color:#fff;border:1px solid #dfdfdf;color:#000;}input.exe-contact-form-name, input.exe-contact-form-email, textarea.exe-contact-form-email-message {width:100%;padding:5px;font-size:1.5em;}:focus {outline:0;}.contact-form-button-submit {-moz-box-shadow:inset 0px 1px 0px 1px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 1px #ffffff;box-shadow:inset 0px 1px 0px 1px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ededed&#39;, endColorstr=&#39;#dfdfdf&#39;);background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;font-family:Trebuchet MS;font-size:35px;font-weight:bold;padding:10px 20px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;height: 50px;line-height: 30px;margin-left: 10px;min-width: 54px;text-align: center;}.contact-form-button-submit:hover {border:1px solid #dcdcdc; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#dfdfdf&#39;, endColorstr=&#39;#ededed&#39;); background-color:#dfdfdf;color:#777777;}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{display:none}.contact-form-error-message-with-border {background: url('https://lh3.googleusercontent.com/-NZm0kVQiJH4/UU6B2cln7PI/AAAAAAAAFXE/FwgkZYCMyP8/s32/error.png') no-repeat #FBE3E4 15px 18px; padding: 1em; padding-left: 3.5em; border: 2px solid #FBC2C4;bottom: 0;box-shadow: 0 2px 4px rgba(0,0,0,.2);color: #D12F19;font-size: 24px;font-weight: bold;line-height: 19px;margin-left: 0;opacity: 1;position: static;text-align: center;}.contact-form-success-message-with-border {background: url('https://lh3.googleusercontent.com/-VkVq2x3YLqA/UU6B2YgTVCI/AAAAAAAAFXI/Byko5Js7peU/s32/success.png') no-repeat #E6EFC2 15px 18px; padding: 1em; padding-left: 3.5em;border: 2px solid #C6D880;bottom: 0;box-shadow: 0 2px 4px rgba(0,0,0,.2);color: #529214;font-size: 24px;font-weight: bold;line-height: 19px;margin-left: 0;opacity: 1;position: static;text-align: center;} If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Rules: 1.) Please Use English For Your Message Otherwise We Can&#39;t Answer Your Question. 2.) HTML Tags Will Not Be Accepted. 3.) Don&#39;t Spam Or Advertise Your Self In Message. 4.) Please Add Working E-Mail So We Can Reply You Quickly. 5.) Please Fill Your Form Correctly Otherwise We Can Not Reply You Back.

Name: *

Email: *

Message: *

20.) Click “Publish” Or “Update” To Done.Customization:1.) Change All Red Text With Your Desired Rules2.) Don’t Change Any More Because It’s Official Code.3.) Now Done.Last Words:So that how you can add an contact us form in Blogger.To make it more appealing you can add contact us in your navigation bar so people can easily send you their queries.If you feel any difficulty feel free to ask