Jurnalnote Kehidupan tidak akan menjadi lebih baik karena sebuah kesempatan, kehidupan akan selalu menjadi lebih baik karena keberanian untuk mengambil tindakan di setiap kesempatan.

Membuat Contact Form Pada WordPress Tanpa Plugin

14 min read

Penggunaan penambahan Contact Form pada Wordpres sangat disarankan sebagai salah satu syarat kelengkapan di Blog, ada banyak cara untuk memasangnya, salah satunya adalah di WordPress. Untuk Postingan kali ini akan membahas Cara Membuat Contact Form di WordPress Tanpa menggunakan Plugin dari WordPress itu sendiri alias kita buat secara manual melalui penambahan kode-kode script.

Sebenarnya untuk Platform WordPress sendiri sudah tersedia Pluginnya seperti contact form 7 yang disediakan melalui plugin WordPress, namun bagi mereka yang tidak suka menggunakan cara simple dengan menginstal plugin tersebut dapat menggunakan cara manual, memang saya akui dengan kita memasang Plugin di WordPress tentu akan menambah beban load blog kita dan sangat mempengaruhi kecepatan loadingnya. Sebelum memulai membuatnya hal yang harus diperhatikan adalah wajib menggunakan hosting sendiri karena cara ini menggunakan kode php.

Nah bagaimana Cara Membuat Contact Form di WordPress Tanpa Plugin, bagi sobat yang tertarik silahkan simak dan ikuti langkah-langkahnya.

Langkah Pertama
Silahkan salin kode php berikut untuk page (page.php) di salin terlebih dahulu ke notepad karena theme mungkin beda-beda.

Langkah Kedua
Silahkan sobat salin kode <?php the_content (); ?> yang berasal dari kode page.php yang sebelumnya sudah sobat copy ke notepad menggunakan kode dibawah ini

<code class="hljs xml"><span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-comment">/*
Template Name: Contact Us
*/</span>
<span class="hljs-keyword">if</span>($_POST[sent]){
 $error = <span class="hljs-string">""</span>;
 <span class="hljs-keyword">if</span>(!trim($_POST[your_name])){
 $error .= <span class="hljs-string">"<p>Please enter your name</p>"</span>;
 }
 <span class="hljs-keyword">if</span>(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
 $error .= <span class="hljs-string">"<p>Please enter a valid email address</p>"</span>;
 }
 <span class="hljs-keyword">if</span>(!trim($_POST[your_message])){
 $error .= <span class="hljs-string">"<p>Please enter a message</p>"</span>;
 }
 <span class="hljs-keyword">if</span>(!$error){
 $email = wp_mail(get_option(<span class="hljs-string">"admin_email"</span>),trim($_POST[your_name]).<span class="hljs-string">" sent you a message from "</span>.get_option(<span class="hljs-string">"blogname"</span>),stripslashes(trim($_POST[your_message])),<span class="hljs-string">"From: "</span>.trim($_POST[your_name]).<span class="hljs-string">" <"</span>.trim($_POST[your_email]).<span class="hljs-string">">\r\nReply-To:"</span>.trim($_POST[your_email]));
 }
}
<span class="hljs-meta">?></span></span>
 <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span>($email){ <span class="hljs-meta">?></span></span>
 <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Message succesfully sent. I'll reply as soon as I can<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
 <span class="php"><span class="hljs-meta"><?php</span> } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">if</span>($error) { <span class="hljs-meta">?></span></span>
 <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Your messange hasn't been sent<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>
 <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> $error; <span class="hljs-meta">?></span></span>
 <span class="php"><span class="hljs-meta"><?php</span> } <span class="hljs-keyword">else</span> { the_content(); } <span class="hljs-meta">?></span></span>
 <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"<?php the_permalink(); ?>"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"contact_me"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sent"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> /></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"form"</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lebel"</span>></span>Your Name (required)<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-field"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"your_name"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"your_name"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"<?php echo $_POST[your_name];?>"</span> /></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lebel"</span>></span>Your Email (required)<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-field"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"your_email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"your_email"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"<?php echo $_POST[your_email];?>"</span> /></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lebel"</span>></span>Subject<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-field"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"your_subject"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"your_subject"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"<?php echo $_POST[your_subject];?>"</span> /></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lebel"</span>></span>Your Message(required)<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-field"</span>></span><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"your_message"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"your_message"</span>></span><span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> stripslashes($_POST[your_message]); <span class="hljs-meta">?></span></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lebel"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-field-send"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span> = <span class="hljs-string">"send"</span> <span class="hljs-attr">value</span> = <span class="hljs-string">"Send email"</span> /></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
 <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
 <span class="php"><span class="hljs-meta"><?php</span> } <span class="hljs-meta">?>

Langkah Ketiga
Silahkan sobat masuk ke Cpanel hostingnya > Public_html wp-content > themes > pilih theme yang sobat gunakan kemudian silahkan buat file php baru kasih nama filenya contact-us.php lalu paste semua kode yang ada di notepad tadi (lihat langkah 1 dan 2).

Langkah Ke Empat
Silahkan sobat buat page baru pada dashboard wordpress isi title page “Contact Us”. Selanjutnya begitu juga pada bagian Page Attributes di template tersebut, sebagai gambaran lihat contoh gambar dibawah ini.

Setelah itu klik Publish page yang sudah dibuat tadi, untuk memastikan page tersebut sudah jalan atau belum silahkan cek url-nya.

Langkah Ke Lima
Tampilan page contact form tersebut masih belum rapih untuk itu kita rapihkan dengan menggunakan atau menambahkan kode css berikut tepat di Style.css.

<code class="hljs css"><span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span> {<span class="hljs-attribute">line-height</span>: <span class="hljs-number">20px</span>;<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#e2e2e2</span>;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0</span>;}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=text]</span>,<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">textarea</span> {<span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>;<span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#ddd</span>;<span class="hljs-attribute">color</span>: <span class="hljs-number">#777</span>;<span class="hljs-attribute">display</span>: block;<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">outline</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">padding</span>: <span class="hljs-number">7px</span> <span class="hljs-number">8px</span>;<span class="hljs-attribute">-moz-box-sizing</span>: border-box;<span class="hljs-attribute">-webkit-box-sizing</span>: border-box;<span class="hljs-attribute">box-sizing</span>: border-box;}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-class">.input-field-send</span>{<span class="hljs-attribute">margin-top</span>:<span class="hljs-number">30px</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-class">.lebel</span>{<span class="hljs-attribute">margin-top</span>:<span class="hljs-number">10px</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">textarea</span>{<span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=submit]</span>{<span class="hljs-attribute">background</span>:<span class="hljs-number">#e8554e</span>;<span class="hljs-attribute">color</span>:<span class="hljs-number">#fff</span>;<span class="hljs-attribute">padding</span>:<span class="hljs-number">8px</span> <span class="hljs-number">14px</span>;<span class="hljs-attribute">font-weight</span>:<span class="hljs-number">600</span>;<span class="hljs-attribute">display</span>:inline-block;<span class="hljs-attribute">border</span>:none;<span class="hljs-attribute">cursor</span>:pointer;<span class="hljs-attribute">-webkit-border-radius</span>:<span class="hljs-number">3px</span>;<span class="hljs-attribute">border-radius</span>:<span class="hljs-number">3px</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=submit]</span><span class="hljs-selector-pseudo">:hover</span>{<span class="hljs-attribute">background</span>:<span class="hljs-number">#444</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=submit]</span><span class="hljs-selector-pseudo">:active</span>,<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=submit]</span><span class="hljs-selector-pseudo">:focus</span>{<span class="hljs-attribute">outline</span>:none}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=text]</span><span class="hljs-selector-pseudo">:focus</span>,<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">textarea</span><span class="hljs-selector-pseudo">:focus</span>{<span class="hljs-attribute">outline</span>:<span class="hljs-number">0</span>;<span class="hljs-attribute">border-color</span>:<span class="hljs-number">#e8554e</span>}
<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">button</span>,<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">input</span>,<span class="hljs-selector-id">#contact_me</span> <span class="hljs-selector-tag">textarea</span>{<span class="hljs-attribute">-moz-appearance</span>:none;<span class="hljs-attribute">-webkit-appearance</span>:none;<span class="hljs-attribute">-moz-transition</span>:all .<span class="hljs-number">2s</span> ease;<span class="hljs-attribute">-webkit-transition</span>:all .<span class="hljs-number">2s</span> ease;<span class="hljs-attribute">transition</span>:all .<span class="hljs-number">2s</span> ease}

Perhatikan baik-baik penerapan kodenya agar tidak error dan Selesai sudah silahkan di coba contact form tersebut. Ada beberapa hal yang harus diketahui jika pada saat mencoba mengirimkan pesan melalui contact form tersebut dan pesan yang dikirimkan ke email hosting tidak diterima silahkan sobat hubungi penyedia hostingnya biasanya wp_mail masih tertutup belum diaktifkan, sebenarnya ini wajar sebagai upaya perlindungan dari hosting atas serangan malware. Saran saya silahkan sobat menggunakan plugin WP-Mail-SMTP.

Namun jika contact emailnya dihubungkan ke Gmail atau sejenisnya pastikan email addressnya berada di Dashboard > Setting > General di Gmail sobat.

Selamat mencobanya ya kawan.

Avatar
Jurnalnote Kehidupan tidak akan menjadi lebih baik karena sebuah kesempatan, kehidupan akan selalu menjadi lebih baik karena keberanian untuk mengambil tindakan di setiap kesempatan.

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss a story from us, get weekly updates in your inbox.