資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 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 獲得的最終程式碼，它最終在網頁上建立了聯絡我們表單。
<!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 次瀏覽
廣告