Desain bentuk yang indah. Formulir umpan balik yang indah tanpa gambar menggunakan CSS murni

Jadi, mari kita mulai, pertama-tama kita akan menandai halaman dan menulis gaya untuknya. Markup akan menyertakan formulir umpan balik reguler dengan dua input (telepon, email) dan satu area teks, di mana, menurut ide kami, pengguna akan memasukkan pesannya. Kami akan menempatkan pengendali formulir di halaman terpisah. Formulir umpan balik Masukkan telepon: Surat Anda: Pertanyaan Anda: Mari kita tulis gayanya: Html, body( tinggi: 100%; margin: 0; ) html( warna latar: #fff; warna: #333; font: 12px/14px Verdana, Tahoma, sans-serif; kursor: default; ) #formulir umpan balik ( warna latar: #ececec; margin: 50px otomatis 0; perataan teks: tengah; lebar: 430px; padding: 15px; ) #bentuk umpan balik h2( margin-bawah: 25px; ) #masukan formulir umpan balik, #umpan balik -bentuk textarea( warna latar: #fff; batas: 1px solid #A9A9A9; padding: 1px 5px; lebar: 90%; ) #masukan formulir umpan balik( tinggi: 26px; ) #area teks bentuk umpan balik( tinggi: 75px; padding-top: 5px; ) #masukan formulir umpan balik( margin-top: 15px; warna latar: #0B7BB5; batas: 1px solid #CCCCCC; warna: #FFFFFF; berat font: tebal; tinggi: 40px; garis- tinggi: 40px; transformasi teks: huruf besar; lebar: 225px; Sebagai hasil dari semua tindakan ini Anda akan mendapatkan formulir ini: Sekarang saatnya bekerja di server. Skrip kami akan mencakup beberapa bagian: Pengaturan; Fungsi bantu; Pengolahan data yang masuk; Keluaran pesan. Semua bagian ini, tentu saja, bersyarat, karena tidak ada yang menghentikan kita untuk mengacaukan kode atau, sebaliknya, memindahkan bagian-bagian penting ke file lain. Tapi menurut saya lebih baik membuat handler dalam satu file, sehingga nyaman untuk menghubungkannya ke proyek lain. Pengaturan Pada tahap ini, kita akan membuat tiga variabel: $my_email (kotak surat tujuan pengiriman data), $path_log (jalur ke file log) dan $time_back (waktu pengguna kembali ke situs). // Tentukan kotak surat Anda $my_email = " [dilindungi email]"; // Tentukan di mana log akan disimpan $path_log = "log.txt"; // Waktu pengguna kembali ke situs (detik) $time_back = 3; Fungsi bantu Berikut kami uraikan lima fungsi yang akan mempermudah pengolahan data. Templat keluaran pesan: Fungsi error_msg($pesan)( $pesan = "".$pesan.""; return $message; ) fungsi sukses_msg($message)( $message = "".$message.""; return $message; ) Menghapus data yang diterima dari formulir: Fungsi clear_data($var)( kembalikan trim(strip_tags($var)); ) Mengirim surat: Fungsi send_mail($email, $subj, $text, $from)( $headers = "Dari: ".$from." \r\n"; $headers .= "Versi MIME: 1.0\r\n"; $headers .= "Jenis Konten: teks/html; charset=utf-8 \r\n"; $hasil = mail($email, $subj, $teks, $headers ) menghasilkan nilai benar; Dan fungsi terakhir yang akan memeriksa ponsel dan email untuk kebenaran rekaman formatnya. Fungsi check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) break; case "telepon": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( kembalikan benar; ) rusak; ) kembali salah; ) Seperti yang Anda lihat, semua fungsi yang kami tulis berukuran kecil. Anda dapat membiarkannya di luar area pemrosesan data, tetapi ketika Anda perlu mengubah atau memperluas sesuatu, misalnya check_format(), itu akan jauh lebih sederhana dan nyaman. Memproses data yang masuk Pertama-tama, kita mencari tahu dari halaman mana pengguna tersebut berasal. Kemudian kita menentukan variabel di mana pesan kita dan status pengiriman surat akan disimpan. // Cari tahu halaman sebelumnya $prev_page = $_SERVER["HTTP_REFERER"]; // Pesan kami $msg = ""; // Status email $status_email = ""; Sekarang, untuk menghindari masalah dengan pengkodean, kami menunjukkannya menggunakan header. Header("Tipe Konten: teks/html; charset=utf-8"); If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["nomor"]); $email = clear_data($_POST["email"]); $pertanyaan = clear_data($_POST["pertanyaan"]); check_format($email, "email") && !empty($question))( // Bentuk surat $e_title = "Pesan baru"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!} "; $e_body .= "Surat: ".$email; $e_body .= " "; $e_body .= "Pertanyaan: ".$question; $e_body .= ""; $e_body .= ""; // END Bentuklah surat if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "sukses"; $msg = sukses_msg("Terima kasih atas pertanyaan Anda. Kami akan membalas Anda sesegera mungkin."); )else( $status_email = "error"; $msg = error_msg("Terjadi kesalahan saat mengirim email."); ) // Tulis ke file $str = " Waktu: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "Telepon: ".$number."\n\r"; $str .= "Email: " .$email." \n\r"; $str .= "Pertanyaan: ".$pertanyaan."\n\r"; $str .= "Email: ".$status_email."\n\r"; $ str .= "= ========\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Isi formulir dengan benar!"); ) )else( $msg = error_msg("Terjadi kesalahan!"); ) )else( keluar ; Dalam kode tertulis, kami menentukan apakah formulir telah dikirimkan, jika tidak, kami menutup file ini menggunakan fungsi keluar. Selanjutnya, kami memeriksa keberadaan sel dengan data kami di array POST; jika sel tersebut tiba, kami membersihkannya dari kemungkinan sampah. Setelah dibersihkan, kami memeriksa format surat dan telepon, serta keberadaan teks dalam variabel pertanyaan. Selanjutnya, kita membuat surat, mengirimkannya dan menulis log, di mana, selain data, kita menyimpan status pengiriman surat tersebut. Dengan cara ini kita dapat melacak pengoperasian fungsi mail() dan pada saat yang sama tidak kehilangan data. Keluaran pesan Yang harus kita lakukan adalah memberi tahu pengguna tentang operasi yang berhasil atau “tidak selesai” dan mengembalikannya ke situs dengan formulir. Untuk melakukan ini, kami menggunakan markup dengan penyertaan skrip PHP. Untuk mengarahkan pengguna kembali ke situs, kita akan menggunakan tag meta refresh, di mana kita memasukkan kode PHP dengan variabel yang sudah dibuat. Kita juga perlu menggunakan sedikit JavaScript untuk membuat halaman sedikit lebih dinamis. Kami menulis fungsi timeBack(), yang akan menghitung detik dalam urutan terbalik sebelum pengalihan. Anda akan dihubungi

Anda akan dihubungi body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Ubah alamat halaman saat ini setelah 3 detik (3000 milidetik)*/

Memeriksa fungsionalitas formulir

Panggil jendela dan masukkan data untuk pemeriksaan tes formulir kami

Izinkan saya mengingatkan Anda sekali lagi bahwa hosting Anda harus mendukung pemrosesan file PHP, jika tidak, prosesor kami tidak akan dijalankan dan tidak ada surat yang akan dikirim ke alamat email yang ditentukan. Hasil formulir umpan balik yang berhasil diisi

Sekian bagi saya, saya berusaha menyampaikan makna dan pengoperasian naskah sebaik mungkin. Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya di komentar atau di VK (lihat detail kontak). Saya berharap Anda bekerja dengan mudah dan produktif.

Setiap situs web pasti memiliki formulir umpan balik, jadi cepat atau lambat, kita masing-masing berpikir untuk mengembangkannya. Ada cukup banyak pilihan di Internet, ada yang menggunakan plugin populer, ada yang menggunakan pengembangan pribadinya, tetapi sebagian besar mencari solusi yang sudah jadi. Bagaimanapun, formulir masukan kami untuk situs ini akan berfungsi dan berfungsi, dan mari kita bicarakan semua ini secara berurutan.

HTML

Jadi, mari kita mulai, seperti biasa, dengan template biasa - html. Pertama kita membutuhkan formulir dengan beberapa bidang. Untuk kejelasan dan standar semua bentuk, kami akan mengambil 3 bidang. Itu. ini akan menjadi Nama, Email dan Telepon.

Setiap input memiliki nama uniknya masing-masing, nanti kita membutuhkannya untuk mengirim pesan. Anda juga dapat dengan bebas menambahkan bidang Anda sendiri dan tidak hanya memasukkan, tetapi juga memilih, area teks. Jangan lupa untuk memberi nama masing-masing, yang akan kita gunakan saat mengirim informasi melalui email. Untuk kenyamanan, saya menambahkan atribut wajib ke setiap bidang, berkat itu browser tidak akan mengizinkan pengguna mengirim nilai kosong dan akan memberitahukan perlunya mengisinya.

CSS

Jika formulir sudah siap, Anda bisa mengubahnya sedikit. Semuanya di sini juga tergantung kebutuhan dan fantasi Anda. Untuk kejelasan, saya membuat sketsa beberapa gaya untuk setiap elemen sehingga semuanya tidak terlihat datar. Namun jika Anda malas atau tidak tahu cara melakukannya, Anda bisa menggunakan opsi saya:

Bentuk( lebar maksimal: 400px; lebar: 100%; margin: 0 otomatis; ) masukan( ukuran kotak: kotak batas; tampilan: blok; batas: tidak ada; bayangan kotak: sisipan 0px 0px 4px 1px rgba(0, 0, 0, 0,11); padding: 10px 20px; margin: 10px 0; garis besar: tidak ada; radius batas: 5px; bayangan kotak: 0px 2px 0 1px hitam;

Bagian klien

Di sini ada baiknya memahami lebih detail, atau lebih tepatnya memilih opsi yang sesuai untuk Anda sendiri. Untuk mengirim pesan melalui email, kita perlu menggunakan bahasa php, yaitu. buat file terpisah tempat kami akan mentransfer semua data ini. Namun kami tidak akan mempertimbangkan metode ini di sini, karena akan jauh lebih indah jika semuanya terjadi tanpa memuat ulang halaman. Jadi kita akan melihat pengiriman data melalui ajax.

Jika Anda ingin melakukan semuanya dengan cara lama, maka Anda perlu sedikit mengubah html atas dan mengatur nilai atribut metode formulir (posting atau dapatkan). Itu semua tergantung bagaimana Anda ingin mentransfer data dari formulir. Dan juga jangan lupa untuk menulis tindakan yang akan menunjukkan path ke file php.

Dan kami akan menggunakan metode yang lebih canggih dan mengirim data tanpa memuat ulang halaman, dan ketika menerima respons dari server, kami akan memberikan pesan kepada pengguna tentang operasi yang berhasil atau kesalahan. Namun kita juga membutuhkan 2 file, misalkan contact.php dan custom.js.

Pertama-tama, jangan lupa untuk menyertakan perpustakaan Jquery, dengan bantuannya kita akan mengurangi kode beberapa kali dan akan dapat dengan mudah melakukan tindakan apa pun menggunakan solusi yang sudah jadi.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( ketik: "POST", url: "contact.php", data: str, sukses : function(msg) ( if(msg == "ok") ( alert("Pesan telah terkirim"); ) else ( alert("Error! Anda mungkin salah mengisi kolom."); ) ) ) );

Sekarang mari kita pahami rencana tindakan dan mengapa kita memerlukan semua perpustakaan dan file ini. Ketika pengguna mengklik tombol kirim, kami memiliki acara kirim, yang akan kami tulis di custom.js dan berdasarkan itu kami akan menerima semua data dari formulir dan meneruskannya ke file contact.php. Di sini kami memeriksa sekali lagi apakah kolom kami kosong (untuk menghindari kemungkinan spam lainnya), mengirim pesan melalui email dan memberi tahu pengguna tentang hasilnya, yang dikirim sebagai respons ke custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // dari siapa $fromMail = " [dilindungi email]"; // Masukkan email Anda di sini $emailTo = " [dilindungi email]"; $subject = "Umpan Balik"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Dari: Contoh formulir\n"; $headers . = "Jenis konten: teks/polos; charset="utf-8"\r\n"; $headers .= "Versi MIME: 1.0\r\n"; $headers .= "Tanggal: ".date("D, d M Y h:i:s O") ."\r\n"; // isi surat $body = "Menerima surat dari situs ".$site." \n\nNama: ".$txtname."\nTelepon: ".$txtphone."\ne-mail: ".$txtemail."\nPesan: ".$txtmessage; mail($emailTo, $subject, $body, $header); gema "oke";

Ini adalah contoh paling dasar tentang cara kerja formulir kontak. Ada banyak pilihan cara memodifikasi file cek di PHP, membuat kelas sendiri, dll. Namun tugas kami adalah membuat contoh sederhana dan berfungsi yang dapat Anda gunakan di situs web Anda.

demo

file

Plugin siap pakai

Karena Anda menggunakan blog WordPress, Anda mungkin siap dan ingin menggunakan semua jenis plugin, terutama jika Anda ahli dalam pemrograman dan tata letak. Dan saya tidak menyalahkan Anda untuk ini, dan saya bahkan dapat menyampaikan salah satunya kepada Anda agar lebih jelas. Tujuan paragraf ini bukan untuk rekomendasi, melainkan hanya contoh, karena saya telah menggunakan plugin Contact Form 7 di beberapa proyek.

Sangat mudah untuk dikonfigurasi dan hampir selalu berfungsi dengan sempurna. Jika Anda perlu membuat desain unik Anda sendiri, Anda bisa melakukannya. Yang perlu Anda lakukan hanyalah menambahkan bidang yang diperlukan di konstruktor, menerjemahkan dan mengubah pemberitahuan tentang kesalahan dan pengiriman yang berhasil dengan cara Anda sendiri, dan selesai. Selanjutnya, salin kode pendek dan tempel di tempat yang diinginkan di formulir.

Saya tidak pernah mengalami masalah apa pun dengan plugin ini dan jika Anda memerlukan solusi yang cepat dan siap pakai, ini dia. Jika Anda memiliki persyaratan sendiri untuk formulir dalam hal fungsionalitas dan desain, lebih baik menggunakan opsi pertama, yang memerlukan pengetahuan di industri ini.

Halo teman-teman terkasih dan tamu blog! Umpan balik situs web adalah salah satu fitur terpenting yang memungkinkan seorang blogger berkomunikasi dengan pengunjungnya. Namun ada satu hal yang menarik - plugin yang menampilkan umpan balik untuk situs tersebut sangat berbobot!

Untuk beberapa waktu sekarang, saya sibuk membuat blog saya lebih ringan dan memutuskan untuk membuang plugin yang tidak perlu yang membebaninya dan mencegah halaman dimuat dengan cepat. Dan pertama-tama, pilihan saya jatuh pada form feedback, atau lebih tepatnya pada plugin yang menampilkannya di website saya “Contact Form 7”, dan juga membutuhkan plugin kedua yang menampilkan captcha “reCaptcha”. Beginilah cara saya memutuskan untuk membuang dua plugin yang cukup signifikan sekaligus, menggunakan formulir umpan balik yang tidak memerlukan plugin apa pun dan mudah dipasang di situs. Sekarang saya akan memberi tahu Anda tentang hal itu dan, tentu saja, saya akan membiarkan Anda mengunduh file-file tersebut sehingga Anda dapat membuat umpan balik serupa untuk situs Anda...

Jadi, setelah akhirnya menghapus plugin untuk membuat formulir umpan balik dari situs saya, saya mulai membuat formulir umpan balik yang mudah dan andal tanpa menggunakan plugin apa pun. Dan inilah yang saya dapatkan:

Anda dapat melihat dan memeriksa fungsionalitas formulir masukan saya untuk situs tersebut di halaman “ “. Tulis di formulir kontak saya di situs web dan saya akan menjawab Anda!

Sekarang mari kita beralih ke hal yang paling penting dan membuat umpan balik kita sendiri untuk situs ini, terlepas dari plugin apa pun...

Kami memberikan umpan balik untuk situs tanpa plugin!

Yang kami perlukan untuk ini: situs blog saya dengan artikel “Umpan Balik untuk situs”, editor teks dan tentu saja keinginan Anda untuk membuat formulir kontak sendiri di situs untuk mempermudah dengan membuang plugin yang tidak perlu dan berat!

Berikut adalah kode HTML form feedback situs yang bisa anda pastekan ke situs atau blog anda dimana saja, bagi saya ini halaman kontaknya:

Formulir umpan balik

Siapa namamu?

E-mail

Subjek Pesan

Kirim pesan

Harap perhatikan beberapa hal penting yang perlu Anda lakukan dalam kode ini:

Bekerja dengan kode hanya di editor teks Notepad++

Perbaiki jalur ke file mail.php di baris kode pertama, yang akan saya ceritakan nanti

Anda harus mengunggah file ini ke hosting Anda di folder root mesin situs! Tapi periksa dulu apakah Anda sudah memperbaikinya atau belum!

Di baris yang tertulis “ALAMAT EMAIL HOSTING ANDA”!

Sekarang Anda perlu menghubungkan skrip yang menghubungkan perpustakaan jQuery di situs agar sistem "umpan balik untuk situs" kami berfungsi dengan benar. Cek terlebih dahulu pada website anda, mungkin script ini sudah terpasang, jika anda belum tahu caranya, ajukan pertanyaan ke support di hosting anda.

Ini skripnya:

Atau Anda dapat menambahkan fungsi ini ke file function.php WordPress Anda:

Fungsi my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" ;

Ini menggantikan skrip dan juga menyertakan perpustakaan jQuery di situs WordPress.

Sekarang kami menghubungkan skrip di situs web kami yang akan bekerja sama dengan file mail.php, mengirimkan surat Anda. Untuk melakukan ini, kita perlu membuat file js seperti contact.js dan mengirimkannya ke situs web Anda di folder dengan skrip tema aktif Anda, yang disebut js. Jika Anda tidak memilikinya di situs web Anda, buatlah!

Ini skripnya:

JQuery(dokumen).siap(fungsi($) ( $("#kontak").kirim(fungsi() ( var str = $(ini).serialize(); $.ajax(( ketik: "POST", url : "DOMAIN ANDA/wp-content/themes/THE ANDA/mail.php", data: str, sukses: function(msg) ( if(msg == "OK") ( result = "Pesan terkirim"; $(" #fields").hide(); ) else (hasil = pesan;) $("#note").html(hasil); ) )); return false; )); ));

Hampir selesai! Sekarang kita hanya perlu mengunggah gaya ke file CSS Anda, yang bertanggung jawab atas gaya tema situs, ke hosting kami. Jika ini tidak dilakukan, maka umpan balik yang kami buat untuk situs tersebut tidak akan indah dan monokromatik.

Berikut adalah kode gaya untuk formulir umpan balik untuk situs ini:

Formulir#kontak ( perbatasan:1px solid #e5e5e5; padding:10px; latar belakang:#e9ffd0; border-radius:5px; ) #label kontak ( ukuran font: 14px; ) #input kontak:wajib:valid ( bayangan kotak: 0 0 3px #BCEF89; warna batas: #BCEF89!penting; latar belakang: #fff url(images/valid.png) tanpa pengulangan 98% tengah ) #area teks kontak:diperlukan:valid ( bayangan kotak: 0 0 3px # BCEF89; warna batas: #BCEF89!penting; ) #input kontak:fokus:tidak valid ( bayangan kotak: 0 0 3px #FFDF97; warna batas: #FFDF97!penting; latar belakang: #fff url(gambar/tidak valid. png ) tanpa pengulangan 98% tengah; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; ) .err ( border: 1px solid #ff8c00; padding: 10px ; latar belakang: #FFDF97; perataan teks: kiri; radius batas: 3 piksel; oke ( batas: 1 piksel #BCEF89 solid; margin-bawah: 15 piksel; latar belakang: #f5f9fd; perataan teks: tengah ; radius batas: 3 piksel; ) #penulis, #email, #url ( lebar: 30%; bantalan: 5 piksel; radius batas: 5 piksel; batas: 1 piksel solid #e5e5e5; ) #comment ( padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; ) #submit ( font-weight: 400; background: #393; font-size: 15px; color: #fff ; bantalan: 10px 50px; batas: tidak ada;

Cukup salin dan kirimkan ke file style.css dari tema aktif Anda di situs. Jika Anda ingin mengubah warna dan bentuk, tetapi ini hanya untuk pengguna tingkat lanjut!

Sekarang tanggapan kami untuk situs ini benar-benar siap digunakan. Uji dan nikmati kerjanya!

Itu saja!

Jika Anda menyukai materi ini? Kemudian klik tombol sosial, berlangganan pembaruan blog dan tulis komentar Anda di bawah!

Selamat siang, formulir umpan balik harus ada di setiap situs web. Hari ini saya akan menunjukkan contoh formulir siap pakai untuk dimasukkan ke situs mana pun, termasuk mesin WordPress. Contoh kode html dan php yang sudah jadi dapat disalin ke situs web Anda. Selain contoh yang sudah jadi, masih banyak plugin yang juga sangat populer. Di banyak situs, formulir seperti itu sudah ada di dalam tema, tetapi terkadang perlu menambahkan formulir lain ke halaman lain atau mengganti yang lama.

Sebelum mulai menulis artikel ini, saya menjelajahi Internet untuk mencari jawaban atas pertanyaan ini. Setelah meninjau lebih banyak situs dan blog, saya menemukan sangat sedikit jawaban berkualitas tinggi tentang cara menyisipkan formulir umpan balik di sebuah situs. Sebagian besar materi ditulis tentang bekerja dengan plugin. Di beberapa artikel tidak sepenuhnya jelas apa dan bagaimana caranya, kode tidak berfungsi, surat tidak sampai... dan sebagainya.

Tentu saja ada jawaban yang layak, tetapi jumlahnya sangat sedikit. Saya akan memberikan contoh sederhana yang tidak memerlukan banyak kecerdasan. Tidak diperlukan pengetahuan khusus tentang PHP, atau lebih tepatnya, tidak diperlukan sama sekali. Saya akan menulis secara rinci apa dan di mana perlu diubah bila diperlukan. Formulir berfungsi dengan baik tanpa gangguan apa pun. Contoh formulirnya ada di website saya. Pada contoh yang sudah selesai, saya menambahkan beberapa gaya untuk kecantikan, sehingga bentuknya tidak lagi terlihat “buruk” sama sekali. Jika mau, Anda dapat mengubah semuanya sesuai kebijaksanaan Anda.

Formulir umpan balik siap pakai untuk situs web dalam html

Dalam contoh ini, formulir umpan balik untuk situs terdiri dari kode html. Contoh kode html ini benar-benar dapat disisipkan ke halaman mana pun di situs, di mana pun atau apa pun yang Anda gunakan. Kode yang sama dapat dimasukkan ke halaman mesin WordPress, semuanya akan bekerja dengan benar dan tanpa kegagalan.

Nama Email: Subjek Teks Anda:

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form" >Nama< input class = "inp" style = "width: 30%;" name = "name" type = "text" / > E-mail:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / > Subjek Pesan< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / > Teks Anda: < textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea > < input class = "inp" type = "submit" value = "Mengirim" / > < / form >

Di awal kode, di baris pertama, Anda harus menunjukkan jalur Anda ke file php form.php (lebih lanjut tentang itu nanti). Tidak perlu mengubah apa pun. Jika Anda tidak puas dengan nama formulir dan bidangnya, Anda selalu dapat menambahkan yang baru atau mengubah yang lama. Anda juga dapat menambahkan gaya Anda sendiri langsung ke tabel. Jika opsi ini tidak nyaman bagi Anda, tentukan kelas baru dan baru kemudian tambahkan gaya melalui file style.css Anda

Bagi yang belum tahu cara melakukannya, buka area admin situs, buka editor dan buka file style.css. Tambahkan kode ini ke bagian paling akhir style sheet. Hasilnya, kode formulir harus dimasukkan ke dalam halaman dan gaya css Anda ke dalam tabel style.css

Inp( bantalan: 10px; batas: 1px solid #E5E5E5; lebar: 200px; warna: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0 , 0, 0, 0.1) 0px 0px 8px; -webkit-kotak-bayangan: rgba(0, 0, 0, 0.1) 0px 0px 8px )

Masuk ( bantalan: 10 piksel; batas : 1 piksel padat #E5E5E5; lebar: 200 piksel; warna : #999999; kotak - bayangan : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Moz - kotak - bayangan : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Webkit - kotak - bayangan : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Setelah langkah-langkah ini, Anda akan memiliki formulir umpan balik seperti ini di halaman. Jangan terlalu terbawa suasana; formulir Anda harus sederhana dan senyaman mungkin. Tanpa kolom tambahan yang tidak perlu...nama, email, subjek dan pesan. Jika diinginkan, bahkan Subjek pesan pun dapat dihapus.

Kode formulir php

Kami telah memutuskan markup formulir, kami telah membuatnya indah, sekarang kami perlu membuat file dengan ekstensi php dan menambahkan kode berikut ke dalamnya. Tambahkan file melalui klien FTP ke situs web Anda. Sebagian besar pengguna menggunakan CMS, letakkan file ini di folder dengan tema Anda. Anda harus terlebih dahulu menulis alamat dan nama file ini di markup formulir Anda, yang saya tunjukkan di atas. Sebagai contoh, path lengkapnya saya tuliskan agar jelas apa yang perlu disisipkan dan di mana.

(

 

---

Membaca:
Jika sepatu tidak pas dengan Aliexpress: tindakan yang benar dalam hal ini Produk Aliexpress memiliki ukuran yang tepat 3 basis informasi terdistribusi Manajer konten - tanggung jawab, gaji, pelatihan Kerugian dan keuntungan bekerja sebagai spesialis konten Bagaimana cara melindungi diri Anda dari penambangan tersembunyi di browser Anda? Pemulihan kata sandi di Ask