Hướng dẫn react-php-contact form - biểu mẫu liên hệ react-php

Xây dựng một biểu mẫu liên hệ với React và sử dụng trong trang web PHP hoặc WordPress của bạn!

Có nhiều cách để tạo các biểu mẫu liên hệ, sử dụng HTML và JQuery hoặc HTML và JavaScript để chọn các khung hiện đại hơn như React.

Hôm nay chúng tôi sẽ cố gắng làm một cái gì đó một chút khác biệt, theo một cách hiện đại.

Kiểm tra bài viết cập nhật với Hook React:

Đến cuối bài đăng này, bạn sẽ có một liên hệ đầy đủ hoạt động từ bạn có thể tích hợp vào WordPress hoặc trang web PHP của bạn. Tôi cũng đã xuất bản dự án cuối cùng trong GitHub, vì vậy bạn có thể tải xuống và chơi xung quanh với nó.

Điều kiện tiên quyết? Không thực sự

Đối với hướng dẫn này, bạn không phải là một chuyên gia về JavaScript, React hoặc PHP. Kiến thức cơ bản là đủ để có được sự hiểu biết của hướng dẫn này. Tôi cũng đã giành chiến thắng trong các chi tiết cơ bản như cài đặt React và viết mã CSS.

Chúng tôi sẽ chỉ tạo phần phía trước, nhưng tôi sẽ chỉ cho bạn cách xây dựng phần phụ trợ. Đối với phần phụ trợ, bạn cần một máy chủ web như Apache hoặc Nginx. Chỉ gửi email cơ bản sẽ được thực hiện với PHP.

Đối với người dùng Mac, cách nhanh nhất để thiết lập máy chủ là tải xuống và cài đặt MAMP. Tôi đã cài đặt MAMP với Nginx. Bạn không cần bất kỳ cơ sở dữ liệu nào cho việc này vì chúng tôi chỉ gửi email đến hộp thư của bạn mà không lưu nó trong cơ sở dữ liệu.

Được rồi, hãy để cho bữa tiệc này bắt đầu!

Trước khi bạn bắt đầu: Nếu bạn đang tìm kiếm một giải pháp dễ dàng để tạo biểu mẫu của mình và không lo lắng về phần phụ trợ biểu mẫu của bạn, hãy thử contactform.dev
If you are looking for an easy solution to create your form and not worry about your form backend, Try out contactform.dev

Mẹo: Xây dựng nhanh hơn với các thành phần React bằng cách chia sẻ chúng với bit. Nhóm của bạn có thể dễ dàng chia sẻ các thành phần, đồng bộ hóa các thay đổi và sử dụng chúng ở bất cứ đâu. Thử nó ra.: Build faster with React components by sharing them with Bit. Your team can easily share components, sync changes and use them anywhere. Try it out.

Tạo ứng dụng React

Bạn nên cài đặt created-react-app trong máy tính của bạn. Nếu bạn không có ứng dụng tạo ra, bạn có thể cài đặt nó qua NPM. Chạy cái này trong bảng điều khiển của bạn.

npm install create-react-app

Hãy để điều hướng đến thư mục dự án của bạn trong bảng điều khiển. Của tôi là:

cd ~/react-contact-form

Để tạo ứng dụng React trong thư mục chạy lệnh này:

create-react-app .

Điều này sẽ mất một vài giây hoặc phút. Khi nó được thực hiện, hãy mở dự án với IDE hoặc trình chỉnh sửa mã yêu thích của bạn. Của tôi là VSCODE. Sau đó mở tệp App.js trong thư mục ./src/app.js. Bạn sẽ thấy một cái gì đó như thế này:

Tạo biểu mẫu liên hệ

Hãy để dọn dẹp một chút. Xóa mọi thứ bên trong DIV với ứng dụng lớp. Bây giờ phương pháp kết xuất của bạn sẽ trông như thế này.

Chỉ là một div trống rỗng.

Hãy để tạo một biểu mẫu cơ bản với hai đầu vào văn bản cho tên đầu tiên và tên thứ hai, một email đầu vào cho email người dùng, một textarea cho tin nhắn và tất nhiên là nút gửi.

Bây giờ phương thức kết xuất của bạn sẽ trông như thế này:

Thêm kiểu dáng cơ bản vào biểu mẫu của bạn

Tạo ứng dụng React đã nhập tệp CSS theo mặc định. Bạn có thể xem tệp app.css trong thư mục ./src. Mở nó ra và xóa mọi thứ bên trong tệp. Thêm mã CSS này vào tệp. Tôi sẽ không giải thích tất cả những gì CSS làm. Nhưng nó khá cơ bản, chỉ cần thêm một số chiều rộng và căn chỉnh.

Được chứ. Tôi không muốn nhầm lẫn bạn quá nhiều. Chúng tôi đã làm một chút mã hóa nhưng chưa thấy đầu ra nào. Vì vậy, hãy để tiết kiệm tất cả mọi thứ và quay trở lại nhà ga. Trong thư mục root dự án chạy:

npm start

Điều này sẽ mở ra trình duyệt với Port localhost: 3000 cổng. Bây giờ bạn sẽ có thể thấy hình thức nhỏ dễ thương của chúng tôi như thế này.

Rất tốt. Bây giờ nó thời gian cho một số công cụ phản ứng thực sự.

Xử lý biểu mẫu với React!

Bây giờ chúng ta có một hình thức phản ứng tĩnh cơ bản. Nhưng nó không làm gì cả. Chúng tôi sẽ cần một trạng thái ban đầu và gửi chức năng xử lý.

Hình thức trạng thái

Bây giờ chúng tôi sẽ thêm một trạng thái cho hình thức của chúng tôi. Chúng ta nên tạo một hàm tạo cho điều này:

Sau đó, chúng tôi cần biểu mẫu của chúng tôi gửi phương thức xử lý như thế này:

Bây giờ chúng ta có thể đăng nhập trạng thái để xem liệu chúng ta có tất cả các giá trị được lưu trong trạng thái không.

Cuối cùng, hãy để liên kết với người xử lý hình thức.

Bây giờ chúng tôi phải đặt trạng thái ban đầu của chúng tôi làm giá trị đầu vào và bất cứ khi nào thay đổi đầu vào của chúng tôi, chúng tôi sẽ đặt trạng thái của chúng tôi thành giá trị đầu vào hiện tại.

Tại thời điểm này, chúng tôi thay đổi hình thức của chúng tôi như thế này:

Nếu bạn cố gắng viết một cái gì đó trong biểu mẫu và cố gắng gửi nó ngay bây giờ, bạn sẽ thấy dữ liệu của bạn trong bảng điều khiển. Mở bảng điều khiển của bạn và kiểm tra xem nó có hoạt động không. Đầu ra bảng điều khiển sẽ trông như thế này.

Gửi email với PHP

Tốt. Chúng tôi gần như được thực hiện với phần frontend. Bây giờ chúng tôi cần một ngôn ngữ phía máy chủ để gửi email đến hộp thư của chúng tôi. Tôi chọn PHP lần này. Trước khi chúng tôi bắt đầu viết phần phụ trợ, hãy để thêm hai thuộc tính vào trạng thái của chúng tôi. Chúng ta cần thêm {error và mailsent}.

Nhà nước đã sẵn sàng. Hãy bắt đầu với PHP. Nếu bạn đã tạo ứng dụng React của mình trong thư mục Apache hoặc nginx www, bạn có thể vào root dự án của mình và tạo một thư mục có tên API/liên hệ bên trong thư mục liên hệ.

Tạo một tệp index.php. Chức năng email của chúng tôi sẽ sống ở đây. Tôi muốn đề cập rằng chúng tôi sẽ không sử dụng phương pháp OOP. Nhưng nếu bạn muốn một mã PHP sạch hơn, bạn có thể dọn dẹp và cải thiện nó một chút.

Từ ứng dụng React, chúng tôi đang gửi yêu cầu POST đến API PHP. Trong mẫu liên hệ của chúng tôi, tên và email nên được yêu cầu. Bởi vì trong PHP, chúng tôi sẽ kiểm tra hai giá trị đó. Nếu hai giá trị này trống, chúng ta sẽ gây ra lỗi. Vì vậy, hãy ghi nhớ nó.

Hãy để thêm mã này vào tệp index.php của bạn.

Về cơ bản những gì chúng tôi đang làm là: chúng tôi đang kiểm tra tên và email. Sau đó, sử dụng hàm Php Mail (), chúng tôi đang gửi email đến tài khoản email của chúng tôi với dữ liệu biểu mẫu liên hệ.

Bây giờ nếu bạn điều hướng đến thư mục API của mình http: // localhost/react-tiếp xúc-porm/api/liên hệ

Bạn sẽ không thấy gì. Bởi vì API của chúng tôi sắp chết, nếu chúng tôi không gửi tên và email đầu tiên - nó đang tìm kiếm một yêu cầu bài đăng.

Gửi dữ liệu đến API

API của chúng tôi đã sẵn sàng và bây giờ là thời gian để hoàn thành biểu mẫu của chúng tôi. Vì vậy, chúng tôi cần gửi dữ liệu của chúng tôi đã được lưu trong tiểu bang. Chúng ta có thể sử dụng JavaScript tìm nạp cho điều này. Nhưng gần đây tôi đã sử dụng một gói NPM khác hoạt động rất tốt với React cho các yêu cầu HTTP. Có lẽ bạn đã biết về nó ‘Axios. Vì vậy, chúng tôi cần cài đặt gói này trước. Chuyển đến thư mục ứng dụng React của bạn trong bảng điều khiển.

Và thực thi:

npm install axios

Tuyệt quá. Bây giờ quay lại App.js và trên đầu tệp bạn phải nhập Axios.

import axios from 'axios';

Sau khi nhập Axios, chúng tôi phải tạo một hằng số cho đường dẫn API của chúng tôi. Tạo hằng số trước lớp ứng dụng.

Sau đó, hãy để sử dụng Axios bên trong phương thức Tay cầm để gửi dữ liệu của chúng tôi đến phần phụ trợ.

Bây giờ chúng ta sẽ có thể gửi email qua mẫu liên hệ của chúng tôi. Cuối cùng, hãy để Lừa hiển thị một tin nhắn cho người dùng sau khi họ gửi email.

Trước khi thẻ đóng biểu mẫu, thêm cái này.

Bây giờ người dùng của chúng tôi có thể xem một tin nhắn sau khi gửi email. Tất cả đã được làm xong! Bạn có một hình thức liên hệ nhỏ dễ thương với React và PHP.

Tài liệu và repo GitHub bạn có thể tìm thấy ở đây:

Xem video để hiểu cách sử dụng của GitHub Repo:

Tải xuống mã từ GitHub:

Nhìn cuối cùng

Sự kết luận

Cảm ơn vì đã đọc! Tôi hy vọng bài viết này cung cấp một số cái nhìn sâu sắc về việc sử dụng React và PHP dễ dàng như thế nào để tạo một hình thức liên hệ đơn giản. Tôi khuyến khích bạn thay đổi hoặc thử và cải thiện phần phản ứng. Thậm chí có thể thêm một bộ tải và chơi xung quanh với kiểu dáng.

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét, hãy để lại nhận xét bên dưới.

Cảm ơn một lần nữa vì đã đọc! Thả một (hoặc hai), điều đó sẽ khiến tôi rất hạnh phúc và xin vui lòng bình luận bên dưới!

Hãy thử React-CC-Tagger. Một thành phần gắn thẻ cho React.

Tìm hiểu thêm