Google blogger 博客上添加Contact Form

我们都知道用户有需要和站长联系，通常使用邮箱，那么如何添加Contact form ?本文将使用一种不同于Google blogger 内嵌组件方式实现。

Google blogger 有内置的Contact form

google blogger 内置的组需要使用的只能以组件方式添加，如果需要在特定页面展示的话，需要修改代码。很是复杂，针对不同模板。

基于此，用一种在所有博客上通用的添加方式。

将表单添加到您的 Blogger 网站

登录您的 Blogger 帐户并转到您网站的仪表板。
导航到您想要添加联系表单或创建新页面的页面。
在 Blogger 编辑器中，切换到 HTML 模式。
复制以下 HTML 代码并将其粘贴到 HTML 编辑器中

 <div class="my-contact-form">
   <form
     action="https://formsubmit.co/[email protected]"
     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>

请将[email protected] 替换为您的邮箱地址。并将 https://www.blogbrackets.com/p/thank-you.html 中的网址替换为您的页面网址。下面我告诉您如何创建此页面。

添加修饰CSS

 <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>

现在创建一个“thank you”页面

我知道你没明白我的意思。只需按照以下步骤操作即可。

现在创建一个新页面并命名为“谢谢”。
之后复制下面的 HTML 和 CSS 并将其粘贴到代码编辑器中。
现在，发布此页面。
复制此页面 URL 并将其粘贴到我之前给您的 HTML 代码中。

 <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>