HomeLập trìnhPhpCách tạo biểu...

Cách tạo biểu mẫu email Bootstrap với ReCaptcha và PHP trong 30 phút


bởi Ondrej Svestka

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách dễ dàng và nhanh chóng thêm hình ảnh xác thực vào biểu mẫu Bootstrap của bạn để ngăn chặn thư rác. Chúng tôi sẽ sử dụng Google ReCaptcha, giải pháp Captcha phổ biến nhất hiện nay.

Là một cơ sở, tôi sẽ sử dụng một biểu mẫu liên hệ HTML với chương trình phụ trợ PHP từ một bài hướng dẫn trước đây của tôi. YBạn có thể sử dụng nó với bất kỳ biểu mẫu Bootstrap nào khác mà bạn có.

0*-rftK5Bs2Y2Ugvib

biểu mẫu của chúng tôi sẽ được sử dụng HTML5 cú pháp rắc một số Giàn giáo Bootstrap và một trình xác thực JavaScript.

Chúng tôi sẽ gửi nó qua AJAX (trang sẽ không tải lại), sau đó xử lý các giá trị biểu mẫu bằng PHP.

Và cuối cùng, chúng tôi sẽ gửi email bằng PHP và trả lại phản hồi cho trang gốc sẽ được hiển thị trong thông báo trạng thái phía trên biểu mẫu.

0*Lm6jtqIQlaFNeeXU
Đây sẽ là kết quả. Xem nó cũng trực tiếp trong bản demo.

Như tôi đã đề cập trước đây, tôi sẽ chủ yếu tập trung vào làm việc với ReCaptcha hôm nay và không phải trên biểu mẫu Bootstrap quá nhiều. Vì vậy, trong trường hợp bạn đã bỏ lỡ nó, ít nhất hãy xem nhanh hướng dẫn về biểu mẫu Bootstrap của tôi.

Đọc thêm  Thêm tập lệnh vào header.php - Diễn đàn freeCodeCamp

Ok, chúng ta hãy làm điều đó!

1. Đăng ký trang web của bạn

Để có thể sử dụng ReCaptcha, bạn cần phải đăng ký trang web của bạn trên trang web của ReCaptcha trước.

0*GRk4rP9nglbHow7V

Sau khi đăng ký thành công, bạn sẽ nhận được một cặp chìa khóa để sử dụng với ReCaptcha của bạn. Để trang mở hoặc sao chép các khóa vào một tệp văn bản, chúng tôi sẽ sớm cần đến chúng.

0*G0dDkucp15TJJFNa

2.HTML

Chúng tôi sẽ sử dụng mẫu của biểu mẫu liên hệ từ hướng dẫn trước + chúng tôi sẽ thêm phần tử reCAPTCHA và đầu vào ẩn bên cạnh phần tử đó để giúp chúng tôi xác thực JavaScript.

Hãy giải thích mã HTML một chút:

  • chúng tôi có sẵn một biểu mẫu liên hệ HTML được viết bằng đánh dấu Bootstrap
  • các tập lệnh và biểu định kiểu chính của bên thứ 3 sẽ được sử dụng là: jQuery, Bootstrap 4, CSS và JavaScript

Để thêm ReCaptcha vào biểu mẫu của bạn, bạn chỉ cần:

  • bao gồm <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S">

vào nơi bạn cần tôin biểu mẫu của bạn (thay thế khóa trang web bằng khóa riêng của bạn từ bước đầu tiên)

  • Bao gồm ReCaptcha JS để khởi chạy ReCaptcha trên trang — <script src="https://www.google.com/recaptcha/api.js"><;/tập lệnh>
  • Tôi cũng dùng data-callbackdata-expired-callback thuộc tính trên g-recaptcha div — đây là tùy chọn và tôi sẽ sử dụng chúng để làm cho ReCaptcha hợp tác với trình xác thực
  • Đây là mã đầy đủ của mẫu

    3.PHP

    Trong PHP, chúng tôi sẽ sử dụng thư viện ứng dụng khách của Google sẽ đảm nhận việc xác minh.

    Bạn có thể sử dụng Trình soạn thảo để cài đặt nó trong dự án của mình, tải xuống từ GitHub hoặc chỉ cần sử dụng phiên bản tôi đã đưa vào gói Tải xuống.

    Phần chính của mã cũng là từ hướng dẫn trước của tôi, vì vậy tôi sẽ cố gắng tóm tắt lại nó một cách ngắn gọn.

    Hãy đặt tên cho tệp contact.php và xem chúng ta sẽ làm gì trong đó:

    • ban đầu, chúng ta cần yêu cầu thư viện ReCaptcha PHP — require('recaptcha-master/src/autoload.php');
    • và thực hiện một số nội dung cấu hình, chẳng hạn như nhập Khóa bí mật của bạn — $recaptchaSecret="YOUR_SECRET_KEY";
    • Chúng tôi cũng đặt các biến bổ sung như email để gửi email đến, chủ đề và thông báo thành công/lỗi
    • sau đó, bạn sẽ cần khởi tạo lớp bằng Khóa bí mật của mình – $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret);
    • gửi một cuộc gọi để xác thực ReCaptcha — $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
    • ném một ngoại lệ nếu xác thực không thành công – if (!$response->isSuccess()) {...}
    • sau đó, tập lệnh sẽ soạn thư email, gửi nó và trả về phản hồi JSON. (Biểu mẫu được gửi bởi AJAX theo mặc định.)

    4. JavaScript

    Tệp JavaScript của chúng tôi contact.js sẽ chăm sóc:

    • xác thực đầu vào với trình xác thực Bootstrap
    • xử lý Các cuộc gọi lại JS từ ReCaptcha (chúng tôi sẽ điền vào ẩn input[data-recaptcha] dựa trên phản hồi của ReCaptcha. Nếu thành công, chúng tôi điền thông tin đầu vào này vào = trình xác thực sẽ coi biểu mẫu là hợp lệ.)
    • AJAX gửi biểu mẫu
    • và cuối cùng, hiển thị thông báo thành công hoặc lỗi và cũng làm trống biểu mẫu.

    Đây là mã:

    5. Kết quả

    Đây chính là nó!

    Bạn nên có một biểu mẫu liên hệ Bootstrap liên hệ đang hoạt động với nền tảng ReCaptcha và PHP ngay bây giờ.

    Cảm ơn vì 50 cái vỗ tay ? nếu bạn thích bài viết này! MộtNgoài ra, hãy xem các hướng dẫn Bootstrap khác hoặc các mẫu Bootstrap của tôi.

    Được xuất bản lần đầu trên blog Bootstrapious.

    Giới thiệu về tác giả

    Ondrej Svestka là một người đam mê Bootstrap và front-end, đồng thời là người sáng lập Boostrapious.



    Zik.vn – Biên dịch & Biên soạn Lại

    spot_img

    Create a website from scratch

    Just drag and drop elements in a page to get started with Newspaper Theme.

    Buy Now ⟶

    Bài viết liên quang

    DMCA.com Protection Status