Formulir Umpan Balik yang Dapat Disesuaikan: Cara Membuat Online? Bagaimana cara membuat formulir umpan balik pop -up yang indah HTML dan PHP dengan telepon dan mengirim pesanan dengan e -mail?

Instruksi untuk membuat formulir umpan balik pada HTML dan CSS, serta kumpulan formulir siap dan panduan untuk menghubungkan dan mengonfigurasinya.

Hari ini, siapa pun yang bahkan tidak memiliki keterampilan pemrograman dapat dengan mudah membuat situsnya sendiri dengan mengunduh templat yang siap dari jaringan dan menginstalnya di mesin yang digunakan.

Namun, tidak setiap template yang sudah siap dapat memenuhi persyaratan pengguna. Banyak dari mereka diwakili dalam bentuk "keju" dan tidak memiliki bagian dan fungsi yang penting seperti, misalnya, bentuk umpan balik.

Blok situs ini sangat penting bagi pemilik toko online dan portal informasi besar. Dalam artikel kami, Anda akan menemukan informasi tentang cara membuat formulir umpan balik secara mandiri, tempat mengunduh templat yang sudah jadi dan cara menginstalnya di situs web Anda.

Gambar 1. Apa itu bentuk umpan balik dan mengapa begitu perlu?

Apa itu bentuk umpan balik dan mengapa begitu perlu?

• Salah satu fungsi terpenting dari situs yang layak adalah formulir umpan balik. Ini berfungsi untuk interaksi antara pengunjung dan administrasi sumber daya. Jadi dengan bantuannya Anda dapat menulis banding untuk dukungan teknis atau mengirim data yang diperlukan ke administrasi. Misalnya, detail pembayaran di toko online atau nama barang yang dipesan. Sangat disarankan untuk memiliki formulir seperti itu di portal Anda, karena kontak terus -menerus dengan pengunjung dan pelanggan adalah kunci untuk pengembangannya yang sukses.

Formulir umpan balik adalah halaman atau blok terpisah (departemen), yang terdiri dari beberapa bidang input teks dan tombol "Kirim". Sebagai aturan, formulir standar memiliki bidang berikut:

• Nama lengkap
• E-mail (alamat email)
• Nomor telepon
• Alamat situs Anda
• Bidang untuk memasukkan pesan teks

Namun, bidangnya bisa sebanyak yang Anda suka, dan mereka dapat ditandatangani sesuka Anda. Itu semua tergantung pada kebutuhan dan imajinasi Anda.

Gambar 2. Apa itu bentuk umpan balik dan mengapa begitu perlu?

• Selain itu, beberapa pemilik menambahkan kartu Google atau Yandex ke formulir umpan balik, formulir memasuki situs menggunakan jejaring sosial "vkontakte", "facebook", "Google+" dan sebagainya. Tetapi kita akan berbicara tentang menciptakan bentuk umpan balik yang paling sederhana, yang akan Anda butuhkan secara eksklusif tentang dasar -dasar bahasa penandaan Html dan tidak ada lagi.

Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs di HTML dan PHP?

Agar tidak mengubah artikel menjadi buku teks yang membosankan, kami akan melanjutkan dari fakta bahwa Anda sudah terbiasa dengan dasar -dasar bahasa penandaan Html Dan Anda memiliki gagasan umum tentang cara kerjanya. Jika Anda tidak memiliki keterampilan seperti itu, sebelum mengambil pembuatan formulir, sangat disarankan untuk sedikit mengencangkan pengetahuan Anda tentang sumber daya gratis htmlbook.ru. Jika tidak, Anda tidak hanya dapat meninggalkan usaha ini, tetapi juga merusak kode situs Anda.

Untuk menciptakan kembali bentuk umpan balik kerja, Anda membutuhkan tiga elemen penting, salah satunya bertanggung jawab atas penandaan dan struktur formulir ( Html), yang kedua untuk desain eksternalnya ( CSS), dan yang ketiga untuk pemrosesan dan transmisi data ( Php). Mari kita mulai secara berurutan:

Menulis kode HTML untuk umpan balik

• Langkah 1. Untuk menunjukkan formulir Html Tag digunakan ‹Form› ‹/Form›. Di dalamnya akan diatur ukuran, gaya, dan sifat vital bentuk lainnya. Saat merekam tag itu sendiri, ia perlu mengatur kelas untuk ditunjukkan, yang selanjutnya akan membantu menginstal formulir CSS Gaya.

Gambar 1. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 2. Lebih jauh untuk membuat bidang pertama dari formulir kami di dalam tag \u003cMembentuk\u003e Anda perlu menulis tag blok \u003cP\u003eyang bertanggung jawab untuk membuat baris baru.

Gambar 2. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 3. Tag di dalam \u003cP\u003e Dari baris baru kami memasukkan tag berikut: ‹Label untuk \u003d" Nama "›Nama \u003c/Label\u003e. Dia bertanggung jawab atas nama bidang bentuk masa depan.

Gambar 3. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 4. Di baris baru, semuanya ada di tag yang sama \u003cP\u003e Kami meresepkan tag membuat bidang dengan nilai -nilai berikut: ‹Input type \u003d" Text »name \u003d" name "placeholder \u003d"Masukkan nama Anda "Yg dibutuhkan \\\u003e. Parameter " type \u003d "teks"" Mengatur jenis bidang teks, dan parameter " placeholder \u003d "Masukkan nama Anda «» Mengatur teks awal di bidang teks ini. Parameter " yG DIBUTUHKAN»Ini membuatnya jelas bagi pengunjung situs bahwa bidang ini wajib untuk mengisi. Akibatnya, Anda harus mendapatkan formulir dengan satu bidang, seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Gambar 4. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 5. Dengan contoh di atas, tambahkan bidang yang tersisa yang Anda butuhkan, setiap kali mulai dari tag \u003cP\u003e. Untuk menginstal bidang dengan pesan teks, gunakan tag ‹TextArea name \u003d" Message "cols \u003d" 50 ″ baris \u003d "6 ″ diperlukan› ‹/textarea›. Parameter " cols" dan " baris»Bertanggung jawab atas lebar dan tinggi bidang teks. Anda dapat mengatur parameter yang lebih Anda sukai. Anda harus mendapatkan sesuatu seperti yang ditunjukkan di tangkapan layar di bawah ini.

Gambar 5. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 6. Untuk melindungi diri Anda dari bot, yang cukup banyak di internet hari ini, buat baris lain dengan tag ‹Input Name \u003d" bezspama "type \u003d" text »style \u003d" display: none "value \u003d" " /›. Karena parameter " style \u003d "display: none"»Bidang ini tidak akan terlihat oleh manusia biasa, tetapi bot akan diisi secara otomatis. Dengan demikian, Anda selalu dapat membedakan orang yang hidup dari program ini.

Gambar 6. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 7. Tahap terakhir dari tanda adalah pembuatan tombol pengirim. Tag digunakan untuk ini \u003cTombol\u003e. Buat blok baru \u003cP\u003e Dan di dalamnya, masukkan kode tombol dengan parameter berikut: ‹Tombol class \u003d" kirim "type \u003d" kirim "›Kirim pesan \u003c/Tombol\u003e. Hasil yang serupa harus berubah, seperti yang ditunjukkan dalam tangkapan layar.

Gambar 7. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

Bekerja dengan Cascading Styles (CSS)

• Seperti yang telah Anda perhatikan dalam proses penandaan, kami menghasilkan sesuatu yang sangat bengkok, tidak mencolok dan menjijikkan. Untuk memberikan umpan balik bentuk penampilan yang kurang lebih rapi, satu bahasa Html Itu tidak akan cukup. Untuk tujuan ini, Anda harus menggunakan gaya gaya CSS.
• Jika Anda memanfaatkan saran untuk memperketat keterampilan dasar Anda pada sumber daya htmlbook.ru, lalu atur parameter desain tertentu untuk semua bagian formulir menggunakan CSS Itu tidak akan sulit bagi Anda. Jika Anda tidak memiliki keinginan atau waktu untuk mengacaukan semua ini, maka kami akan memberi Anda kode yang siap dan memberi tahu Anda cara menghubungkannya.

Gambar 8. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

Hubungkan gaya CSS ke Html Anda bisa dua cara:

• Salin kode dari tabel cascading kami ke bagian bawah file style.cssyang ada di hosting situs
• Pindahkan file gaya kami ke hosting Anda dan hubungkan

Mengajukan style.css Menghubungkan di dalam tag ‹Head› ‹/head› Menggunakan skrip ‹Link rel \u003d" stylesheet "media \u003d" screen "href \u003d" style.css "›. Jika file dengan gaya tidak ada di folder yang sama dengan file HTML utama, maka Anda perlu menentukan jalur ke sana. Dalam file kami dengan gaya, setiap elemen memiliki penunjukan. Jika Anda mau, Anda dapat mengubah parameter untuk diri sendiri, hanya dipandu oleh keterampilan pemrograman dasar.

Koneksi file php dan mengaturnya

Seperti yang disebutkan sebelumnya, naskahnya Php bertanggung jawab atas pelaksanaan formulir umpan balik. Namun, untuk lebih atau kurang memahami prinsip pekerjaan bahasa Php, Anda perlu membaca sejumlah besar literatur dan menghabiskan banyak jam untuk latihan. Oleh karena itu, seperti dalam kasus CSS, kami akan memberi Anda file siap pakai dengan skrip PHP, yang hanya harus melampirkan ke dokumen dengan formulir.

Tidak seperti file style.css, file dengan skrip PHP dilampirkan di properti formulir itu sendiri. Mari kita mulai secara berurutan:

• Langkah 1. Buka kode yang ditulis sebelumnya dan temukan baris dengan tag formulir terbuka. Tambahkan properti ke dalamnya " tindakan \u003d "contact-form.php"" dan " metode \u003d "Posting"". Tonton contoh di tangkapan layar.

Gambar 9. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 2. Unduh file PHP kami dan letakkan di hosting di folder yang sama di mana dokumen HTML berada. Dengan demikian, file PHP dan HTML akan berinteraksi satu sama lain.

Gambar 10. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 3. Selanjutnya, Anda perlu mengkonfigurasi skrip sendiri. Buka file dan atur variabel, menetapkan nama yang sama seperti pada skrip HTML. Jika Anda menambahkan bidang tambahan ke formulir, tambahkan dalam skrip PHP persis seperti yang ditunjukkan di tangkapan layar.

Gambar 11. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 4. Selanjutnya, Anda perlu menambahkan dua variabel lagi dengan alamat email Anda dan topik surat yang akan ditampilkan di kotak Anda. Dalam garis dengan variabel " $ Alamat"Tunjukkan email, dan di barisan" $ sub»Tema surat itu ditampilkan di tangkapan layar.

Gambar 12. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 5. Dalam garis dengan variabel " $ MS»Format surat yang akan Anda terima melalui surat dikonfigurasi. Anda dapat menulis ulang tidak berubah atau mengedit selera Anda sendiri.

Gambar 13 Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

• Langkah 6. Semua baris lain bertanggung jawab untuk mengirim pesan dan berisi pengaturan perlindungan terhadap bot, sehingga mereka harus dibiarkan tidak berubah. Akibatnya, kode lengkap harus terlihat seperti yang ditunjukkan di tangkapan layar di bawah ini.

Gambar 14. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

Unduh file CSS dan PHP untuk umpan balik

Setelah melakukan semua tindakan di output, Anda akan menerima formulir umpan balik yang rapi sederhana seperti itu

Gambar 15. Bagaimana cara membuat formulir umpan balik paling sederhana untuk situs pada HTML dan PHP?

Pilihan bentuk desain yang indah dari umpan balik tentang HTML dan CSS untuk tujuan yang berbeda

• Berdasarkan instruksi di atas, Anda dapat dengan mudah "menggambar" bentuk umpan balik sesuai selera Anda sendiri. Namun, jika Anda tidak punya waktu atau keinginan untuk membuat formulir dari awal, Anda dapat menemukan formulir desain yang siap di internet dan memiliki keterampilan dasar Html Edit sendiri.

Gambar 1. Pilihan bentuk desain yang indah dari umpan balik pada HTML dan CSS untuk tujuan yang berbeda

• Setelah mencari sedikit, kami menemukan untuk Anda pilihan 35 Bentuk -bentuk umpan balik desain pop -up yang indah, yang ditulis Html dan CSS. Bentuk -bentuk ini cocok untuk mesin seperti WordPress dan JoomlaMereka memiliki pengaturan sederhana dan ringan dari panel kontrol, dan juga sempurna untuk situs tanpa mesin.

Unduh pilihan bentuk umpan balik desainer untuk situs

Video: Umpan Balik Umpan Balik Balik ReadPress