When it comes to creating a WordPress contact form, you have a few options to choose from. One of the most popular options is to use a plugin to do this, but some need to know how to create a contact form without a plugin and that’s what I’m going to try to explain now.
What you need to know before starting a WordPress contact form
It is not difficult to do, remember that all you need to do is just three things to start receiving messages from your customers and visitors to your website
- Type the form code
- Call the form in Functions.php
- Call the form in your website anywhere you want with the short code.
First Step: Write the model code
Now go to your templates folder and make inside a new folder, name it Forms and inside Forms folder create a new file called contact-form.php
Paste the following code into the contact form
<h4>Contact Us</h4> <div id="success_message" class="alert alert-success "></div> <form id="enquiry"> <input type="hidden" name="subject" value="<?php the_title();?>" > <div class=" form-group row" > <div class="col" > <input type="text" name="name" class="form-control" placeholder=" Your Name " required="true"> </div> <div class="col" > <input type="email" name="email" class="form-control" placeholder="Your Email" required="true"> </div> </div> <div class="row" > <div class="col" > <textarea class="form-control" name=" message" id="exampleFormControlTextarea1" rows="3" required="true"> </textarea> </div> </div><br> <button type="submit" class="btn btn-primary btn-block" >Send Now</button> </form>
also we need to use some JQuery in our Form . here is the Code
<script > (function($){ $('#enquiry').submit(function(event){ event.preventDefault(); var endpoint ='<?php echo admin_url('admin-ajax.php');?>'; var form= $('#enquiry').serialize(); console.log(form); var formdata= new FormData; formdata.append ('action','enquiry'); formdata.append('enquiry', form); $.ajax(endpoint, { type:'POST', data:formdata, processData:false, contentType:false, success: function(res){ $('#enquiry').fadeOut(200); $('#success_message').text(' Thanks, We will get in touch with you soon as Possible ').show(); }, error:function(err){ } }) } ) } ) (jQuery) </script>
Step 2: Call the form in Functions.php
Just paste the following code into Functions.php and don’t forget to change your website name and email
add_action('wp_ajax_enquiry', 'enquiry_form'); add_action('wp_ajax_nopriv_enquiry', 'enquiry_form'); function enquiry_form() { $formdata =[]; wp_parse_str($_POST['enquiry'],$formdata); $admin_email=get_option('admin_email'); $headers[]='Content-Type: text/html; charset=UTF-8'; $headers[]='From: wpmrj3 <' . $admin_email . '>'; $headers[]='Replay-to:' .$formdata['email']; $headers[]='BCC:' .$formdata['write here your Email Adress']; $send_to =$admin_email; $subject ='From: ' .$formdata ['name ']; $message =''; foreach ($formdata as $index => $field ) { $message .= ' <strong> ' .$index . '</strong>:' . $field . '<br />'; } try { if(wp_mail($send_to , $subject, $message , $headers)) { wp_send_json_success('Thanks alot!'); } else { wp_send_json_error(' Something Went Wrong !'); } } catch ( Exception $e) { wp_send_json_error ($e->getMessage()); } wp_send_json_success ( $formdata ['name'] ); } //End of Forms
Third Step: Use the form in your website anywhere you want with the short code.
// Shortcodes function wpmrj3_contact_form_shortcode( $attr ) { ob_start(); get_template_part('forms/contact', 'form'); return ob_get_clean(); } add_shortcode( 'contact-form', 'wpmrj3_contact_form_shortcode' );
Now go to your website and paste the short code we made
[contact-form]
This is all the info about creating a wordpress contact form I think it’s not that hard to make.
And as always, whenever you want to ask me something, I’m happy to see it below in the comments