فرم

وضعیت: پیش‌نویس

فرم تماس مهم‌ترین فرم هارمونیک است: درخواست جلسهٔ اول. این الگو برای ثبت‌نام رویداد، درخواست پیشنهاد و فرم‌های داخلی هم به کار می‌رود. نمونهٔ زیر زنده است؛ بی آنکه چیزی بنویسید «ارسال درخواست» را بزنید.

دربارهٔ شما

نام و نام خانوادگی

نام شرکت

ایمیل کاری

تلفن همراه

درخواست

حوزهٔ کار

مسالهٔ اصلی کسب‌وکار شما

دو سه جمله کافی است؛ جزییات را در جلسهٔ اول می‌پرسیم.

زمان پیشنهادی جلسه (اختیاری)

سال/ماه/روز

اجازه می‌دهم هارمونیک برای هماهنگی جلسه با من تماس بگیرد.

اطلاعات شما فقط برای همین درخواست استفاده می‌شود.

<form class="hq-form" data-hq-validate data-hq-demo data-hq-success="contact-ok" novalidate style="inline-size:100%">
  <div class="hq-form__summary" tabindex="-1" role="alert" hidden><h2></h2><ul></ul></div>
  <fieldset class="hq-form__group">
    <legend class="hq-form__legend">دربارهٔ شما</legend>
    <div class="hq-form__row">
      <div class="hq-field">
        <label class="hq-field__label" for="cf-name">نام و نام خانوادگی</label>
        <input class="hq-input" id="cf-name" type="text" autocomplete="name" required />
      </div>
      <div class="hq-field">
        <label class="hq-field__label" for="cf-company">نام شرکت</label>
        <input class="hq-input" id="cf-company" type="text" autocomplete="organization" required />
      </div>
    </div>
    <div class="hq-form__row">
      <div class="hq-field">
        <label class="hq-field__label" for="cf-email">ایمیل کاری</label>
        <input class="hq-input" id="cf-email" type="email" dir="ltr" autocomplete="email" required />
      </div>
      <div class="hq-field">
        <label class="hq-field__label" for="cf-phone">تلفن همراه</label>
        <input class="hq-input" id="cf-phone" type="tel" dir="ltr" inputmode="tel" autocomplete="tel" required pattern="[0-9۰-۹ +\-]{10,}" data-hq-pattern="شمارهٔ تلفن کامل نیست؛ مثلاً ۰۹۱۲ ۳۴۵ ۶۷۸۹" />
      </div>
    </div>
  </fieldset>
  <fieldset class="hq-form__group">
    <legend class="hq-form__legend">درخواست</legend>
    <div class="hq-field">
      <label class="hq-field__label" for="cf-practice">حوزهٔ کار</label>
      <div class="hq-select">
        <select class="hq-input" id="cf-practice" required>
          <option value="">انتخاب کنید</option>
          <option>ارزیابی و تشخیص</option>
          <option>طراحی کسب‌وکار و نوآوری</option>
          <option>استراتژی کسب‌وکار و آینده‌نگری</option>
          <option>توانمندسازی و بهینه‌سازی سازمانی</option>
          <option>داده و هوش مصنوعی</option>
          <option>هنوز نمی‌دانم</option>
        </select>
        <svg class="hq-icon hq-select__chevron" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"/></svg>
      </div>
    </div>
    <div class="hq-field">
      <label class="hq-field__label" for="cf-message">مسالهٔ اصلی کسب‌وکار شما</label>
      <textarea class="hq-input" id="cf-message" required aria-describedby="cf-message-help"></textarea>
      <p class="hq-field__helper" id="cf-message-help">دو سه جمله کافی است؛ جزییات را در جلسهٔ اول می‌پرسیم.</p>
    </div>
    <div class="hq-field">
      <label class="hq-field__label" for="cf-date">زمان پیشنهادی جلسه <span class="hq-field__optional">(اختیاری)</span></label>
      <div class="hq-datepicker" data-hq-datepicker>
        <input class="hq-input" id="cf-date" type="text" inputmode="numeric" placeholder="۱۴۰۵/۰۸/۱۵" aria-describedby="cf-date-help" />
        <button class="hq-datepicker__button" type="button" aria-label="باز کردن تقویم" aria-expanded="false" aria-controls="cf-date-panel"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"/></svg></button>
        <div class="hq-datepicker__panel" id="cf-date-panel" role="dialog" aria-label="انتخاب تاریخ" hidden></div>
      </div>
      <p class="hq-field__helper" id="cf-date-help">سال/ماه/روز</p>
    </div>
  </fieldset>
  <div class="hq-field"><label class="hq-choice"><input type="checkbox" id="cf-consent" required data-hq-required="برای ادامه، اجازهٔ تماس را بپذیرید." /> اجازه می‌دهم هارمونیک برای هماهنگی جلسه با من تماس بگیرد.</label></div>
  <div class="hq-form__actions">
    <button class="hq-button" type="submit">ارسال درخواست</button>
  </div>
  <p class="hq-form__note">اطلاعات شما فقط برای همین درخواست استفاده می‌شود.</p>
</form>
<div class="hq-notification hq-notification--positive" id="contact-ok" role="status" tabindex="-1" hidden>
  <svg class="hq-notification__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"/><path fill="none" d="M14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591z" data-icon-path="inner-path"/></svg>
  <div class="hq-notification__content">
    <p class="hq-notification__title">درخواست شما رسید</p>
    <p class="hq-notification__body">تا دو روز کاری برای هماهنگی جلسهٔ اول با شما تماس می‌گیریم. رونوشت درخواست به ایمیل شما فرستاده شد.</p>
  </div>
</div>

چیدمان

یک ستون. فیلدها زیر هم؛ فقط فیلدهای کوتاه و مرتبط (نام و شرکت، ایمیل و تلفن) در یک ردیف، که در موبایل زیر هم می‌روند (hq-form__row).
گروه‌بندی با fieldset. هر گروه عنوان کوتاه دارد (hq-form__legend)؛ بیشتر از سه گروه یعنی فرم باید چندمرحله‌ای شود.
کم بپرسید. هر فیلد را با این پرسش بسنجید: اگر نپرسیم، جلسهٔ اول بدتر می‌شود؟ فیلدهای اختیاری با «(اختیاری)» مشخص‌اند.
دکمهٔ اصلی در پایان فرم، در ابتدای خط (راست)، با فعلی که کار را می‌گوید: «ارسال درخواست»، نه «ثبت» یا «ارسال». دکمهٔ «پاک کردن فرم» نمی‌گذاریم.
پهنا حداکثر شش برابر space-12؛ فرم پهن خواندن را سخت می‌کند.

بررسی خطا

خطا بعد از ترک فیلد یا هنگام ارسال نشان داده می‌شود، نه هنگام تایپ. وقتی فیلد خطادار درست شد، خطا همان لحظهٔ ترک فیلد برداشته می‌شود.
هنگام ارسال، اگر خطایی هست، خلاصهٔ خطاها بالای فرم می‌آید و فوکوس به آن می‌رود. هر مورد پیوندی است به همان فیلد.
متن خطا می‌گوید چه چیزی درست نیست و چطور درستش کنند، با همان قواعد فیلد متنی.

۲ مورد را درست کنید

<div class="hq-form__summary" role="alert" style="inline-size:100%">
  <h2>۲ مورد را درست کنید</h2>
  <ul>
    <li><a class="hq-link" href="#">نشانی ایمیل کامل نیست؛ مثلاً name@company.ir</a></li>
    <li><a class="hq-link" href="#">حوزهٔ کار را انتخاب کنید.</a></li>
  </ul>
</div>

پیام موفقیت

بعد از ارسال، فرم جای خود را به یک اعلان موفقیت می‌دهد که می‌گوید چه اتفاقی افتاد و قدم بعدی چیست: کِی تماس می‌گیریم و رونوشت کجا رفت. «با تشکر از شما» کافی نیست.

انجام بده«درخواست شما رسید. تا دو روز کاری برای هماهنگی جلسهٔ اول با شما تماس می‌گیریم.»

انجام نده«عملیات با موفقیت انجام شد.»

کد

<form class="hq-form" data-hq-validate novalidate>
  <div class="hq-form__summary" tabindex="-1" role="alert" hidden><h2></h2><ul></ul></div>
  <fieldset class="hq-form__group">
    <legend class="hq-form__legend">دربارهٔ شما</legend>
    <div class="hq-form__row">…فیلدها…</div>
  </fieldset>
  <div class="hq-form__actions"><button class="hq-button" type="submit">ارسال درخواست</button></div>
</form>

با data-hq-validate، فایل lib/components.js فیلدها را با قواعد خود مرورگر (required، type، pattern) بررسی می‌کند، پیام فارسی می‌سازد و خلاصهٔ خطاها را پر می‌کند. متن پیام را می‌شود با data-hq-required و data-hq-pattern روی هر فیلد عوض کرد.

کلاس	توضیح
`hq-form`	ظرف فرم
`hq-form__group`، `hq-form__legend`	گروه و عنوان گروه
`hq-form__row`	ردیف دو فیلد کوتاه؛ در موبایل زیر هم
`hq-form__summary`	خلاصهٔ خطاها
`hq-form__actions`، `hq-form__note`	دکمه‌ها و یادداشت پایانی