[Tut] Create WooCommerce WordPress Contact Form Without Plugin

Create WooCommerce WordPress Contact Form Without Plugin

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/05/create-woocommerce-wordpress-contact-form-without-plugin.jpg" width="550" height="368" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 26th, 2022.</div>
<p>Creating a WordPress contact form without plugins is easy. In the last two articles, we have seen how to build a WooCommerce contact form with the use of plugins.</p>
<p>Plugins are the right placeholders for having add-on features to a WordPress website. And they have global references that enable/disable the add-ons with configurable directives.</p>
<p>We have already seen the <a href="https://phppot.com/wordpress/woocommerce-contact-form/">existing plugins for creating the WordPress contact form</a>. Also, we have learned how to create a custom plugin to achieve the same.</p>
<p>Though WordPress plugins are systematic solutions, beginners may prefer an easy way. When I was a beginner, I felt it difficult to understand WordPress plugins initially.</p>
<p>This article is for displaying the WordPress <a href="https://phppot.com/php/php-contact-form/">contact form</a> without plugins on a product page. It uses the function.php file of the active <a href="https://phppot.com/wordpress/how-to-create-a-minimal-wordpress-theme/">WordPress theme</a>.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17133" src="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-without-plugin-550x368.jpg" alt width="550" height="368" srcset="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-without-plugin-550x368.jpg 550w, https://phppot.com/wp-content/uploads/20...00x201.jpg 300w, https://phppot.com/wp-content/uploads/20...68x513.jpg 768w, https://phppot.com/wp-content/uploads/20...plugin.jpg 920w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Steps to create WordPress contact form without plugin</h2>
<p>Creating a WordPress <a href="https://phppot.com/php/how-to-create-a-contact-form-in-wordpress/">contact form</a> without plugins is simple only with 3 steps. These steps render the contact form on the WordPress shop and enable mail sending. The simplicity and the less code are the main advantages of this example.</p>
<ol>
<li>Create a child theme for the active WordPress theme. Then, have a copy of the parent theme assets be overridden.</li>
<li>Put the contact form HTML, CSS and JavaScript into the child theme.</li>
<li>Hook WordPress action/filter hooks from functions.php. It is to enable the WordPress contact form without plugin.</li>
</ol>
<h2>Step 1: Create a WordPress child theme to have contact form files</h2>
<p>The functions.php is the right place to initiate <a href="https://phppot.com/wordpress/disabling-wordpress-search-feature-without-plugin/">WordPress actions without a plugin</a>. In this example, the WordPress contact two major actions are initiated via this file.</p>
<ol>
<li>Form rendering by loading the templates and assets.</li>
<li>Mail sending on listening WordPress AJAX request.</li>
</ol>
<p>The functions.php file is in the WordPress theme directory. <a href="https://phppot.com/wordpress/wordpress-child-theme-template/">Having a child theme</a> is a good practice, instead of changing the parent theme files.</p>
<p>Step 1 shows the file structure of the child theme directory. It contains the contact form HTML with “templates” directory. And also, it contains the cloned files functions.php and style.css.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17181" src="https://phppot.com/wp-content/uploads/2022/05/wordpress-contact-form-theme-files.jpg" alt="WordPress Contact Form Theme Files" width="170" height="129"></p>
<p>The style.css has the WordPress contact form styles with the standard style sheet header. And the CSS header includes the following.</p>
<ul>
<li>A unique “Theme&nbsp; Name”.</li>
<li>Parent theme reference with “Template” information.</li>
<li>Template URI and etc.</li>
</ul>
<pre class="prettyprint"><code class="language-css">
/* Theme Name: Twenty Twenty-Two Child Theme URI: https://phppot.com/twentytwentytwo-child/ Description: Twenty Twenty-Two Child Theme Author: Vincy Author URI: https://phppot.com Template: twentytwentytwo Version: 1.0.0 Tags: contact-form, enquiry-form, product-enquiry Text Domain: twentytwentytwo-child
*/ #woocommerce-contact-form { width: 500px; border: #CCC 1px solid; padding: 25px 5px 25px 25px; border-radius: 3px;
} #woocommerce-contact-form input { border: #CCC 1px solid; width: 50%; padding: 10px; margin: 15px 20px 15px 0px; border-radius: 3px;
} #woocommerce-contact-form textarea { border: #CCC 1px solid; width: 96%; border-radius: 3px; box-sizing: border-box; padding: 10px; margin: 15px 20px 15px 0px;
} .display-flex { display: flex;
} #woocommerce-contact-form input.btn-send { color: #FFF; background: #232323; border-radius: 3px; border: #000 1px solid;
} #response { display: none;
}
</code></pre>
<h2>Step 2: Build WordPress contact form template HTML with JavaScript assets</h2>
<p>This section shows the WordPress contact form template file content. It includes the Name, Email and Message fields to collect from the customers.</p>
<p>It gives a minimal form and is adaptable for <a href="https://phppot.com/php/php-contact-form-with-custom-fields/">adding more fields</a> to the need of a WooCommerce shop.</p>
<pre class="prettyprint"><code class="language-html">
&lt;h3&gt;Product enquiry&lt;/h3&gt;
&lt;div id="woocommerce-contact-form"&gt; &lt;form method="post" id="frmContactForm" action=""&gt; &lt;div class="display-flex"&gt; &lt;input name="customer_name" id="customer_name" placeholder="Name" /&gt;&lt;input name="customer_email" id="customer_email" placeholder="Email" /&gt; &lt;/div&gt; &lt;div&gt; &lt;textarea name="customer_message" id="customer_message" placeholder="Enquire seller about order, product.."&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="submit" name="send_mail" class="btn-send" value="Send Enquiry" /&gt; &lt;/div&gt; &lt;div id="response"&gt;&lt;/div&gt; &lt;/form&gt;
&lt;/div&gt;
</code></pre>
<p>The JavaScript assets are not a huge bundle, but rather a single file with a single function. It simply <a href="https://phppot.com/php/bootstrap-contact-form-with-javascript-validation-and-php/">handles the form validation</a> to let all the fields be mandatory.</p>
<p>After validation, it calls the WordPress endpoint URL <a href="https://phppot.com/php/php-ajax-image-upload/">via AJAX</a>. This URL maps the WordPress AJAX endpoint URL by using a .htaccess rule.</p>
<pre class="prettyprint"><code class="language-javascript">
$(document).ready(function(e) { // WooCommerce product enquiry form submit event handler $("#frmContactForm").on('submit', function(e) { e.preventDefault(); var name = $('#customer_name').val(); var email = $('#customer_email').val(); var message = $('#customer_message').val(); // Validate all fields in client side if (email == "" || message == "" || name == "") { $("#response").show(); $("#response").text("All fields are required."); } else { $("#response").hide(); $('.btn-send').hide(); $('#loader-icon').show(); // Post form via wp-ajax $.ajax({ url: "/wordpress/send-contact-email/", type: "POST", data: $("#frmContactForm").serialize(), success: function(response) { $("#response").show(); $('#loader-icon').hide(); if (!response) { $('.btn-send').show(); $("#response").html("Problem occurred."); } else { $('.btn-send').hide(); $("#response").html("Thank you for your message.") }; }, error: function() { } }); } });
});
</code></pre>
<h2>Step 3: Hook WordPress filters and actions from functions.php</h2>
<p>The functions.php initiates the WordPress action/filter hooks with the callback functions. It is as similar as we did with the plugins.</p>
<p>It prefixed the WordPress template URI to load the contact form HTML and en-queue the scripts. It uses <code>get_stylesheet_directory_uri()</code>&nbsp;to get the child-theme directory path.</p>
<p>By using&nbsp; <code>get_template_directory_uri()</code> , it will refer to the parent theme directory path. Then, it will return 404 error on the developer console. It happens on loading the child theme templates and assets with the parent path.</p>
<p>It has three <a href="https://developer.wordpress.org/plugins/hooks/" target="_blank" rel="noopener">hooks</a> to enable the WordPress contact form without plugin on a WordPress store. Those are,</p>
<table class="tutorial-table">
<tbody readability="5">
<tr>
<th width="40%">Hook name</th>
<th width="10%">Type</th>
<th>Function</th>
</tr>
<tr readability="2">
<td>the_content</td>
<td>Filters</td>
<td>Receives the current page content and appends the WordPress contact form HTML into it.</td>
</tr>
<tr readability="3">
<td>wp_enqueue_scripts</td>
<td>Actions</td>
<td>Enqueues the child theme styles, validation script and jQuery library via CDN.</td>
</tr>
<tr readability="5">
<td>wp_ajax_nopriv_send_contact_email</td>
<td>Actions</td>
<td>Calls mail sending script by listening the request with the URL <em>wp-admin/admin-ajax.php?action=send_contact_email</em></td>
</tr>
</tbody>
</table>
<pre class="prettyprint"><code class="language-php">
&lt;?php function load_contact_form($contactHTML) { // Load the contact form on a single product page if ( is_product() ){ $template_path = get_stylesheet_directory_uri() . '/templates/contact-form.php'; $contactHTML .= file_get_contents( $template_path); } return $contactHTML; }
// add filter to hook 'the_content' with a plugin functions.
add_filter('the_content', 'load_contact_form'); /** * Enqueues scripts and styles for front end. * * @return void */
function woocommerce_contact_form_styles()
{ if (is_product()) { wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/style.css' ); wp_enqueue_script('contact-form-jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null); wp_enqueue_script('contact-form-script', get_stylesheet_directory_uri() . 'assets/js/form.js', array(), null); }
}
add_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles'); function send_contact_email()
{ $customerName = filter_var($_POST["customer_name"], FILTER_SANITIZE_STRING); $customerEmail = filter_var($_POST["customer_email"], FILTER_SANITIZE_STRING); $customerMessage = filter_var($_POST["customer_message"], FILTER_SANITIZE_STRING); $to = 'Recipient email here'; $subject = 'Product enquiry'; $body = 'The customer details: &lt;br/&gt;&lt;br/&gt;'; if(!empty($customerName)) { $body = 'Customer Name:' . $customerName . '&lt;br/&gt;'; $body .= 'Customer Email:' . $customerEmail . '&lt;br/&gt;'; $body .= 'Customer Message:' . '&lt;br/&gt;'; $body .= $customerMessage . '&lt;br/&gt;'; } $headers = array('Content-Type: text/html; charset=UTF-8'); $emailSent = wp_mail( $to, $subject, $body, $headers ); print $emailSent; exit;
}
add_action("wp_ajax_nopriv_send_contact_email", "send_contact_email"); </code></pre>
<h2>Conclusion</h2>
<p>Thus, we have created a WordPress contact form without any 3rd-party or custom plugins. We have seen how to hook the WordPress filter callbacks. It helped to make the changes in WordPress core behavior.</p>
<p>The hooks made changes to the product page of the shop. It <a href="https://phppot.com/jquery/jquery-apend/">appends</a> a WordPress contact form without plugin using the functions.php file.</p>
<p>The child theme via implementation will give you an idea to repeat the same for any components. For example, member <a href="https://phppot.com/php/double-opt-in-subscription-form-with-secure-hash-using-php/">subscription form</a>, social share and more components.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/wordpress-contact-form-without-plugin/#top" class="top">↑ Back to Top</a> </p>
</div>


https://www.sickgaming.net/blog/2022/05/...ut-plugin/