Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Responsive Form Contact dengan PHP. Form kontak responsif dirancang agar sesuai dengan berbagai tampilan dengan lebar yang berbeda. Saya menggunakan media queri CSS untuk merancang formulir kontak responsif ini. Dalam contoh ini, form kontak responsif memiliki field Name, Email, Phone dan Message. Fieldsets ini dirancang untuk dilihat secara responsif berdasarkan tampilan. Dengan menggunakan media queri , saya menetapkan wilayah ukuran jendela untuk mengubah gaya fieldset.
Di bawah ini saya sudah membuat script HTML form contact responsive. Selain itu, saya telah memberikan media query CSS yang digunakan untuk membuat form kontak menjadi responsive di semua port tampilan.
dibawah ini script HTML nya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<form id="frmContact" action="" method="post"> <div id="mail-status"></div> <div class="contact-row column-right"> <label style="padding-top: 20px;">Name</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="contact-row"> <label>Phone</label> <span id="subject-info" class="info"></span><br /> <input type="text" name="subject" id="subject" class="demoInputBox"> </div> <div> <label>Message</label> <span id="content-info" class="info"></span><br /> <textarea name="content" id="content" class="demoInputBox" rows="3"></textarea> </div> <div> <input type="submit" value="Send" class="btnAction" /> </div> </form> <div id="loader-icon" style="display: none;"> <img src="LoaderIcon.gif" /> </div> |
Oke kalau sudah kita akan membuat file CSS untuk membuat tampilan form jadi responsive, di sini kita akan menggunakan media query CSS agar form kontak yang kita bikin bisa responsive di semua tampilan, berikut script CSS-nya;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
body { max-width: 550px; font-family: Arial; } #frmContact { border-top: #a2d0c8 2px solid; background: #b1e2da; padding: 10px; } #frmContact div { margin-bottom: 20px; } #frmContact div label { margin: 5px 0px 0px 5px; color: #49615d; } .demoInputBox { padding: 10px; border: #a5d2ca 1px solid; border-radius: 4px; background-color: #FFF; width: 100%; margin-top:5px; } .error { background-color: #FF6600; padding: 8px 10px; color: #FFFFFF; border-radius: 4px; font-size: 0.9em; } .success { background-color: #c3c791; padding: 8px 10px; color: #FFFFFF; border-radius: 4px; font-size: 0.9em; } .info { font-size: .8em; color: #FF6600; letter-spacing: 2px; padding-left: 5px; } .btnAction { background-color: #82a9a2; padding: 10px 40px; color: #FFF; border: #739690 1px solid; border-radius: 4px; } .btnAction:focus { outline:none; } .column-right { margin-right: 6px; } .contact-row { display: inline-block; width: 32%; } @media all and (max-width: 550px) { .contact-row { display: block; width: 100%; } } |
Oke kalau sudah kita akan Memanggil Script Mail PHP via jQuery AJAX.
Dalam contoh ini, saya telah menggunakan jQuery AJAX untuk memanggil skrip email PHP untuk mengirim email kontak menggunakan Gmail SMTP. silahkan teman – teman lihat di bawah ini;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php require('phpmailer/class.phpmailer.php'); $mail = new PHPMailer(); $mail->IsSMTP(); $mail->SMTPDebug = 0; $mail->SMTPAuth = TRUE; $mail->SMTPSecure = "tls"; $mail->Port = 587; $mail->Username = "Your SMTP UserName"; $mail->Password = "Your SMTP Password"; $mail->Host = "Your SMTP Host"; $mail->Mailer = "smtp"; $mail->SetFrom($_POST["userEmail"], $_POST["userName"]); $mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]); $mail->AddAddress("recipient address"); $mail->Subject = $_POST["subject"]; $mail->WordWrap = 80; $mail->MsgHTML($_POST["content"]); $mail->IsHTML(true); if(!$mail->Send()) { echo "<p class='error'>Problem in Sending Mail.</p>"; } else { echo "<p class='success'>Contact Mail Sent.</p>"; } ?> |
Oke itulah tadi pembahasan saya tentang Cara Membuat Responsive Form Contact dengan PHP, semoga bermanfaat.