Cara Membuat Formulir Kontak HTML5 / CSS3 Berbasis Ajax
Formulir kontak sangat penting untuk situs web mana pun, karena berfungsi sebagai pengirim pesan yang menyampaikan pendapat atau pertanyaan pengunjung ke webmaster. Ada banyak sekali formulir kontak di web tetapi sayangnya sebagian besar dari mereka tidak menjelaskan kepada Anda bagian-bagian pekerjaan dalam, jadi inilah tutorial terperinci untuk mengajarkan Anda membuat formulir kontak lanjutan dari awal berdasarkan teknologi pop, HTML5 dan CSS3.
Mempertimbangkan sifat dari formulir kontak email berbasis web, kami juga diharuskan untuk menyelami dua bidang aplikasi terpisah, yang merupakan kode PHP backend untuk mengirim email dan fungsi jQuery untuk antarmuka pengguna yang kaya. Pada akhirnya kita akan dibiarkan dengan bentuk kontak yang sepenuhnya dinamis dan fungsional ditulis dengan kustomisasi kemudian dalam pikiran.
Mulai sekarang untuk membuat formulir kontak lanjutan Anda sendiri!
Pintasan ke:
- Demo - Dapatkan pratinjau dari apa yang Anda buat
- Unduh - Unduh semua file (php + css)
Penataan Aplikasi
Untuk memulai, Anda perlu beberapa jenis server web untuk bekerja. Jika Anda menjalankan mesin Windows, WAMP mungkin merupakan pilihan terbaik Anda. Pengguna Mac memiliki program serupa bernama MAMP yang juga mudah dipasang.
Paket-paket ini akan mengatur server lokal di mesin Anda dengan akses penuh ke PHP. Atau jika Anda memiliki ruang server atau memiliki akses server penuh ke lokasi yang jauh, Anda dapat menggunakannya. Kami tidak akan membutuhkan database MySQL, yang seharusnya menyederhanakan banyak hal.
Setelah server Anda diatur buat folder baru untuk menampung aplikasi. Anda dapat memberi nama ini apa pun yang Anda suka karena tidak merugikan atau bahkan terkait dengan produk akhir. Struktur folder akan digunakan ketika Anda mengakses file Anda di browser web. Contoh sederhananya adalah http: //localhost/ajaxcontact/contact.php
Mari Bangun File Kita!
Kami hanya akan bekerja dalam 2 file inti. Pertama-tama kita membutuhkan inti .php file ke rumah tidak hanya logika aplikasi kita, tetapi juga markup HTML frontend. Di bawah ini adalah contoh kode yang diambil dari file awal kami.
Formulir Kontak HTML5 / CSS Ajax dengan jQuery
Untuk memulai, kami telah menulis bagian tajuk sederhana untuk dokumen kami. Ini termasuk seorang jenderal Deklarasi tipe dokumen untuk HTML5 dan beberapa elemen dokumen HTML / XML. Ini tidak benar-benar diperlukan, tetapi akan memudahkan proses rendering di browser lama (dan lebih baru). Juga tidak ada salahnya menawarkan informasi lebih lanjut.
Sedikit lebih jauh ke bawah kita bisa melihat 2 baris tepat sebelum tag heading penutupan kami. Yang pertama termasuk skrip jQuery dari Repositori Google Code online. Ini diperlukan agar kesalahan halaman dinamis kami berfungsi. Langsung di bawah ini kita memiliki inklusi dasar Dokumen CSS mengandung semua gaya halaman kami.
Di dalam badan dokumen kami, kami memiliki beberapa mengandung divisi menahan formulir kontak utama. Ini menampung 3 elemen input untuk nama pengguna, alamat email, dan pesan pribadi. Markup HTML cukup standar dan tidak boleh membingungkan para pengembang menengah.
Email Anda sudah terkirim. Sabas!
Di sini kita punya dasar Kode bersyarat PHP bersarang dalam beberapa halaman kontainer. Ini memeriksa nilai set variabel bernama
$ emailKirimdan jika sama dengan true, itu akan menampilkan pesan sukses.Di dalam HTML Formulir kami
Itu lain pernyataan adalah apa yang akan berjalan pada pemuatan halaman pertama karena tidak akan ada konten untuk dikirim pada awalnya. Di dalam sini kita akan memasukkan a koleksi singkat elemen formulir dan a tombol kirim.
Kesalahan mengirim formulir
Anda mungkin memperhatikan ada yang lain blok bersyarat langsung setelah formulir awal. Ini memeriksa variabel bernama $ hasError dan akan menampilkan pesan kesalahan setelah konfirmasi. Metode mundur ini adalah hanya digunakan jika JavaScript dinonaktifkan di browser dan karenanya tidak dapat menghasilkan kesalahan dinamis.
Sepanjang jalan kita dapat menemukan variabel PHP individual sedang diperiksa. Pernyataan ini mengatur jika formulir telah dikirimkan dengan hanya sebagian data yang diisi. Ini adalah sistem cadangan yang menampilkan isi bidang yang sudah diisi - trik yang bagus untuk pengalaman pengguna yang tepat!
Langsung setelah pengisian formulir kami adalah beberapa fungsi jQuery kami sudah menulis. Kami akan membicarakan ini terlebih dahulu karena merupakan implementasi default pada pageload. Namun jika browser tidak menerima JavaScript maka secara default kita dapat mengandalkan kode PHP kita.
Membuka ke jQuery
Cara termudah untuk memulai berbicara tentang topik ini adalah dengan terjun langsung. Saya akan memecah blok individu baris demi baris sehingga Anda dapat melihat apa yang sebenarnya diperiksa skrip untuk.
Namun jika Anda tersesat saja tinjau file kode proyek. Semua blok lengkap sudah ditulis sebelumnya dan didokumentasikan dengan baik di situs web jQuery. Untuk memulai, kami membuka kode kami yang serupa dengan yang lain:
Jika Anda terbiasa panggilan balik Anda mungkin memperhatikan pos() fungsi memiliki seperangkat parameter bawaan. Callback adalah fungsi yang lebih kecil yang disebut setelah respons data dari fungsi lain.
Jadi misalnya saat kita jQuery.post () fungsi berhasil menembak e-mail itu akan memanggil fungsi internalnya sendiri untuk menampilkan animasi geser. Semua kode ini dapat ditulis dalam bloknya sendiri dan dipindahkan ke tempat lain. Namun demi tutorial ini, lebih mudah menulis callback sebagai fungsi inline.
Melewati PHP kami
Hambatan terakhir untuk disebutkan adalah logika di belakang prosesor PHP kami. Ini adalah sistem backend yang sebenarnya panggil fungsi surat dan kirim pesannya. Semua kode yang digunakan dalam contoh di bawah ini dapat ditemukan langsung di bagian atas utama kami .php file, sebelum output HTML.
Ada juga beberapa gaya internal yang menyegarkan halaman. Tidak ada sesuatu yang baru secara khusus di sini sehingga kami tidak akan membahas detailnya. Namun demikian styles.css dokumen termasuk dalam kode proyek dan berisi teknik CSS3 yang belum sempurna.
Untuk memulai, kita buka klausa PHP dan periksa jika formulir itu bahkan diserahkan. Itu POS variabel “dikirimkan” sebenarnya adalah bidang input tersembunyi yang ditambahkan di akhir formulir kami. Ini cara yang bermanfaat periksa apakah pengguna telah mengirimkan sesuatu namun demikian kami tidak membuang sumber daya server.
Setelah ini kami memiliki 3 terpisah jika lain pernyataan memeriksa untuk melihat jika setiap kolom input telah diisi. Saya tidak akan memasukkan setiap bit logika di sini karena semuanya sangat berulang. Namun, untuk memberi Anda contoh singkat, saya telah memasukkan klausa verifikasi email di bawah ini:
// perlu email yang valid jika (trim ($ _ POST ['email']) === ") $ emailError = 'Lupa untuk memasukkan alamat email Anda.'; $ hasError = true; selain itu jika (! preg_match ("/^[[:alnum:[[[a-z0-9_.-)*@[a-z0-9.-[+\.[az[2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Anda memasukkan alamat email yang tidak valid.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP akan memangkas semua spasi putih dari nilai dan memeriksa untuk melihat apakah ada yang tersisa. Kalau begitu kita punya detail Ekspresi Reguler (Regex) untuk melihat apakah string input pengguna kami cocok dengan pola email.
Anda tentu tidak perlu mengerti caranya
preg_match ()berfungsi untuk membangun skrip ini. Ini adalah fungsi yang berguna untuk menentukan aturan dan persyaratan untuk tipe data yang berhasil, tetapi perintah pengetahuan pemrograman tingkat lanjut untuk benar-benar dipahami. Dalam skenario ini, kami memastikan pengguna hanya memasukkan beberapa karakter tertentu, termasuk @ simbol diikuti oleh 2-4 karakter mewakili a Domain Tingkat Atas.Setelah semua logika kami berlalu dan kami tidak mengembalikan kesalahan, inilah saatnya untuk mengirim pesan kami! Sedikit kode ini akan mengatur variabel individual untuk menyesuaikan pesan email kami dan mengatur beberapa header surat untuk prosesnya.
// jika tidak ada kesalahan, mari email sekarang! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Mengirimkan pesan dari'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nama: $ name \ n \ nEmail: $ email \ n \ nKomentar: $ komentar"; $ header = 'Dari:'. ' <'.$emailTo.'>' "\ r \ n". 'Membalas ke: ' . $ email; mail ($ emailTo, $ subject, $ body, $ header); // setel nilai penyelesaian boolean kami ke TRUE $ emailSent = true;Jika Anda bertanya-tanya bagaimana kode akan mengetahui alamat email Anda, ini adalah bagian yang harus diisi. Variabel pertama dalam set kami berjudul
$ emailUntukdan harus mengandung yang mana alamat email, yang akan menerima pesan.Di dalam kita
$ tubuhvariabel kita memanfaatkan\ npembatas untuk menambahkan baris baru ke dalam pesan. Ini menambahkan penempatan kecil untuk nama pengirim, alamat email, diikuti oleh istirahat untuk mereka isi pesan. Tentu saja Anda bisa menghabiskan waktu merapikan layar, tetapi struktur ini berfungsi dengan baik.Kesimpulan
Ini menutup tutorial kami untuk formulir kontak lanjutan. Jika Anda ingin menata elemen Anda terkait dengan milik Anda, Anda dapat melihat contoh saya styles.css dalam kode proyek. Namun, halaman ini terstruktur dengan cukup baik sehingga Anda dapat mendesain tampilan & rasa Anda sendiri dengan sangat mudah.
Jangan ragu untuk mengunduh kode sumber dan memeriksa apa yang telah saya lakukan sedikit lebih dekat. Sangat bagus untuk mengikuti tutorial tetapi memiliki akses langsung ke sumber proyek bisa sangat berharga. Saya juga menyertakan lembar gaya singkat untuk membuat penyesuaian mudah, terima kasih atas pandangan Anda!
