使用 HTML 和 CSS 设计一个联系我们页面

在网站上没有联系表单确实没有意义，就像没有面包的汉堡一样。如果您的业务在线上开展，您必须拥有客户与您联系的方法。“联系我们”表单是一种在线表单，网站用户可以使用它向网站所有者或运营商提交消息或请求。它为客户提供了一种简单的方法来联系公司、组织或运营网站的个人，而无需使用电话或电子邮件等联系方式。

当用户完成并提交表单时，数据通常会转发到收件人指定的电子邮件地址或保存在数据库中以供进一步使用。通过这种方式，企业和组织可以更有效、更有条理地处理客户查询、反馈、支持请求和其他形式的联系。

由于“联系我们”表单不涉及使用电子邮件客户端，提供了一种有条理的与用户沟通方法，并且全天候可用，因此它们经常受到用户的青睐。此外，它们还允许公司收集有见地的客户信息和反馈以供审查和改进。让我们深入了解本文，学习如何使用 HTML 和 CSS 创建联系我们页面。

示例

让我们看看下面的例子，我们将设计一个在网页上的联系我们表单。让我们一步一步地完成它。

HTML

以下是用于设计表单结构的 HTML 代码。

<!DOCTYPE html>
<html>
<body>
   <div>
      <form class="tutorial">
         <div class="pageTitle title">Contact Us</div>
         <div class="secondaryTitle title">We'd love to hear from you.!</div>
         <input type="text" class="y formEntry" placeholder="Enter Your Name.!" />
         <input type="text" class="a formEntry" placeholder="Enter Your Email.!" />
         <textarea class="b formEntry" placeholder="Enter Your Message.!"></textarea>
         <input type="checkbox" class="x" value="Term">
         <label style="color: #2C3E50 " for="terms">Accepting <span>
               <b>Terms</b>
            </span> & <span style="color: #2C3E50 ">
               <b>Privacy Policy</b>
            </span>. </label>
         <br>
         <button class="c formEntry" onclick="thanks()">Submit</button>
      </form>
   </div>
</body>
</html>

CSS

现在我们将为上面创建的表单结构代码创建模板。

<style>
   body {
      background-color: #E8DAEF;
   }
   .tutorial {
      background: #D5F5E3;
      box-shadow: 0 10px 10px 0 #DE3163;
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      position: absolute;
      animation: bounce 1s infinite;
   }
   .title {
      font-family: verdana;
      margin: 11px auto 6px;
      width: 325px;
      font-weight: bold;
   }
   .x {
      margin: 0 auto 6px 82px;
   }
   .pageTitle {
      font-size: 2em;
   }
   .secondaryTitle {
      color: grey;
   }
   .y {
      background-color: #E5E8E8;
      color: #DE3163;
   }
   .y:hover {
      border-bottom: 5px solid #6495ED;
      height: 30px;
      width: 300px;
      transition: ease 1s;
   }
   .a {
      background-color: #E5E8E8;
      height: 2em;
   }
   .a:hover {
      border-bottom: 5px solid #6495ED;
      height: 30px;
      width: 300px;
      transition: ease 1s;
   }
   .b {
      background-color: #E5E8E8;
      height: 2rem;
   }
   .b:hover {
      border-bottom: 5px solid #6495ED;
      height: 10em;
      width: 300px;
      transition: ease 1s;
   }
   .formEntry {
      display: block;
      margin: 31px auto;
      min-width: 250px;
      padding: 15px;
      border: none;
      transition: all 1s ease 0s;
   }
   .c {
      width: 100px;
      color: #DE3163;
      background-color: #D6EAF8;
      font-size: 25px;
   }
   .c:hover {
      box-shadow: 16px 16px 16px 6px #ABB2B9;
      border-top: 5px solid #D2B4DE;
   }
   @keyframes bounce {
      0% {
         tranform: translate(0, 3px);
      }
      50% {
         transform: translate(0, 6px);
      }
   }
</style>

完整代码

以下是通过组合 HTML 和 CSS 获得的最终代码，它最终在网页上创建了联系我们表单。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #E8DAEF;
      }
      .tutorial {
         background: #D5F5E3;
         box-shadow: 0 10px 10px 0 #DE3163;
         max-width: 460px;
         margin-left: auto;
         margin-right: auto;
         left: 0;
         right: 0;
         position: absolute;
         animation: bounce 1s infinite;
      }
      .title {
         font-family: verdana;
         margin: 11px auto 6px;
         width: 325px;
         font-weight: bold;
      }
      .x {
         margin: 0 auto 6px 82px;
      }
      .pageTitle {
         font-size: 2em;
      }
      .secondaryTitle {
         color: grey;
      }
      .y {
         background-color: #E5E8E8;
         color: #DE3163;
      }
      .y:hover {
         border-bottom: 5px solid #6495ED;
         height: 30px;
         width: 300px;
         transition: ease 1s;
      }
      .a {
         background-color: #E5E8E8;
         height: 2em;
      }
      .a:hover {
         border-bottom: 5px solid #6495ED;
         height: 30px;
         width: 300px;
         transition: ease 1s;
      }
      .b {
         background-color: #E5E8E8;
         height: 2rem;
      }
      .b:hover {
         border-bottom: 5px solid #6495ED;
         height: 10em;
         width: 300px;
         transition: ease 1s;
      }
      .formEntry {
         display: block;
         margin: 31px auto;
         min-width: 250px;
         padding: 15px;
         border: none;
         transition: all 1s ease 0s;
      }
      .c {
         width: 100px;
         color: #DE3163;
         background-color: #D6EAF8;
         font-size: 25px;
      }
      .c:hover {
         box-shadow: 16px 16px 16px 6px #ABB2B9;
         border-top: 5px solid #D2B4DE;
      }
      @keyframes bounce {
         0% {
            tranform: translate(0, 3px);
         }
         50% {
            transform: translate(0, 6px);
         }
      }
   </style>
</head>
<body>
   <div>
      <form class="tutorial">
         <div class="pageTitle title">Contact Us</div>
         <div class="secondaryTitle title">We'd love to hear from you.!</div>
         <input type="text" class="y formEntry" placeholder="Enter Your Name.!" />
         <input type="text" class="a formEntry" placeholder="Enter Your Email.!" />
         <textarea class="b formEntry" placeholder="Enter Your Message.!"></textarea>
         <input type="checkbox" class="x" value="Term">
         <label style="color: #2C3E50 " for="terms">Accepting <span>
               <b>Terms</b>
            </span> & <span style="color: #2C3E50 ">
               <b>Privacy Policy</b>
            </span>. </label>
         <br>
         <button class="c formEntry" onclick="thanks()">Submit</button>
      </form>
   </div>
</body>
</html>

当我们运行上述代码时，它将生成一个输出，其中包含显示在网页上的联系我们表单，并应用了 CSS 样式。

更新于： 2024-01-19

501 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告