How to Create a Contact Page, How to Add a Contact Service, Create a Contact Page on a Blogger Static Page, Create a Contact Page on Blogspot, Create a Contact Form on Blogger,
This Contact page functions to send text messages which will be automatically sent to the blog owner's email. This Contact Page can also be used to keep your blog up to date and can be used as a redirected page when there is a broken link on the blog. I previously discussed How to redirect the Page Not Found to another page.
When a visitor finds a missing article, it will automatically be redirected to the 404 Error page. Well... on this 404 error page you can redirect it back to the contact page. so visitors can contact the blog admin when the article they are looking for cannot be found.
This Contact page is very practical so that visitors who want to contact the admin can immediately send messages without having to open an email account first
How to Create a Contact Page on Blogger
- First if all, go to the Blogger dashboard page
- Then select the "Pages" menu
- Then click "New Page"
- Then select "HTML" mode and enter the code below
- The last step, click "Publish" then see the results
Please fill in the form below to contact the admin. If there are no obstacles and other activities, the admin will immediately respond to the message you sent. <form id="kontak-arlina" name="contact-form"> Name <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> Email Address <span style="border:1px solid;color:#f14b4b;display:inline-block;font-size:x-small;font-weight:300;line-height:normal;margin:0 0 0 10px;padding:2px 6px;border-radius:2px;vertical-align:middle;">required</span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Content <span style="border:1px solid;color:#f14b4b;display:inline-block;font-size:x-small;font-weight:300;line-height:normal;margin:0 0 0 10px;padding:2px 6px;border-radius:2px;vertical-align:middle;">required</span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} form {color:#666;} #kontak-arlina{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);border-radius:3px;resize:none;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(0,0,0,.24);} #ContactForm1_contact-form-submit{float:left;background:#222;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#f14b4b;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} .post-body input {width:initial;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
Creating this Contact Page is actually really easy. In order for this contact page to be used, you must install a contact form widget on your blog. This contact form widget or gadget has been provided by blogger. you just need to add it to your blog layout.
That's all about How to Create a Contact Page on Blogger, hopefully it's useful. thank you and good luck,