Formulir Kontak Responsif dengan PHP

Bentuk kontak responsif dirancang agar sesuai dengan berbagai viewport dalam lebar yang berbeda. Saya menggunakan kueri media CSS untuk mendesain formulir kontak responsif ini. Dalam tutorial sebelumnya, kami telah melihat bagaimana melakukan desain responsif dengan kueri media CSS.

Dalam contoh ini, formulir kontak responsif memiliki bidang Nama, Email, Telepon, dan Pesan. Fieldset ini dirancang untuk dilihat secara responsif berdasarkan viewport. Menggunakan kueri media, saya menetapkan wilayah ukuran jendela untuk mengubah gaya fieldset. Dalam artikel terakhir, kita telah melihat kode contoh untuk formulir kontak Slide-In .

lihat demo

Form Kontak Responsif HTML

Kontak responsif kode HTML ditetapkan di bawah ini. Juga, saya telah menunjukkan kueri media CSS yang digunakan untuk membuat formulir kontak menjadi cair di semua port tampilan.

  <form id = "frmContact" action = "" method = "post">
     <div id = "mail-status"> </ div>
     <div class = "contact-row column-right">
         <label style = "padding-top: 20px;"> Nama </ label> <span
             id = "userName-info" class = "info"> </ span> <br /> <input
             type = "text" name = "userName" id = "userName"
             class = "demoInputBox">
     </ div>
     <div class = "contact-row column-right">
         <label> Email </ label> <span id = "userEmail-info" class = "info"> </ span> <br />
         <input type = "text" name = "userEmail" id = "userEmail"
             class = "demoInputBox">
     </ div>
     <div class = "kontak-baris">
         <label> Telepon </ label> <span id = "subjek-info" class = "info"> </ span> <br />
         <input type = "text" name = "subject" id = "subjek"
             class = "demoInputBox">
     </ div>
     <div>
         <label> Pesan </ label> <span id = "konten-info" class = "info"> </ span> <br />
         <textarea name = "content" id = "konten" class = "demoInputBox"
             baris = "3"> </ textarea>
     </ div>
     <div>
         <input type = "submit" value = "Kirim" class = "btnAction" />
     </ div>
 </ form>
 <div id = "loader-icon" style = "display: none;">
     <img src = "LoaderIcon.gif" />
 </ div>

Ad gaya adalah,

  body {
  max-width: 550px;
     font-family: Arial;
 }

 #frmContact {
  border-top: # a2d0c8 2px solid;
     latar belakang: # b1e2da;
  padding: 10px;
 }

 #frmContact div {
  margin-bottom: 20px;
 }

 #frmContact div label {
  margin: 5px 0px 0px 5px;    
  warna: # 49615d;
 }

 .demoInputBox {
  padding: 10px;
  border: # a5d2ca 1px solid;
  border-radius: 4px;
  warna latar belakang: #FFF;
  lebar: 100%;
     margin atas: 5px;
 }

 .error {
  warna latar belakang: # FF6600;
     padding: 8px 10px;
     warna: #FFFFFF;
     border-radius: 4px;
     ukuran font: 0.9em;
 }

 .success {
  warna latar belakang: # c3c791;
  padding: 8px 10px;
  warna: #FFFFFF;
  border-radius: 4px;
     ukuran font: 0.9em;
 }

 .info {
  ukuran font: .8em;
  warna: # FF6600;
  spasi-huruf: 2px;
  padding-left: 5px;
 }

 .btnAction {
  warna latar: # 82a9a2;
     padding: 10px 40px;
     warna: #FFF;
     border: # 739690 1px solid;
  border-radius: 4px;
 }

 .btnAction: fokus {
  garis besar: tidak ada;
 }
 .kolom-kanan
 {
     margin-kanan: 6px;
 }
 .contact-row
 {
     display: inline-block;
     lebar: 32%;
 }
 @media semua dan (lebar maks: 550px) {
     .contact-row {
         display: block;
         lebar: 100%;
     }
 }

Memanggil PHP Mail Script melalui jQuery AJAX

Dalam contoh ini, saya telah menggunakan jQuery AJAX untuk memanggil skrip email PHP untuk mengirim email kontak menggunakan SMTP Gmail.

  <? php
 require ('phpmailer / class.phpmailer.php');

 $ mail = PHPMailer baru ();
 $ mail-> IsSMTP ();
 $ mail-> SMTPDebug = 0;
 $ mail-> SMTPAuth = TRUE;
 $ mail-> SMTPSecure = "tls";
 $ mail-> Port = 587;  
 $ mail-> Nama Pengguna = "Nama Pengguna SMTP Anda";
 $ mail-> Sandi = "Kata Sandi SMTP Anda";
 $ mail-> Host = "Host SMTP Anda";
 $ mail-> Mailer = "smtp";
 $ mail-> SetFrom ($ _ POST ["userEmail"], $ _POST ["userName"]);
 $ mail-> AddReplyTo ($ _ POST ["userEmail"], $ _POST ["userName"]);
 $ mail-> AddAddress ("alamat penerima"); 
 $ mail-> Subject = $ _POST ["subject"];
 $ mail-> WordWrap = 80;
 $ mail-> MsgHTML ($ _ POST ["content"]);

 $ mail-> IsHTML (true);

 if (! $ mail-> Send ()) {
  echo "<p class = 'error'> Masalah dalam Mengirim Surat. </ p>";
 } lain {
  echo "<p class = 'success'> Surat Kontak Dikirim. </ p>";
 } 
 ?>

Output Kontak Bentuk Responsif

Di bagian ini, saya telah menunjukkan bentuk kontak responsif untuk tampilan seluler dan desktop.

Formulir Kontak di Tampilan Seluler

Formulir Kontak di Tampilan Desktop

lihat demo unduh

Tutorial kode PHP ini diterbitkan pada 8 Januari 2018.