contact/index#

Biểu mẫu liên hệ công khai — khách vãng lai gửi tin nhắn mà không cần đăng nhập.

• Tệp giao diện: contact/index.html
• Đường dẫn: /lien-he
• Controller: App\Modules\Contact\ContactController::contactPage

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang#

Mã đầy đủ#

Toàn bộ tệp contact/index.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/contact/index.html rồi sửa theo ý muốn.

{%- comment -%}
  /lien-he — biểu mẫu liên hệ CÔNG KHAI, không cần đăng nhập.

  Bản plain-CSS của bộ `default`. Xem bản anphatpc để biết đầy đủ chú thích;
  các cảnh báo quan trọng nhất được nhắc lại ở đây:

  ⚠️ _hp là honeypot đặt ngoài màn hình, KHÔNG display:none. Server trả 200 khi
     ô này có giá trị — trả 400 sẽ mách cho bot biết nó bị bắt.
  ⚠️ enctype="multipart/form-data" là BẮT BUỘC, thiếu thì tệp đính kèm biến mất.
  ⚠️ Mọi giá trị người dùng nhập đều qua `| escape` — Liquid KHÔNG tự escape.

  Biến: error, sent, upload_error, form{name,email,phone,title,body} + base vars.
{%- endcomment -%}

{%- assign contact_error = error | default: '' -%}
{%- assign contact_sent = sent | default: '' -%}
{%- assign contact_upload_error = upload_error | default: '' -%}

<div class="page">
  <h1 class="page__title">Liên hệ với chúng tôi</h1>

  {% if contact_sent == '1' %}
    <p role="status" class="alert alert--success">
      Cảm ơn bạn! Chúng tôi đã nhận được tin nhắn và sẽ liên hệ lại sớm nhất.
    </p>
    {% if contact_upload_error == '1' %}
      <p role="alert" class="alert">
        Một số tệp đính kèm không tải lên được, nhưng tin nhắn của bạn đã được ghi nhận.
      </p>
    {% endif %}
  {% endif %}

  {% if contact_error != '' %}
    <p role="alert" class="alert alert--error">{{ contact_error | escape }}</p>
  {% endif %}

  <form method="POST" action="/lien-he" enctype="multipart/form-data" class="form">
    <div style="position:absolute;left:-9999px;top:-9999px" aria-hidden="true">
      <label for="contact_hp">Bỏ trống ô này</label>
      <input type="text" id="contact_hp" name="_hp" tabindex="-1" autocomplete="off">
    </div>

    <label class="form__label" for="guest_name">Họ tên *</label>
    <input class="form__input" type="text" id="guest_name" name="guest_name" required
           maxlength="100" value="{{ form.name | escape }}">

    <label class="form__label" for="guest_phone">Số điện thoại</label>
    <input class="form__input" type="tel" id="guest_phone" name="guest_phone"
           maxlength="20" value="{{ form.phone | escape }}">

    <label class="form__label" for="guest_email">Email</label>
    <input class="form__input" type="email" id="guest_email" name="guest_email"
           maxlength="255" value="{{ form.email | escape }}">

    <p class="form__hint">Vui lòng để lại ít nhất một cách liên hệ (số điện thoại hoặc email).</p>

    <label class="form__label" for="contact_title">Tiêu đề *</label>
    <input class="form__input" type="text" id="contact_title" name="title" required
           maxlength="255" value="{{ form.title | escape }}">

    <label class="form__label" for="contact_body">Nội dung *</label>
    <textarea class="form__textarea" id="contact_body" name="body" rows="6" required
              maxlength="10000">{{ form.body | escape }}</textarea>

    <label class="form__label" for="contact_files">Tệp đính kèm</label>
    <input class="form__input" type="file" id="contact_files" name="attachments[]" multiple
           accept="image/jpeg,image/png,image/webp,image/gif,application/pdf">
    <p class="form__hint">Tối đa 5 tệp, chỉ nhận ảnh hoặc PDF.</p>

    <button class="btn btn--primary" type="submit">Gửi tin nhắn</button>
  </form>
</div>