Create a WordPress Contact Form Without Plugin using php

Create a WordPress Contact Form Without Plugin using php

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