Các hình thức¶

Các biểu mẫu trong SoOn rất mạnh mẽ. Chúng được tích hợp trực tiếp với các ứng dụng khác và có thể sử dụng cho nhiều mục đích khác nhau.

Trong chương này, bạn sẽ khám phá cách:

Thêm biểu mẫu vào chủ đề tùy chỉnh của bạn.
Thay đổi hành động của biểu mẫu.
Cách điệu hóa hình thức nhờ các biến Bootstrap.

Biểu mẫu mặc định¶

Để thêm biểu mẫu vào trang của bạn, bạn chỉ cần sao chép và dán mã do Trình tạo trang web tạo ra trong chế độ xem của bạn.

Nó sẽ trông giống như sau.

<form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-success-mode="redirect" data-success-page="/contactus-thank-you" data-model_name="mail.mail">
     <div class="s_website_form_rows row s_col_no_bgcolor">
          <div class="form-group s_website_form_field col-12    s_website_form_dnone" data-name="Field">
               <!-- form fields -->
           </div>
     </div>
</form>

Hành động¶

Có một data-model_name trong thẻ biểu mẫu. Nó cho phép bạn xác định các hành động khác nhau cho biểu mẫu của mình.

Gửi email (hành động này được sử dụng theo mặc định).

<form data-model_name="mail.mail">

Nộp đơn xin việc làm.

<form data-model_name="hr.applicant">

Tạo một khách hàng.

<form data-model_name="res.partner">

Tạo một vé.

<form data-model_name="helpdesk.ticket">

Tạo một cơ hội.

<form data-model_name="crm.lead">

Tạo một nhiệm vụ.

<form data-model_name="project.task">

Thành công¶

Bạn cũng có thể xác định điều gì sẽ xảy ra khi biểu mẫu được gửi nhờ data-success-mode.

Chuyển hướng người dùng đến một trang được xác định trong data-success-page.

<form data-success-mode="redirect" data-success-page="/contactus-thank-you">

Hiển thị một tin nhắn (trên cùng một trang).

<form data-success-mode="message">

Bạn có thể thêm thông báo thành công của mình ngay dưới thẻ biểu mẫu. Luôn thêm lớp d-none để đảm bảo rằng thông báo thành công của bạn bị ẩn nếu biểu mẫu chưa được gửi.

<div class="s_website_form_end_message d-none">
     <div class="oe_structure">
          <section class="s_text_block pt64 pb64" data-snippet="s_text_block">
               <div class="container">
                     <h2 class="text-center">This is a success!</h2>
               </div>
          </section>
     </div>
</div>

Biến khởi động¶

Như bạn đã biết, Trình tạo trang web tạo nội dung dựa trên Bootstrap. Điều này cũng đúng với các hình thức. Bên dưới, bạn có thể tìm thấy tuyển tập các biến Bootstrap hoặc xem danh sách đầy đủ các biến.

/website_airproof/static/src/scss/bootstrap_overridden.scss¶

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;

$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
$input-border-radius:                   $border-radius !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;