پرش به محتویات

Form

المان Form به شما امکان می‌دهد فرم‌های سفارشی با انواع فیلد زیر بسازید:

  • Email
  • Text
  • Textarea
  • Telephone
  • Number
  • URL
  • Image (کتابخانه رسانه)
  • Gallery (کتابخانه رسانه)
  • Checkbox
  • Select (dropdown)
  • Radio
  • Password
  • Remember me
  • Datepicker
  • File upload
  • Hidden

می‌توانید actionهایی تعریف کنید که پس از ارسال فرم اجرا می‌شوند؛ مانند ارسال ایمیل، redirect به صفحه‌ای خاص، ارتباط با سرورهای SendGrid یا Mailchimp، یا ورود/ثبت‌نام کاربر. در صورت نیاز، می‌توانید action‌های سفارشی خود را نیز توسعه دهید.

المان Form همچنین با Google reCaptcha V3، hCaptcha و Cloudflare Turnstile ادغام می‌شود تا سایت شما را از فعالیت‌های جعلی، اسپم و سوءاستفاده محافظت کند. از dynamic data و اعتبارسنجی فرم از طریق یک action hook جدید پشتیبانی می‌کند.

اکشن‌ها (Actions)

اکشن‌های فرم پس از ارسال موفق فرم اجرا می‌شوند.

می‌توانید یک یا چند action برای فرم خود تنظیم کنید. اکشن‌ها به ترتیب انتخاب‌شده اجرا می‌شوند، به جز action «Redirect» که همیشه در انتها اجرا می‌شود.

برای هر action انتخاب‌شده، یک control group جداگانه نمایش داده می‌شود.

Bricks Form element - email action settings

المان Form: تنظیمات action ایمیل

ایمیل (Email)

action ایمیل فرم، یک ایمیل پس از ارسال فرم می‌فرستد. به‌طور پیش‌فرض، ایمیل را به آدرس مدیر سایت با محتوای تمام فیلدهای فرم ارسال می‌کند.

می‌توانید این action را با تنظیمات زیر شخصی‌سازی کنید:

  • Subject — موضوع ایمیل.
  • Send to email address — آدرس گیرندگان ایمیل. می‌توانید ایمیل را به مدیر سایت یا یک آدرس سفارشی ارسال کنید (چندین آدرس با کاما جدا می‌شوند).
  • From email address — آدرس ایمیلی که به‌عنوان فرستنده نمایش داده می‌شود.
  • From name — نامی‌که به‌عنوان فرستنده نمایش داده می‌شود.
  • Reply to email address — در صورت پاسخ گیرنده، از این آدرس به‌جای «From email address» استفاده می‌شود.
  • Email content — محتوای سفارشی ایمیل. برای پیام پیش‌فرض حاوی همه فیلدها، این فیلد را خالی بگذارید.
  • Error message — پیامی‌که در صورت شکست ارسال ایمیل به کاربر نمایش داده می‌شود.
  • HTML email — فعال کنید تا ایمیل‌های فرمت‌شده HTML ارسال شود. غیرفعال بگذارید تا ایمیل plain text ارسال شود.

ایمیل تأیید (Confirmation email)

با ارسال خودکار یک ایمیل تأیید سفارشی در هر بار ارسال فرم، به فرستنده اطلاع دهید که پیامش دریافت شده است.

پیشنهاد اکید می‌شود SMTP را به‌درستی پیکربندی کنید تا بهترین تحویل ایمیل از وبسایت شما تضمین شود. پلاگین‌های رایگان وردپرس زیادی وجود دارند که این کار را در چند دقیقه انجام می‌دهند. جستجوی «WordPress SMTP» مقالات و پلاگین‌های فراوانی را نشان می‌دهد.

اگر «From name» و «From email address» تنظیم‌شده در بخش «Confirmation Email» المان Form استفاده نمی‌شوند، بررسی کنید که آیا پلاگین یا کد سفارشی دیگری آن‌ها را override می‌کند.

فیلدهای دینامیک فرم (Form dynamic fields)

شناسه فیلد (Field ID)

در برخی سناریوها، استفاده از محتوای فیلدهای ارسال‌شده برای پر کردن تنظیمات action ایمیل مفید است.

برای استفاده از داده‌های ارسال‌شده در تنظیمات فرم، باید ID فیلد منحصربه‌فرد (که در انتهای هر فیلد فرم قرار دارد) را کپی کنید و آن را در دو آکولاد قرار دهید: {{form_field_id}}

از این فیلدهای دینامیک در تنظیمات «Subject»، «Email address»، «Email content»، «From name» و «From email» استفاده کنید.

از {{referrer_url}} در فیلدهای فوق برای درج URL صفحه‌ای که فرم در آن ارسال شده استفاده کنید.

برای نمایش تمام فیلدهای ارسال‌شده در «Email content» از placeholder {{all_fields}} استفاده کنید.

ورود، ثبت‌نام، فراموشی و بازنشانی رمز عبور

این چهار action به شما امکان می‌دهند فرم‌های احراز هویت سفارشی بدون کدنویسی بسازید.

هنگام انتخاب یکی از این action‌ها، باید فیلدهای فرم را به‌درستی map کنید:

  • User login — فیلدهای فرم را به «Login»، «Password» و اختیاری «Remember me» map کنید.
  • User registration — فیلدهای فرم را به «Email»، «Password»، «Username» و اختیاری «First/Last name» map کنید. برای شخصی‌سازی ایمیل‌های پیش‌فرض وردپرس به ادمین یا کاربر جدید، از hook‌های زیر استفاده کنید:
  • wp_new_user_notification_email: تغییر ایمیل ارسال‌شده به کاربر.
  • wp_new_user_notification_email_admin: تغییر ایمیل ارسال‌شده به ادمین سایت.
  • Lost password — فیلد فرم را به «Email» یا «Username» برای ارسال دستورالعمل‌های بازنشانی map کنید. برای شخصی‌سازی محتوای ایمیل، از فیلتر retrieve_password_message استفاده کنید.
  • Reset password — فیلد فرم «password» را map کنید.

یادداشت

هنگام استفاده از action‌های Lost password یا Reset password، نیازی به پیکربندی Email Action ندارید. وردپرس به‌طور خودکار ارسال ایمیل‌های لازم را با روش‌های پیش‌فرض خود مدیریت می‌کند.

برای دستورالعمل‌های دقیق پیکربندی صفحات احراز هویت سفارشی با المان Form، به مقاله Authentication Pages مراجعه کنید.

Redirect

این action کاربر را از صفحه فرم به صفحه دیگری در سایت redirect می‌کند. می‌توانید redirect به ناحیه مدیریت یا یک URL سفارشی تنظیم کنید و تأخیر زمانی برای redirect تعریف کنید.

action Redirect تنها پس از اجرای موفق تمام action‌های دیگر فعال می‌شود.

از نسخه 1.10، فیلد Custom redirect URL از تگ فیلد دینامیک فرم پشتیبانی می‌کند.

باز کردن قفل حفاظت با رمز عبور (Unlock password protection)

این action برای دسترسی به محتوای محافظت‌شده با قابلیت password protection بریکس استفاده می‌شود. می‌توانید فیلد فرم مربوطه را به «Password» map کنید، اما اگر هیچ فیلدی map نشده باشد، اولین فیلد رمز عبور در فرم به‌طور پیش‌فرض استفاده می‌شود.

برای دستورالعمل‌های دقیق‌تر تنظیم password protection با فرم‌ها، به مقاله Password Protection مراجعه کنید.

Webhook (@since 2.0)

action Webhook از نسخه 2.0 در دسترس است و داده‌های فرم ارسال‌شده را به یک یا چند URL خارجی می‌فرستد.

موارد استفاده رایج:

  • ارسال leads به CRM‌هایی مانند Zoho، Hubspot یا Salesforce
  • فعال‌سازی سناریوهای Zapier یا Make
  • ذخیره داده‌های فرم در Google Sheets یا پایگاه داده خارجی
  • اطلاع‌رسانی به ابزارهای داخلی از طریق API سفارشی یا Slack bot

webhook یک HTTP request است که هنگام ارسال فرم فرستاده می‌شود. می‌توانید کنترل کنید چه داده‌ای، به چه فرمتی ارسال می‌شود و آیا خطاها باید فرم را متوقف کنند.

تنظیم: Endpoints

می‌توانید چندین endpoint برای webhook تنظیم کنید. هر endpoint این گزینه‌ها را دارد:

  • Name — برچسب این webhook (فقط برای مرجع شما).
  • Endpoint URL — URL برای ارسال داده‌های فرم.
  • Data format — نحوه ارسال داده: JSON یا Form data (x-www-form-urlencoded).
  • Data — قالب payload اختیاری با تگ‌های فیلد دینامیک. برای ارسال تمام فیلدها خالی بگذارید. مثال:
{ "name": "{{43f295}}", "email": "{{a5c626}}" }

Headers — هدرهای سفارشی اختیاری در فرمت JSON. مثال:

{ "Authorization": "Bearer token" }

تنظیم: حداکثر اندازه payload (KB)

حداکثر اندازه payload درخواست را تنظیم کنید. پیش‌فرض: 1024 (1 MB)

تنظیم: Rate limiting

  • Rate limiting — فعال کنید تا درخواست‌ها در ساعت محدود شوند.
  • Max requests per hour — محدودیت را تنظیم کنید (پیش‌فرض: 60).

تنظیم: مدیریت خطا (Error handling)

  • Continue on error — اگر فعال باشد، ارسال فرم حتی در صورت شکست webhook موفق می‌شود.
  • Error message — پیام نمایش‌داده‌شده در صورت شکست webhook و غیرفعال بودن «Continue on error».

مثال: Zapier

برای فعال‌سازی یک Zap از ارسال فرم، مراحل زیر را دنبال کنید:

  1. در Zapier، یک Zap جدید ایجاد کنید.
  2. Webhooks by Zapier را به‌عنوان trigger انتخاب کنید.
  3. Catch Hook را انتخاب کنید.
  4. URL webhook‌ای که Zapier می‌دهد را کپی کنید.

  1. در Bricks، فرم خود را ویرایش کنید و یک action Webhook اضافه کنید.
  2. URL Zapier را در فیلد Endpoint URL paste کنید.

  1. Data format را روی JSON (پیشنهادی) تنظیم کنید.
  2. اختیاری payload را تعریف کنید یا برای ارسال تمام فیلدها خالی بگذارید.
  3. فرم را ذخیره کرده و تست کنید.

برای دستورالعمل کامل، راهنمای webhook Zapier را مطالعه کنید.

ایجاد و به‌روزرسانی پست‌ها (@since 2.1)

با استفاده از action‌های «Create post» و «Update post» می‌توانید فرم‌های قدرتمند frontend با Bricks بسازید.

اطلاعات بیشتر و نمونه‌ها در /builder/features/create-update-posts-on-the-frontend/ موجود است.

سفارشی (Custom)

action سفارشی به شما امکان می‌دهد از hook bricks/form/custom_action استفاده کنید و کد سفارشی خود را اجرا کنید.

مطمئن شوید که Custom را در فیلد «Actions after successful form submit» المان فرم گنجانده‌اید.

callback action، شیء $form را دریافت می‌کند که متدهای زیر را برای دریافت تنظیمات فرم، فیلدها و فایل‌های آپلودشده ارائه می‌دهد:

تنظیمات: **$form->get_settings()**

این متد یک آرایه associative با تنظیمات فرم (تنظیمات فیلدها و action‌ها) را برمی‌گرداند:

Array
(
    [fields] => Array
        (
            [0] => Array
                (
                    [type] => text
                    [label] => Name
                    [placeholder] => Your Name
                    [id] => 15bc57
                )

            [1] => Array
                (
                    [type] => email
                    [label] => Email
                    [placeholder] => Your Email
                    [required] => 1
                    [id] => 3db633
                )

            [2] => Array
                (
                    [type] => textarea
                    [label] => Message
                    [placeholder] => Your Message
                    [required] => 1
                    [id] => f65f2c
                )
            ...

        )

    [submitButtonStyle] => primary
    [actions] => Array
        (
            [0] => email
            ...
        )

    [successMessage] => Message successfully sent. We will get back to you as soon as possible.
    [emailSubject] => Contact form request
    [emailTo] => admin_email
    [fromName] => bricks
    [emailErrorMessage] => Submission failed. Please reload the page and try to submit the form again.
    [htmlEmail] => 1
    [mailchimpPendingMessage] => Please check your email to confirm your subscription.
    [mailchimpErrorMessage] => Sorry, but we could not subscribe you.
    [sendgridErrorMessage] => Sorry, but we could not subscribe you.
    ...
)

مقادیر فیلدها: **$form->get_fields()**

این متد یک آرایه associative با مقادیر ارسال‌شده برای هر فیلد فرم، همراه با post Id و form Id برمی‌گرداند:

Array
(
    [form-field-15bc57] => John Doe
    [form-field-3db633] => john.doe@example.com
    [form-field-f65f2c] => Thank you for using Bricks!
    ...
    [postId] => 167
    [formId] => yrnkmt
    ...
    [referrer] => https://example.com/contact
)

فایل‌های آپلودشده: **$form->get_uploaded_files()**

این متد یک آرایه associative با خصوصیات فایل‌های ارسال‌شده، گروه‌بندی‌شده بر اساس field Id برمی‌گرداند:

یادداشت

['file'] => مسیر فیزیکی ذخیره‌شده ['url'] => ممکن است در صورت عدم ذخیره در media یا پوشه سفارشی قابل دسترس نباشد.

Array
(
    [form-field-sajbjc] => Array
        (
            [0] => Array
                (
                    [file] => /.../public/wp-content/uploads/2022/03/my-uploaded-file.png
                    [url] => https://example.com/wp-content/uploads/2022/03/my-uploaded-file.png
                    [type] => image/png
                )

            [1] => Array
                (
                    [file] => /.../public/wp-content/uploads/2022/03/my-other-file.png
                    [url] => https://example.com/wp-content/uploads/2022/03/my-other-file.png
                    [type] => image/png
                )
            ...

        )

)

مثال ۱ — راه‌اندازی پایه

<?php
function my_form_custom_action( $form ) {
  // $fields = $form->get_fields();
  // $formId = $fields['formId'];
  // $postId = $fields['postId'];
  // $settings = $form->get_settings();
  // $files = $form->get_uploaded_files();

  // Perform some logic here...

  // Set result in case it fails
  $form->set_result([
    'action' => 'my_custom_action',
    'type'    => 'success', // or 'error' or 'info'
    'message' => esc_html__('Oh my custom action failed', 'bricks'),
  ]);
}
add_action( 'bricks/form/custom_action', 'my_form_custom_action', 10, 1 );

مثال ۲ — ارسال ایمیل دوم پس از ارسال فرم.

با نسخه فعلی Bricks فقط یک ایمیل اطلاع‌رسانی می‌توان تنظیم کرد. با این کد snippet می‌توانید یک ایمیل دوم ارسال کنید.

<?php
function my_form_custom_action_sending_email( $form ) {
  $fields = $form->get_fields();
  // $formId = $fields['formId'];
  // $postId = $fields['postId'];
  $settings = $form->get_settings();
  // $files = $form->get_uploaded_files();


  $to = 'recipient@example.com'; // Replace this
  $from = 'sender@example.com'; // Replace this
  $subject = 'Your Subject'; // Replace this

  if ( ! empty( $settings['emailContent'] ) ) {
    $message = $form->render_data( $settings['emailContent'] );
    $message = isset( $settings['htmlEmail'] ) ? nl2br( $message ) : $message;
  } else {
    $email = new Bricks\Integrations\Form\Actions\Email('email');
    $message = $email->get_default_message( $settings, $fields );
  }


  $headers[] = 'From: Your Name <'.$from.'>';
  $headers[] = 'Reply-to: '. $from;
  if ( isset( $settings['htmlEmail'] ) ) {
    $headers[] = 'Content-Type: text/html; charset=UTF-8' . "\r\n";
  }

  $result = wp_mail( $to, $subject, $message, $headers );

  // $form->set_result([
  //  'action' => 'my_custom_action',
  //  'type'    => 'success', // or 'error' or 'info'
  //  'message' => esc_html__('Oh my custom action failed', 'bricks'),
  // ]);
}
add_action( 'bricks/form/custom_action', 'my_form_custom_action_sending_email', 10, 1 );

مثال ۳ — redirect سفارشی به URL ذخیره‌شده در یک hidden field

در برخی موارد می‌خواهید کاربر را بر اساس مقادیر URL parameter به صفحه‌ای redirect کنید. در این سناریو نمی‌توانید از {url_parameter:key:raw} در فیلد Custom redirect URL استفاده کنید، چون فرم با AJAX ارسال می‌شود و URL parameter صفحه جاری در AJAX call ارسال نمی‌شود.

روش ۱ از نسخه 1.10، action Redirect از تگ فیلد دینامیک فرم پشتیبانی می‌کند. می‌توانید action Redirect را انتخاب کرده و به صورت زیر پیکربندی کنید.

روش ۲ برای منطق پیچیده‌تر می‌توانید از action سفارشی با کد PHP استفاده کنید. ابتدا url parameter را در یک hidden field قرار دهید.

URL parameter را در hidden field ذخیره کنید و Custom action را انتخاب کنید

سپس action سفارشی را انتخاب کنید و کد زیر را به‌عنوان نمونه دنبال کنید:

<?php
add_action( 'bricks/form/custom_action', 'redirect_to_my_key', 10, 1 );

function redirect_to_my_key( $form ) {
  $form_fields   = $form->get_fields();
  $form_id       = $form_fields['formId'];

  // Check if the form id is the one you want
  if( $form_id !== 'cyrozb' ) return;

  // oeckxw is the hidden field Id where I placed the {url_parameter:my_key:raw}
  $my_key = isset( $form_fields['form-field-oecdxz'] ) ? $form_fields['form-field-oecdxz'] : '';

  if( $my_key ) {
    // Now you get the hidden field value and redirect to the page you want, for example:
    $redirect_to = get_site_url() . '/?key=' . $my_key;

    // If the hidden field value is a URL, just redirect to it instead of following my code
    // $redirect_to = $my_key;

    $form->set_result(
      [
        'action'          => 'my_custom_redirect', // This is the action name, you can set it to anything you want
        'type'            => 'redirect', // Must be set to 'redirect'
        'redirectTo'      => $redirect_to,
        'redirectTimeout' => 0 // Need to delay ? Set a timeout in milliseconds
      ]
    );
  }
}

action‌های فرم سفارشی (Custom form actions)

از Bricks 1.12.2، می‌توانید با افزودن چندین action فرم سفارشی قابلیت‌های فرم‌های Bricks را گسترش دهید. این امکان ادغام یکپارچه با سرویس‌های خارجی مانند CRM، ارائه‌دهندگان email marketing، سیستم‌های اطلاع‌رسانی یا هر workflow سفارشی را فراهم می‌کند.

برای ایجاد action‌های سفارشی از سه فیلتر کلیدی استفاده کنید:

این فیلترها کنترل کاملی بر نحوه پیکربندی و اجرای action‌های سفارشی می‌دهند.

مثال: ایجاد یک action اطلاع‌رسانی Slack سفارشی

۱ - افزودن action به تنظیمات form actions:

add_filter(
    'bricks/elements/form/controls',
    function( $controls ) {
        $controls['actions']['options']['slack-notification'] = esc_html__( 'Send to Slack', 'bricks' );

        $controls['slackFields'] = [
            'group'       => 'slack',
            'label'       => esc_html__( 'Fields to include', 'bricks' ),
            'type'        => 'select',
            'multiple'    => true,
            'options'     => [], // Auto-populated with form fields with 'map_fields' => true
            'map_fields'  => true,
            'description' => esc_html__( 'Select which form fields to include in the Slack notification', 'bricks' ),
        ];

        return $controls;
    }
);

۲ - افزودن یک control group جدید:

add_filter(
    'bricks/elements/form/control_groups',
    function( $control_groups ) {
        $control_groups['slack'] = [
            'title' => esc_html__( 'Slack notification', 'bricks' ),
            'required' => [ 'actions', '=', 'slack-notification' ],
        ];

        return $control_groups;
    }
);

1.

۳ - مدیریت منطق action هنگام ارسال فرم:

add_action(
    'bricks/form/action/slack-notification',
    function ( $form ) {
        $settings = $form->get_settings();
        $fields   = $form->get_fields();

        // Custom Slack notification implementation
    }
);

اعتبارسنجی فرم

Bricks 1.7.1 یک فیلتر جدید به نام bricks/form/validate ارائه می‌دهد که به شما امکان می‌دهد هر ارسال فرم را اعتبارسنجی کنید و در صورت شکست اعتبارسنجی سفارشی، پیام‌های خطا برگردانید. پارامتر اول $errors یک آرایه است که هر آیتم آن یک پیام خطاست. پارامتر دوم $form نمونه فرم ارسال‌شده است.

مثال کد زیر آدرس ایمیل ارسال‌شده برای فیلد فرم با ID 7e30aa را اعتبارسنجی می‌کند.

اگر هیچ حساب کاربری با این آدرس ایمیل در سایت وجود نداشته باشد، اعتبارسنجی شکست می‌خورد، یک پیام خطا نمایش داده می‌شود و هیچ ایمیلی ارسال نمی‌شود.

add_filter( 'bricks/form/validate', function( $errors, $form ) {
  $form_settings = $form->get_settings();
  $form_fields   = $form->get_fields();
  $form_id       = $form_fields['formId'];

  // Skip validation: Form ID is not 'kfbqso'
  if ( $form_id !== 'kfbqso' ) {
    // Early return the $errors array if it's not target form
    return $errors;
  }

  // Get submitted field value of form field ID '7e30aa'
  $email_address = $form->get_field_value( '7e30aa' );

  // Error: Email from registered user (show error message, and don't send email)
  if ( ! email_exists( $email_address ) ) {
    // Add error message to the $errors message array
    $errors[] = esc_html__( 'This email address is not in our system, sorry.', 'bricks' );
  }

  // Make sure to always return the $errors array
  return $errors;
}, 10, 2 );.

اعتبارسنجی فوری ورودی (Immediate input validation)

فیلد فرم: پیام خطا

Bricks تجربه کاربری فرم را با قابلیت نمایش پیام‌های خطا بلافاصله پس از از دست دادن focus توسط فیلد بهبود داده است.

برای استفاده از این قابلیت:

  1. یک «Error Message» به یک فیلد فرم خاص اضافه کنید.
  2. پس از از دست دادن focus، فرم ورودی کاربر را بر اساس معیارهای زیر ارزیابی می‌کند:
  3. Required — بررسی می‌کند فیلدهای اجباری داده دارند.
  4. Min/Max number — اطمینان حاصل می‌کند اعداد وارد‌شده در بازه تعریف‌شده هستند.
  5. Email — فرمت صحیح آدرس ایمیل را تأیید می‌کند.
  6. URL — ساختار URL وارد‌شده را اعتبارسنجی می‌کند.

غیرفعال کردن اعتبارسنجی فوری ورودی

گاهی نمی‌خواهیم پیام‌های خطا فوری نمایش داده شوند و ترجیح می‌دهیم فقط در رویدادهای خاص نمایش داده شوند. این امکان از نسخه 1.12 با کنترل جدید «Disable Form Validation» فراهم شده است.

می‌توانید اعتبارسنجی را در ورودی، blur یا هر دو غیرفعال کنید. با این حال، فرم همچنان هنگام submit اعتبارسنجی می‌شود.

اعتبارسنجی با attribute‌ Pattern

با attribute جدید pattern (@since 2.0.2) می‌توانید ورودی فرم را قبل از ارسال به‌صورت native اعتبارسنجی کنید. با attribute title (نیز @since 2.0.2) می‌توانید پیام‌های خطای سفارشی مستقیماً از مرورگر نمایش دهید.

attribute pattern با انواع فیلد زیر کار می‌کند: text، tel، email، url و password.

مثال: برای الزام وارد کردن شماره تلفن در فرمت ###-###-###، می‌توانید از pattern ^\d{3}-\d{3}-\d{3}$ استفاده کنید. همچنین می‌توانید از attribute title برای راهنمایی کاربران یا نمایش پیام کمکی در صورت عدم تطابق استفاده کنید:

محافظت از اسپم (Google reCaptcha V3)

المان فرم Bricks از آخرین مکانیزم Google reCaptcha V3 پشتیبانی می‌کند. برای فعال‌سازی آن، ابتدا یک site key و secret key ایجاد کنید و هر دو را در پنل مدیریت تحت «Bricks > Settings > API keys» اضافه کنید.

پس از افزودن کلیدها، تنظیم reCaptcha را هنگام ویرایش المان Form در builder تحت control group «Spam Protection» فعال کنید.

اگر همچنان اسپم زیادی دریافت می‌کنید، ممکن است نیاز باشد سطح آستانه امتیاز را تنظیم کنید. آستانه به‌طور پیش‌فرض روی 0.5 تنظیم شده است. API Google reCaptcha V3 مقداری بین 0.0 و 1.0 برمی‌گرداند، که 0.0 به احتمال زیاد ربات و 1.0 به احتمال زیاد تعامل انسانی است. برای افزایش آستانه Bricks از snippet PHP زیر استفاده کنید:

add_filter( 'bricks/form/recaptcha_score_threshold', function( $score ) {
    // Bricks default is 0.5
    $score = 0.8;
    return $score;
}, 10, 1 );

تنظیم آستانه روی 0.8 یعنی Bricks فقط ارسال‌های فرم با امتیازات بالاتر (احتمال بیشتر تعامل انسانی) را قبول می‌کند.

محافظت از اسپم (hCaptcha)

Bricks با hCaptcha ادغام شده است. برای استفاده از آن، Sitekey و Secret Key هکپچا را تحت «Bricks > Settings > API keys» اضافه کنید.

پس از افزودن کلیدها، تنظیم reCaptcha را هنگام ویرایش المان Form در builder تحت control group «Spam Protection» فعال کنید. گزینه‌های «Invisible» یا «Visible» hCaptcha را خواهید یافت. برای hCaptcha «Visible»:

  • Theme — بین تم dark یا light انتخاب کنید.
  • Size — از compact یا normal انتخاب کنید.

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

محافظت از اسپم (Cloudflare Turnstile)

از نسخه 1.9.2، Bricks از Cloudflare Turnstile پشتیبانی می‌کند. برای استفاده از آن، ابتدا site key و secret key Cloudflare Turnstile را تحت «Bricks > Settings > API keys» اضافه کنید.

پس از ثبت اطلاعات لازم، به المان Form در builder بروید و control group «Spam Protection» را پیدا کنید. در آنجا می‌توانید تنظیم Cloudflare Turnstile را روشن یا خاموش کنید.

پس از فعال‌سازی، می‌توانید موارد زیر را شخصی‌سازی کنید:

  • Theme — بین تم «dark»، «light» یا «auto» پیش‌فرض انتخاب کنید.
  • Size — «compact» یا «normal» را انتخاب کنید.

برای جزئیات بیشتر در مورد دریافت site key و secret key، به مستندات Cloudflare Turnstile مراجعه کنید.

Honeypot

لایه دیگری از محافظت در برابر اسپم که از Bricks 1.12.2 در دسترس است، امکان تبدیل هر فیلد فرم (به جز «Files»، «Remember me»، «HTML» و «Hidden») به یک honeypot field است. این قابلیت تأثیری بر بازدیدکنندگان واقعی سایت نمی‌گذارد، اما از ارسال فرم توسط ربات‌هایی که honeypot field را پر می‌کنند جلوگیری می‌کند.

شخصی‌سازی فیلد date picker

Bricks (1.5+) از کتابخانه JavaScript Flatpickr برای انتخاب تاریخ/زمان استفاده می‌کند که می‌توان آن را بر اساس گزینه‌های موجود توسعه داد، بومی‌سازی کرد یا شخصی‌سازی کرد.

برای تغییر گزینه‌های راه‌اندازی کتابخانه از فیلتر bricks/element/form/datepicker_options استفاده کنید:

add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {
    $options['locale'] = [
        'firstDayOfWeek' => 1 // Set Monday as the first week day
    ];

    return $options;
}, 10, 2 );

تابع callback فیلتر دو آرگومان می‌پذیرد:

بومی‌سازی رشته‌های date picker

Flatpickr از l10n برای زبان‌های مختلف پشتیبانی می‌کند. برای بارگذاری پکیج زبان، دستورالعمل‌های زیر را در Bricks Settings > Custom Code > Body (footer) scripts قرار دهید:

<script src="https://npmcdn.com/flatpickr/dist/l10n/XX.js"></script>

<script>
   window.flatpickr.localize(window.flatpickr.l10ns.XX)
</script>

XX را با کد زبان موردنیاز جایگزین کنید (مثلاً de برای آلمانی، pt برای پرتغالی، ...).

اگر نیاز دارید زبان را برای یک فرم خاص تنظیم کنید، پکیج زبان را مانند خط اول کد فوق بارگذاری کنید و سپس از فیلتر Bricks برای بارگذاری زبان برای آن المان فرم استفاده کنید:

add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {
    if ( $element->id === 'abcdef' ) {
      // localize the form "abcdef" element
      $options['locale'] = 'XX';
    }

    return $options;
}, 10, 2 );

تعریف value و label گزینه‌ها

از Bricks 1.10.2 می‌توانید value و label را برای انواع فیلد checkbox، radio و select با جداسازی گزینه از طریق دو نقطه (:) تعریف کنید:

یکپارچه‌سازی‌ها

المان Form با Mailchimp و Sendgrid ادغام می‌شود و به شما امکان می‌دهد مخاطبین جدید به لیست‌های ایمیل اضافه کنید. مطمئن شوید API key‌های Mailchimp/Sendgrid را طبق توضیحات زیر اضافه کرده‌اید.

هنگام ویرایش المان فرم، باید Mailchimp یا Sendgrid را در «Actions» انتخاب کنید تا فرم بداند آدرس ایمیل ارسال‌شده را به لیست اضافه کند.

پس از انتخاب action مناسب، یک control group «Mailchimp» یا «Sendgrid» جدید ظاهر می‌شود. در آنجا باید لیستی که می‌خواهید مخاطب جدید را اضافه کنید و «Email field» فرم حاوی آدرس ایمیل را انتخاب کنید.

Mailchimp

action Mailchimp به شما امکان می‌دهد داده‌های فرم (ایمیل، نام و نام خانوادگی) را به‌طور خودکار به یک لیست و گروه Mailchimp ارسال کنید.

برای استفاده از action Mailchimp، باید یک حساب Mailchimp ایجاد کنید و سپس یک API key دریافت کنید.

برای استفاده از این action، API key را تحت «Bricks > Settings > API keys > Mailchimp API key» اضافه کنید.

SendGrid

action SendGrid به شما امکان می‌دهد داده‌های فرم (ایمیل، نام و نام خانوادگی) را به‌طور خودکار به یک لیست SendGrid ارسال کنید.

برای استفاده از action SendGrid، باید یک حساب SendGrid ایجاد کنید و سپس یک API key دریافت کنید.

برای استفاده از این action، API key را تحت «Bricks > Settings > API keys > SendGrid API key» اضافه کنید.

ایجاد فرم چند ستونی

برای ایجاد یک فرم چند ستونی، ابتدا باید «Width» فیلدهای فرم را به درصد تنظیم کنید.

مثال: چیدمان دو ستونی

ایجاد یک فرم دو ستونی به سادگی تنظیم عرض هر فیلد فرم به 50% است.

برای ایجاد فاصله بین فیلدهای فرم، عرض دو فیلد اول را روی 49% تنظیم کنید. این فیلدها 98% عرض افقی را اشغال می‌کنند و یک شکاف 2% بین ستون‌ها ایجاد می‌شود. مقدار «Spacing» پایین را روی «2%» تنظیم کنید تا همان فاصله در تمام جهات اعمال شود.

در نهایت، «Alignment» را روی «space-between» تنظیم کنید تا فیلدها به‌صورت افقی با لبه‌های خارجی فرم تراز شوند.

چیدمان فرم دو ستونی