Hướng dẫn html code for appointment form - mã html cho mẫu cuộc hẹn

Question

Tích hợp với trang web của bạn

3 bước sau đây sẽ cho phép bạn thiết lập biểu mẫu trên trang web của mình, bao gồm thông báo về các bài nộp mới và lưu dữ liệu gửi.

Nội dung chính Show

Tích hợp với trang web của bạn
Bước đầu tiên: Sử dụng mã HTML Use HTML code
Bước thứ 2: Tùy chỉnh biểu mẫu Customize the form
Bước thứ 3: Thiết lập kết nối truyền Establish a transmission connection

Bước đầu tiên: Sử dụng mã HTML Use HTML code

Sao chép mã HTML sau đây và dán nó vào mã nguồn của trang của bạn ở vị trí mong muốn.


  
    For person
    
      Name
      
    
    
      
        Email address
        
      
      
        Phone number
        
      
    
  
  
    Appointment request
    
      
        Datum
        
      
      
        
          
          
          Morning
        
        
          
          
          Afternoon
        
      
    
    Confirmation requested by
    
      
        
        Email
      
      
        
        Phone call

Bước thứ 2: Tùy chỉnh biểu mẫu Customize the form

Tùy chỉnh mã HTML này theo nhu cầu của bạn, ví dụ, nếu bạn muốn thêm nhiều trường nhập hơn.

Bạn có thể sử dụng CSS để tự do xác định giao diện và thiết kế của hình thức để nó phù hợp với giao diện của trang chủ của bạn. Áp dụng biểu định kiểu chuẩn bị của chúng tôi. Điều này cung cấp một thiết kế tiêu chuẩn cho sự xuất hiện của biểu mẫu (như trên trang này), cần phù hợp với hầu hết các trang web:design of the form so that it matches the look of your homepage. Adopt our prepared stylesheet. This provides a standard design for the form's appearance (like on this page), which should be suitable for most websites:

Phong cách hình thức FT-V3.css

Bước thứ 3: Thiết lập kết nối truyền Establish a transmission connection

Để có được các mục cho biểu mẫu của bạn, bạn phải chèn một địa chỉ gửi tùy chỉnh trong biểu mẫu. Chúng tôi khuyên bạn nên sử dụng dịch vụ gửi từ Form.taxi.

Yêu cầu địa chỉ gửi, sau đó chèn địa chỉ này vào mã nguồn HTML của biểu mẫu ở vị trí của SEND ADDRESS. Bây giờ hình thức của bạn cuối cùng đã sẵn sàng để sử dụng. Đăng ký biểu mẫu với Form.Taxi để lấy địa chỉ gửi của bạn:

<div class="formbold-main-wrapper">
  <div class="formbold-form-wrapper">
    <form action="https://formbold.com/s/FORM_ID" method="POST">
      <div class="formbold-mb-5">
        <label for="name" class="formbold-form-label"> Full Name label>
        <input
          type="text"
          name="name"
          id="name"
          placeholder="Full Name"
          class="formbold-form-input"
        />
      div>
      <div class="formbold-mb-5">
        <label for="phone" class="formbold-form-label"> Phone Number label>
        <input
          type="text"
          name="phone"
          id="phone"
          placeholder="Enter your phone number"
          class="formbold-form-input"
        />
      div>
      <div class="formbold-mb-5">
        <label for="email" class="formbold-form-label"> Email Address label>
        <input
          type="email"
          name="email"
          id="email"
          placeholder="Enter your email"
          class="formbold-form-input"
        />
      div>
      <div class="flex flex-wrap formbold--mx-3">
        <div class="w-full sm:w-half formbold-px-3">
          <div class="formbold-mb-5 w-full">
            <label for="date" class="formbold-form-label"> Date label>
            <input
              type="date"
              name="date"
              id="date"
              class="formbold-form-input"
            />
          div>
        div>
        <div class="w-full sm:w-half formbold-px-3">



 <div class="formbold-mb-5">
 <label for="time" class="formbold-form-label"> Time label>
 <input
 type="time"
 name="time"
 id="time"
 class="formbold-form-input"
 />
 div>
 div>
 div>
 <div class="formbold-mb-5 formbold-pt-3">
 <label class="formbold-form-label formbold-form-label-2">
 Address Details
 label>
 <div class="flex flex-wrap formbold--mx-3">
 <div class="w-full sm:w-half formbold-px-3">
 <div class="formbold-mb-5">
 <input
 type="text"
 name="area"
 id="area"
 placeholder="Enter area"
 class="formbold-form-input"
 />
 div>
 div>
 <div class="w-full sm:w-half formbold-px-3">
 <div class="formbold-mb-5">
 <input
 type="text"
 name="city"
 id="city"
 placeholder="Enter city"
 class="formbold-form-input"
 />
 div>
 div>
 <div class="w-full sm:w-half formbold-px-3">
 <div class="formbold-mb-5">
 <input
 type="text"
 name="state"
 id="state"
 placeholder="Enter state"
 class="formbold-form-input"
 />
 div>
 div>
 <div class="w-full sm:w-half formbold-px-3">
 <div class="formbold-mb-5">
 <input
 type="text"
 name="post-code"



 id="post-code"
 placeholder="Post Code"
 class="formbold-form-input"
 />
 div>
 div>
 div>
 div>
 <div>
 <button class="formbold-btn">Book Appointmentbutton>
 div>
 form>
 div>
div>
<style>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: "Inter", Arial, Helvetica, sans-serif;
 }
 .formbold-mb-5 {
 margin-bottom: 20px;
 }
 .formbold-pt-3 {
 padding-top: 12px;
 }
 .formbold-main-wrapper {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 48px;
 }
 .formbold-form-wrapper {
 margin: 0 auto;
 max-width: 550px;
 width: 100%;
 background: white;
 }
 .formbold-form-label {
 display: block;
 font-weight: 500;
 font-size: 16px;
 color: #07074d;
 margin-bottom: 12px;
 }
 .formbold-form-label-2 {
 font-weight: 600;
 font-size: 20px;
 margin-bottom: 20px;
 }
 .formbold-form-input {



 width: 100%;
 padding: 12px 24px;
 border-radius: 6px;
 border: 1px solid #e0e0e0;
 background: white;
 font-weight: 500;
 font-size: 16px;
 color: #6b7280;
 outline: none;
 resize: none;
 }
 .formbold-form-input:focus {
 border-color: #6a64f1;
 box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
 }
 .formbold-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;
 }
 .formbold-btn:hover {
 box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
 }
 .formbold--mx-3 {
 margin-left: -12px;
 margin-right: -12px;
 }
 .formbold-px-3 {
 padding-left: 12px;
 padding-right: 12px;
 }
 .flex {
 display: flex;
 }
 .flex-wrap {
 flex-wrap: wrap;
 }
 .w-full {
 width: 100%;
 }
 @media (min-width: 540px) {
 .sm\:w-half {
 width: 50%;
 }
 }
style>

programming html Appointment form Bootstrap Appointment form design Appointment request form Appointment Summary template

Hướng dẫn html code for appointment form - mã html cho mẫu cuộc hẹn

Tích hợp với trang web của bạn

Bước đầu tiên: Sử dụng mã HTML Use HTML code

Bước thứ 2: Tùy chỉnh biểu mẫu Customize the form

Bước thứ 3: Thiết lập kết nối truyền Establish a transmission connection

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội