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.
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:
Full Name
Phone Number
Email Address
Date
Time
Address Details
Book Appointment
* {
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%;
}
}