HTML部份 --- 先安排畫面的設計框
<h1>聯絡我們</h1>
<div class="container-xl">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
</div>
HTML部份 --- 安排表單的排版設計
<form method="post" action="">
<p class="text-center"><small><span class="reqword">*</span> 表示欄位必填</small></p>
<!-- 第1列 ======================================================= -->
<div class="row mb-3 align-items-center">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>姓名：</span>
<span class="faword"><i class="bi bi-person-fill"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<input type="text" name="" class="form-control" required
placeholder="請填寫聯絡人真實姓名, 方便與您聯絡......">
</div>
</div>
<!-- 第2列 ======================================================= -->
<div class="row mb-3 align-items-center">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>稱謂：</span>
<span class="faword"><i class="bi bi-gender-ambiguous"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<label><input type="radio" name="" value="先生"
class="form-check-input"> 先生 </label>
<label><input type="radio" name="" value="小姐"
class="form-check-input"> 小姐 </label>
</div>
</div>
<!-- 第3列 ======================================================= -->
<div class="row mb-3 align-items-center">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>手機：</span>
<span class="faword"><i class="bi bi-phone-vibrate"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<input type="number" name="" class="form-control" required
placeholder="請填寫與您聯絡的手機.......">
</div>
</div>
<!-- 第4列 ======================================================= -->
<div class="row mb-3 align-items-center">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>服務區域：</span>
<span class="faword"><i class="bi bi-shop"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<select name="" class="form-select" aria-label="Default select example">
<option selected disabled>請選擇靠近的服務區域...</option>
<option value="台北">台北</option>
<option value="台中">台中</option>
<option value="高雄">高雄</option>
</select>
</div>
</div>
<!-- 第5列 ======================================================= -->
<div class="row mb-3 align-items-center">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>需要的服務：</span>
<span class="faword"><i class="bi bi-check2-square"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<label><input type="checkbox" name="" value="回覆問題"
class="form-check-input"> 回覆問題 </label>
<label><input type="checkbox" name="" value="寄發型錄"
class="form-check-input"> 寄發型錄 </label>
<label><input type="checkbox" name="" value="寄發樣品"
class="form-check-input"> 寄發樣品 </label>
<label><input type="checkbox" name="" value="預約面談"
class="form-check-input"> 預約面談 </label>
</div>
</div>
<!-- 第6列 ======================================================= -->
<div class="row mb-3 align-items-start">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
<span><span class="reqword">*</span>留言內容：</span>
<span class="faword"><i class="bi bi-chat-dots"></i></span>
</div>
<div class="col-12 col-sm-7 col-md-8">
<textarea name="" rows="6" class="form-control" required></textarea>
</div>
</div>
<!-- 第7列 ======================================================= -->
<div class="row mb-3 align-items-start">
<div class="col-12 col-sm-4 col-md-3 d-flex align-items-center
justify-content-between justify-content-md-end">
</div>
<div class="col-12 col-sm-7 col-md-8 text-end">
<input type="submit" class="btn btn-outline-secondary" value="確定送出">
</div>
</div>
</form>
CSS 加以調整設計的部份 (以下參考使用, 不一定要相同的設定)
#sec5 { padding-bottom: 50px; display: flex; flex-direction: column; }
#sec5 .container-xl {
background: url(img/contact2.png) no-repeat 20% top;
background-size: 40% auto; flex: 1;
}
#sec5 h1 { margin-bottom: 20px; }
#sec5 form {
background-color: rgba(255, 255, 255, 1); color: #333; border-radius: 1rem;
max-width: 900px; margin: 150px auto 100px; padding: 20px;
}
#sec5 form .bi { font-size: 1.5em; }
#sec5 form .reqword {
color: red; margin-right: 5px; display: inline-block; vertical-align: middle;
}
#sec5 form input::placeholder { color: var(--c-form2); }
.form-control:focus {
color: #212529; background-color: #fff; border-color: var(--c-form2);
outline: 0; box-shadow: 0 0 0 0.25rem var(--c-form2);
}
.form-check-input:focus {
border-color: var(--c-form2); outline: 0;
box-shadow: 0 0 0 0.25rem var(--c-form2);
}
.form-check-input:checked {
background-color: var(--c-form1); border-color: var(--c-form1);
}
.form-select:focus {
border-color: var(--c-form2); outline: 0;
box-shadow: 0 0 0 0.25rem var(--c-form2);
}
@media (min-width: 768px){
#sec5 .container-xl {
background: url(img/contact2.png) no-repeat left bottom;
background-size: min(30%, 300px) auto;
}
#sec5 form {
margin: 0px auto 40px; padding: 40px;
background-color: rgba(255, 255, 255, 0.6);
}
}
@media (min-width:992px){
#sec5 .container-xl { background-size: min(30%, 300px) auto; }
}
WEB