WORDPRESS CONTACT FORM WITHOUT PLUGINS

WordPress Contact Form without Plugins - Want to have a nice contact form for WordPress? Usually WordPress using a plugins to easily using a Contact Form's feature, it's nothing wrong with it. But here it is.. the faster loading for contact form and cleaner coding.

WORDPRESS CONTACT FORM WITHOUT PLUGINS

WORDPRESS CONTACT FORM CODING

1. PHP code for every WordPress's theme always different, so you must open your page (page.php) and copy-paste di Notepad.

2 Look for <?php the_content(); ?> code in your notepad, and replace with this:

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

</form>
<?php } ?>

WORDPRESS CONTACT-US.PHP

3. Save your Notepad with name contact-us and make sure to change the extension to *.php - So it would be "contact-us.php".

cPanel: http://www.your-domain.com/cpanel

Alternatif #1

Then open your cPanel ► public_html ► wp-content ► themes ► (Your Theme Name) ► Create new php file and named it to contact-us.php, and then paste all code that you have already edited before.

Alternatif #2

Then open your cPanel ► public_html ► wp-content ► themes ► (Your Theme Name) ► Upload your contact-us.php.

WORDPRESS DASHBOARD

4. Now go to WordPress's dashboard and make a new page (not a new post) with title "Contact Us". No need to input any text, just simply publish it. See the following picture:

WORDPRESS CONTACT FORM CSS

5. Add this CSS code on your Style.css.

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