Cara membuat borang hubungan dengan Next.js dan Netlify

Bina borang hubungan yang cekap dengan Next.js dan Netlify dan mengintegrasikan pengesanan spam yang kuat! Artikel ini akan membimbing anda untuk membuat borang hubungan dengan halaman pengesahan dan menggunakan keupayaan terbina dalam Netlify untuk meningkatkan keupayaan anti-Spam.

Next.js adalah rangka kerja React yang kuat yang boleh membina aplikasi reaksi yang berprestasi tinggi dan berskala. Digabungkan dengan Netlify, anda boleh dengan cepat membina borang hubungan tanpa menulis kod sisi pelayan.

Borang Netlify adalah mudah untuk disediakan dan versi percuma tersedia (setiap tapak Netlify boleh menyerahkan borang sehingga 100 kali percuma). Borang yang dikemukakan secara automatik diluluskan melalui penapis spam terbina dalam Netlify (menggunakan Akismet) dan menawarkan pelbagai pilihan konfigurasi untuk meningkatkan pengesanan spam.

Buat borang hubungan

Dalam aplikasi Next.js, buat komponen ContactForm untuk membuat borang pada halaman kenalan. Jika anda mahu borang tersebut di bawah Laluan /contact , anda harus menggunakan komponen ContactForm berikut dalam fail pages/contact.js , termasuk tag dan medan input:

 const contactForm = (/ * kod lihat */ bawah);

Coretan kod berikut mencipta borang dengan nama, syarikat, medan e -mel dan mesej, dan butang hantar. Selepas menyerahkan borang, ia akan diarahkan ke /contact/?success=true mengikut nilai atribut action borang. Pada masa ini, tidak ada perbezaan bagaimana halaman kelihatan apabila ia datang dengan dan tanpa parameter pertanyaan success , dan kami akan mengemas kini kemudian.

Fail Contact.js semasa adalah seperti berikut:

 import bertindak balas daripada "bertindak balas";
const contactPage = () => {
 const contactForm = (/* kod dalam coretan kod di atas*/)

 Kembali (
   <div>
     <h1>Hubungi kami</h1>
     {ContactForm}
   </div>
 );
};

Eksport ContactPage lalai;

Sebaik sahaja kami selesai menubuhkan borang asas, kami perlu menambah beberapa maklumat supaya Netlify secara automatik mengiktiraf borang dalam penyebaran tapak masa depan. Untuk melakukan ini, anda perlu mengemas kini borang, tambahkan data-netlify="true" harta dan medan input tersembunyi yang mengandungi nama borang. Di papan pemuka Netlify, navigasi ke tapak anda dan klik tab Borang untuk melihat tindak balas borang berdasarkan nama yang ditetapkan dalam medan tersembunyi. Yang penting, jika terdapat pelbagai bentuk di laman web ini, anda harus menetapkan nama yang unik untuk setiap borang supaya mencatatkan rekod dengan betul.

 {/* Lihat di bawah untuk kod*/}

Setelah berjaya menggunakan tapak ini untuk meniup dan menambah bidang data-netlify atribut dan medan form-name , anda boleh mengakses tapak yang digunakan dan mengisi borang. Setelah menyerahkan borang tersebut, navigasi ke https://app.netlify.com/sites/site-name/forms (di mana site-name adalah nama laman web anda), dan jika borang ditetapkan dengan jayanya, sejarah penyerahan bentuk terkini harus dipaparkan.

Mengalihkan ke halaman pengesahan

Untuk meningkatkan pengalaman pengguna, kami harus menambah beberapa logik untuk mengarahkan ke halaman pengesahan selepas borang dikemukakan apabila URL berubah kepada /contact/?success=true . Anda juga boleh memilih untuk mengarahkan ke halaman yang sama sekali berbeza apabila borang diserahkan, tetapi menggunakan parameter pertanyaan boleh menggunakan penghala seterusnya untuk mencapai kesan yang sama. Kami boleh membuat pembolehubah baru untuk menentukan penglihatan halaman atau borang pengesahan berdasarkan parameter pertanyaan. Anda boleh menggunakan next/router import { useRouter } from "next/router"; untuk mengambil parameter pertanyaan semasa.

 const router = userouter ();
const pengesahanCreenVisible = router.Query? .Success && router.Query.Success === "True";

Dalam contoh ini, tidak dapat dilihat pada halaman dan bentuk pada masa yang sama;

 const formVisible =! VasifationscreenVisible;

Untuk memberi pengguna pilihan untuk menghantar semula borang, anda boleh menambah butang ke halaman pengesahan untuk menetapkan semula borang dengan membersihkan parameter pertanyaan. Menggunakan router.replace (bukan router.push ) bukan sahaja mengemas kini halaman, tetapi juga menggantikan halaman semasa dengan versi yang tidak mengandungi parameter pertanyaan.

 router.Replace ("/Hubungi", Undefined, {cetek: true})

Kita kemudian boleh menjadikan borang secara kondusif berdasarkan sama ada ia dapat dilihat atau tidak:

 {FormVisible?

Berdasarkan perkara di atas, kita boleh menggunakan kod berikut untuk menjadikan borang secara kondusif berdasarkan parameter pertanyaan (dikemas kini apabila borang dikemukakan):

 Import React, {Usestate} dari "React";
import {userouter} dari "seterusnya/router";

const contactPage = () => {
 const [hantarNtername, setSubmitNtername] = useState ("");
 const router = userouter ();
 const pengesahanCreenVisible =
   router.Query? .Success && router.query.success === "True";
 const formVisible =! VasifationscreenVisible;

 const pengesahanMessage = (
   <react.fragment>
     <p>Terima kasih kerana menghantar borang. Kami akan menghubungi anda dalam masa 24-48 jam.</p>
     <button onclick="{()"> router.replace ("/hubungi", undefined, {cetek: true})}> hantarkan balasan lain</button>
   </react.fragment>
 );

 const contactForm = (/* kod dalam contoh kod pertama*/);

 Kembali (
   <div>
     <h1>Hubungi kami</h1>
     {FormVisible?
   </div>
 );
};

Eksport ContactPage lalai;

Tambahkan medan robot tersembunyi

Sekarang bahawa fungsi teras borang selesai, kita boleh menambah pengesanan spam tambahan kepada bentuk sebagai tambahan kepada akismet yang disertakan secara lalai. Ciri ini boleh diaktifkan dengan menambah data-netlify-honeypot="bot-field" harta kepada borang.

 {/* Lihat di bawah untuk kod*/}

Kami juga perlu membuat perenggan tersembunyi baru dengan tag yang dipanggil bot-field yang mengandungi input. Bidang ini "kelihatan" kepada robot, tetapi tidak kepada manusia. Apabila medan tersembunyi ini diisi, Netlify mengesan bot dan menandakan penyerahan sebagai spam.

<p hidden>
  <label>Jangan isi item ini:</label>
  <input type="text" name="bot-field">
</p>

Penyesuaian selanjutnya

• Kami boleh meneroka satu lagi pilihan perlindungan spam yang disokong oleh Netlify, iaitu untuk menambah Recaptcha 2 untuk Netlify Forms.
• Kami boleh mengemas kini borang dan membenarkan memuat naik fail.
• Kami boleh menetapkan pemberitahuan untuk penyerahan borang. Ini boleh ditetapkan dalam https://app.netlify.com/sites/[your-site-name]/settings/forms /settings/forms di mana kita boleh memasukkan medan topik tersuai (boleh disembunyikan) untuk pemberitahuan e-mel.

Kod lengkap

Kod tapak lengkap boleh didapati di GitHub. (Sila berikan pautan github jika ada dalam artikel)

Kandungan tambahan

Kod berikut mengandungi semua yang kami bincangkan, serta logik untuk menyediakan baris subjek tersuai menggunakan apa yang dikemukakan dalam medan Nama. (Sila berikan kod)

Sila ambil perhatian bahawa coretan kod di atas perlu ditambah dengan kod lengkap mengikut dokumen asal. Saya berusaha sebaik mungkin untuk menulis semula dan menggilap berdasarkan dokumen asal, berusaha untuk membuat penciptaan pseudo-asal tanpa mengubah makna asal.

Atas ialah kandungan terperinci Cara membuat borang hubungan dengan Next.js dan Netlify. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!