BloggerHow to Create a Contact Page in Your Blogger Website
Add the form to your Blogger website
- Log in to your Blogger account and go to your website's dashboard.
- Navigate to the page where you want to add the contact form or create a new page.
- In the Blogger editor, switch to the HTML mode.
- Copy the below HTML code and paste it into the HTML editor.
<div class="my-contact-form"> <form action="https://formsubmit.co/youremail@email.com" method="POST" id="contact-form" > <div> <label class="my-contact-form-label" for="name">Name:</label> <input class="my-contact-form-input" type="text" id="name" name="name" required /> </div> <div> <label class="my-contact-form-label" for="email">Email:</label> <input class="my-contact-form-input" type="email" id="email" name="email" required /> </div> <div> <label class="my-contact-form-label" for="message">Message:</label> <textarea class="my-contact-form-input" id="message" name="message" required></textarea> </div> <input type="hidden" name="_captcha" value="false" /> <input type="hidden" name="_template" value="table" /> <input type="hidden" name="_next" value="https://www.blogbrackets.com/p/thank-you.html" /> <button class="my-contact-form-btn" type="submit">Send</button> </form> </div>
Copy this CSS and Paste it below the HTML
Please repalce this email youremail@email.com with your email. And https://www.blogbrackets.com/p/thank-you.html change this url with your page url. Below I have told you how to create this page.
<style>.my-contact-form{ display: flex; align-items: center; justify-content: center; width: 100%; } .my-contact-form form{ width: 100% } .my-contact-form-label{ display: block; font-weight: 600; font-size: 16px; color: #07074d; margin: 12px 0; } .my-contact-form-input{ width: 100%; padding: 12px 0px !important; text-indent: 10px !important; border-radius: 6px !important; border: 1px solid #e0e0e0 !important; background: white !important; font-weight: 500 !important; font-size: 16px !important; color: #6b7280 !important; outline: none !important; resize: none !important; } .my-contact-form-input:focus{ border-color: #6a64f1 !important; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important; } .my-contact-form-btn { text-align: center; font-size: 16px; border-radius: 6px; padding: 14px 32px; border: none; font-weight: 600; background-color: #6a64f1; color: white; width: 100%; cursor: pointer; margin-top: 12px; } .my-contact-form-btn:hover { box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); }</style>
Now create a Thank You! Page
I know you did not get my point. Just follow these step.
- Now create a new page and give the title "Thank You".
- After that copy these below HTML and CSS and paste it inside code editor.
- Now, pubslish this page.
- Copy this page URL and paste it inside the previous HTML code which I give you erlier.
<div class="content"> <div class="wrapper-1"> <div class="wrapper-2"> <h2 class="thank-you">Thank you !</h2> <p>Thanks for email us.<br> We will reply you very soon.</p> <a class="button" href="YOUR BLOG URL HERE">Go To Home</a> </div> </div> </div>
<style>@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap'); .pTtl{ display:none; } .wrapper-1{ width:100%; height:100vh; display: flex; flex-direction: column; border-radius: 15px; } .wrapper-2{ padding :30px; text-align:center; } .thank-you{ font-family: 'Kaushan Script', cursive !important; font-size:4em; letter-spacing:3px; color:#5892FF ; margin:0 !important; margin-bottom:20px; } @media (min-width:600px){ .content{ max-width:1000px; margin:0 auto; } .wrapper-1{ height: initial; max-width:620px; margin:0 auto; margin-top:50px; box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2); } }</style>