05-23-2022, 11:49 PM
How to Create WooCommerce Product Enquiry Form using Custom Plugin
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/05/how-to-create-woocommerce-product-enquiry-form-using-custom-plugin.jpg" width="550" height="622" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 23rd, 2022.</div>
<p>In the last article I wrote about setting up a WooCommerce product enquiry form using existing third-party plugins. There are many WordPress plugins for having an enquiry form on a WordPress site.</p>
<p>As a developer we can build a WooCommerce product enquiry form custom plugin easily. It will be lightweight, good for enhancement and maintenance, above all fun too.</p>
<p>The 3-party plugins give a massive package with voluminous functionalities and features. They have form builders, email template builders and all.</p>
<p>For having an enquiry form with a few fields, it can be customized simply without third party bundles. It helps to have a tiny and self-manageable code which is best.</p>
<p>If you want to know <a href="https://phppot.com/wordpress/woocommerce-contact-form/">how to create a WooCommerce contact form with 3-party plugins</a>, see my last article linked.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17059" src="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-embed-550x622.jpg" alt="woocommerce contact form embed" width="550" height="622" srcset="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-embed-550x622.jpg 550w, https://phppot.com/wp-content/uploads/20...65x300.jpg 265w, https://phppot.com/wp-content/uploads/20...68x868.jpg 768w, https://phppot.com/wp-content/uploads/20...-embed.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Steps to create a WooCommerce product enquiry form plugin</h2>
<ol>
<li>Create a contact form plugin directory and file.</li>
<li>Design a WooCommerce product enquiry form template.</li>
<li>Create the CSS and JavaScript assets of a plugin.</li>
<li>Load the form templates into the page content.</li>
<li>Enqueue the <a href="https://phppot.com/wordpress/how-to-install-a-wordpress-plugin-for-beginners/">WordPress plugin</a> assets.</li>
<li>Send product enquiry via WordPress AJAX on form submit.</li>
<li>Hook wp_ajax to send product enquiry mail.</li>
</ol>
<h2>Create a contact form plugin directory and file</h2>
<p>Create a directory named “woocommerce-contact-form” in the WordPress plugin directory.</p>
<p><code><wordpress-application-root>/wp-content/plugins/<br /></code></p>
<p>Then, create a file woocommerce-contact-form.php into it with the following plugin <a href="https://phppot.com/php/php-header/">header</a>. The header must have the plugin name, URI, author and more details.</p>
<pre class="prettyprint"><code class="language-php">
/* Plugin Name: WooCommerce Contact Form Plugin URI: https://phppot.com Description: A simple custom enquiry form plugin to a WooCommerce site. It has name, email and message fields to collect data from the customers. Version: 1.0 Author: Vincy Author URI: https://phppot.com */
</code></pre>
<h2>Design WooCommerce product enquiry form</h2>
<p>Create a template file inside the plugin directory as <code><woocommerce-contact-form>/templates/contact-form.php</code>.</p>
<p>Put this HTML into the file to <a href="https://phppot.com/php/php-contact-form-with-google-recaptcha/">display a contact form</a> with Name, Email and Message fields.</p>
<p>This <a href="https://phppot.com/wordpress/how-to-create-wordpress-custom-page-template/">template file</a> is loaded into the product page using a WordPress filter hook via this plugin.</p>
<pre class="prettyprint"><code class="language-html">
<h3>Product enquiry</h3>
<div id="woocommerce-contact-form"> <form method="post" id="frmContactForm" action=""> <div class="display-flex"> <input name="customer_name" id="customer_name" placeholder="Name" /><input name="customer_email" id="customer_email" placeholder="Email" /> </div> <div> <textarea name="customer_message" id="customer_message" placeholder="Enquire seller about order, product.."></textarea> </div> <div> <input type="submit" name="send_mail" class="btn-send" value="Send Enquiry" /> </div> <div id="response"></div> </form>
</div>
</code></pre>
<h2>Create plugin assets</h2>
<p>This plugin uses simple CSS and JavaScript assets. The CSS provides minimal styles to make the enquiry form suit any <a href="https://phppot.com/wordpress/ecommerce-website-set-up-using-wordpress-woocommerce/">shop theme</a>.</p>
<p>If you want to change this WooCommerce product enquiry form theme, this CSS file will be useful.</p>
<pre class="prettyprint"><code class="language-css">
#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>
<h3>JavaScript enquiry form validation and submission via AJAX</h3>
<p>This script uses jQuery to <a href="https://phppot.com/jquery/jquery-form-validation-with-tooltip/">handle form validation</a> and submit the posted data via AJAX.</p>
<p>All the fields are required to be entered to send the product enquiry from the WooCommerce page.</p>
<p>Once the conditions return true, then the<a href="https://phppot.com/jquery/inline-insert-using-jquery-ajax/"> jQuery AJAX</a> will serialize the form data and post it to the server.</p>
<p>All client-side and server-side responses are sent to UI using jQuery <em>.text()</em>.</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>
<p>The AJAX script points to a URL that is mapped with the wp_ajax endpoint via .htaccess.</p>
<p>The send_contact_email action param hooks the wp_ajax action filter in the plugin file.</p>
<p><code><br /># BEGIN Shop<br /><IfModule mod_rewrite.c><br />RewriteRule send-contact-email/ /wordpress/wp-admin/admin-ajax.php?action=send_contact_email [L,QSA]<br /></IfModule><br /># END Shop<br /></code></p>
<h2>WooCommerce product enquiry form plugin file</h2>
<p>This is the main file that hooks the required action and filter callback of WordPress. These callbacks are to do the following by activating this plugin.</p>
<ol>
<li>Load the contact form template using ‘the_content’ filter hook.</li>
<li>Enqueue the form.css and form.js files created for this WooCommerce product enquiry form. (Also enqueued the jQuery CDN path).</li>
<li>Hook the <code class="language-php">wp_ajax_nopriv_*</code> to execute the <code class="language-php">send_contact_email</code> callback by listening the AJAX request.</li>
</ol>
<p>The <code class="language-php">load_contact_form</code> function reads the template content by using <a href="https://phppot.com/php/php-file_get_contents/">PHP file_get_contents()</a> function. It appends the content to the page content on a condition basic.</p>
<p>Before adding the WooCommerce product enquiry form it checks if it is a product page. If so, <em>is_product()</em> returns boolean <em>true</em>.</p>
<pre class="prettyprint"><code class="language-php">
<?php function load_contact_form($contactHTML) { // Load the contact form on a single product page if ( is_product() ){ $template_path = plugin_dir_path( __FILE__ ) . '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('contact-form-style', plugin_dir_url( __FILE__ ) . 'assets/form.css', array(), null); wp_enqueue_script('contact-form-jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null); wp_enqueue_script('contact-form-script', plugin_dir_url( __FILE__ ) . 'assets/form.js', array(), null); }
}
add_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles'); </code></pre>
<h3>Hook wp_ajax action with the contact email sending callback</h3>
<p>The below code is part of the <em>woocommerce_contact_form.php</em> plugin file. It defines a callback <code class="language-php">send_contact_email()</code>.</p>
<p>The WooComerce product enquiry form plugin has the action and filter callbacks. It is called when it receives the wp_ajax request from the following URL.</p>
<p><code>/wordpress/wp-admin/admin-ajax.php?action=send_contact_email</code>.</p>
<p>It builds the wp_mail() parameters to send the product enquiry to the shop admin or seller. The <em>$to</em> holds the recipient’s address.</p>
<p>It builds the mail body with the data posted via the WooCommerce product enquiry form.</p>
<p>Using wp_mail() is a simple way of sending email via WordPress. It is as similar to <a href="https://phppot.com/php/php-mail/">PHP mail</a> as it has a one-line code for sending emails. You may <a href="https://help.dreamhost.com/hc/en-us/articles/215526937-Configuring-the-WP-Mail-SMTP-plugin" target="_blank" rel="noopener">configure SMTP to send email</a> via WordPress.</p>
<pre class="prettyprint"><code class="language-php"> 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 = '[email protected]'; $subject = 'Product enquiry'; $body = 'The customer details: <br/><br/>'; if(!empty($customerName)) { $body = 'Customer Name:' . $customerName . '<br/>'; $body .= 'Customer Email:' . $customerEmail . '<br/>'; $body .= 'Customer Message:' . '<br/>'; $body .= $customerMessage . '<br/>'; } $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>WooCommence product page with contact form</h2>
<p>With all prerequisites and complete coding of the custom plugin, it’s time to enable it.</p>
<p>Go to WordPress admin and navigate via <em>Plugins->Installed Plugins</em> using the left menu.</p>
<p>You may see the ‘WooCommerce Contact Form’ plugin in the installed list. Activate the plugin and visit the product page of the shop.</p>
<p>See the screenshot shown at the beginning of the article. It displays the WooCommerce product enquiry form on a product page.</p>
<h2>Conclusion</h2>
<p>Thus, we have created a plugin for a WooCommerce product enquiry form with simple code. If you want any customization with this plugin, please let me know in the comments section.</p>
<p>Let us see the other methods of displaying a contact form on a WooCommerce site in the upcoming article.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/woocommerce-product-enquiry-form/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/05/...om-plugin/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/05/how-to-create-woocommerce-product-enquiry-form-using-custom-plugin.jpg" width="550" height="622" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 23rd, 2022.</div>
<p>In the last article I wrote about setting up a WooCommerce product enquiry form using existing third-party plugins. There are many WordPress plugins for having an enquiry form on a WordPress site.</p>
<p>As a developer we can build a WooCommerce product enquiry form custom plugin easily. It will be lightweight, good for enhancement and maintenance, above all fun too.</p>
<p>The 3-party plugins give a massive package with voluminous functionalities and features. They have form builders, email template builders and all.</p>
<p>For having an enquiry form with a few fields, it can be customized simply without third party bundles. It helps to have a tiny and self-manageable code which is best.</p>
<p>If you want to know <a href="https://phppot.com/wordpress/woocommerce-contact-form/">how to create a WooCommerce contact form with 3-party plugins</a>, see my last article linked.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17059" src="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-embed-550x622.jpg" alt="woocommerce contact form embed" width="550" height="622" srcset="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-embed-550x622.jpg 550w, https://phppot.com/wp-content/uploads/20...65x300.jpg 265w, https://phppot.com/wp-content/uploads/20...68x868.jpg 768w, https://phppot.com/wp-content/uploads/20...-embed.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Steps to create a WooCommerce product enquiry form plugin</h2>
<ol>
<li>Create a contact form plugin directory and file.</li>
<li>Design a WooCommerce product enquiry form template.</li>
<li>Create the CSS and JavaScript assets of a plugin.</li>
<li>Load the form templates into the page content.</li>
<li>Enqueue the <a href="https://phppot.com/wordpress/how-to-install-a-wordpress-plugin-for-beginners/">WordPress plugin</a> assets.</li>
<li>Send product enquiry via WordPress AJAX on form submit.</li>
<li>Hook wp_ajax to send product enquiry mail.</li>
</ol>
<h2>Create a contact form plugin directory and file</h2>
<p>Create a directory named “woocommerce-contact-form” in the WordPress plugin directory.</p>
<p><code><wordpress-application-root>/wp-content/plugins/<br /></code></p>
<p>Then, create a file woocommerce-contact-form.php into it with the following plugin <a href="https://phppot.com/php/php-header/">header</a>. The header must have the plugin name, URI, author and more details.</p>
<pre class="prettyprint"><code class="language-php">
/* Plugin Name: WooCommerce Contact Form Plugin URI: https://phppot.com Description: A simple custom enquiry form plugin to a WooCommerce site. It has name, email and message fields to collect data from the customers. Version: 1.0 Author: Vincy Author URI: https://phppot.com */
</code></pre>
<h2>Design WooCommerce product enquiry form</h2>
<p>Create a template file inside the plugin directory as <code><woocommerce-contact-form>/templates/contact-form.php</code>.</p>
<p>Put this HTML into the file to <a href="https://phppot.com/php/php-contact-form-with-google-recaptcha/">display a contact form</a> with Name, Email and Message fields.</p>
<p>This <a href="https://phppot.com/wordpress/how-to-create-wordpress-custom-page-template/">template file</a> is loaded into the product page using a WordPress filter hook via this plugin.</p>
<pre class="prettyprint"><code class="language-html">
<h3>Product enquiry</h3>
<div id="woocommerce-contact-form"> <form method="post" id="frmContactForm" action=""> <div class="display-flex"> <input name="customer_name" id="customer_name" placeholder="Name" /><input name="customer_email" id="customer_email" placeholder="Email" /> </div> <div> <textarea name="customer_message" id="customer_message" placeholder="Enquire seller about order, product.."></textarea> </div> <div> <input type="submit" name="send_mail" class="btn-send" value="Send Enquiry" /> </div> <div id="response"></div> </form>
</div>
</code></pre>
<h2>Create plugin assets</h2>
<p>This plugin uses simple CSS and JavaScript assets. The CSS provides minimal styles to make the enquiry form suit any <a href="https://phppot.com/wordpress/ecommerce-website-set-up-using-wordpress-woocommerce/">shop theme</a>.</p>
<p>If you want to change this WooCommerce product enquiry form theme, this CSS file will be useful.</p>
<pre class="prettyprint"><code class="language-css">
#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>
<h3>JavaScript enquiry form validation and submission via AJAX</h3>
<p>This script uses jQuery to <a href="https://phppot.com/jquery/jquery-form-validation-with-tooltip/">handle form validation</a> and submit the posted data via AJAX.</p>
<p>All the fields are required to be entered to send the product enquiry from the WooCommerce page.</p>
<p>Once the conditions return true, then the<a href="https://phppot.com/jquery/inline-insert-using-jquery-ajax/"> jQuery AJAX</a> will serialize the form data and post it to the server.</p>
<p>All client-side and server-side responses are sent to UI using jQuery <em>.text()</em>.</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>
<p>The AJAX script points to a URL that is mapped with the wp_ajax endpoint via .htaccess.</p>
<p>The send_contact_email action param hooks the wp_ajax action filter in the plugin file.</p>
<p><code><br /># BEGIN Shop<br /><IfModule mod_rewrite.c><br />RewriteRule send-contact-email/ /wordpress/wp-admin/admin-ajax.php?action=send_contact_email [L,QSA]<br /></IfModule><br /># END Shop<br /></code></p>
<h2>WooCommerce product enquiry form plugin file</h2>
<p>This is the main file that hooks the required action and filter callback of WordPress. These callbacks are to do the following by activating this plugin.</p>
<ol>
<li>Load the contact form template using ‘the_content’ filter hook.</li>
<li>Enqueue the form.css and form.js files created for this WooCommerce product enquiry form. (Also enqueued the jQuery CDN path).</li>
<li>Hook the <code class="language-php">wp_ajax_nopriv_*</code> to execute the <code class="language-php">send_contact_email</code> callback by listening the AJAX request.</li>
</ol>
<p>The <code class="language-php">load_contact_form</code> function reads the template content by using <a href="https://phppot.com/php/php-file_get_contents/">PHP file_get_contents()</a> function. It appends the content to the page content on a condition basic.</p>
<p>Before adding the WooCommerce product enquiry form it checks if it is a product page. If so, <em>is_product()</em> returns boolean <em>true</em>.</p>
<pre class="prettyprint"><code class="language-php">
<?php function load_contact_form($contactHTML) { // Load the contact form on a single product page if ( is_product() ){ $template_path = plugin_dir_path( __FILE__ ) . '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('contact-form-style', plugin_dir_url( __FILE__ ) . 'assets/form.css', array(), null); wp_enqueue_script('contact-form-jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null); wp_enqueue_script('contact-form-script', plugin_dir_url( __FILE__ ) . 'assets/form.js', array(), null); }
}
add_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles'); </code></pre>
<h3>Hook wp_ajax action with the contact email sending callback</h3>
<p>The below code is part of the <em>woocommerce_contact_form.php</em> plugin file. It defines a callback <code class="language-php">send_contact_email()</code>.</p>
<p>The WooComerce product enquiry form plugin has the action and filter callbacks. It is called when it receives the wp_ajax request from the following URL.</p>
<p><code>/wordpress/wp-admin/admin-ajax.php?action=send_contact_email</code>.</p>
<p>It builds the wp_mail() parameters to send the product enquiry to the shop admin or seller. The <em>$to</em> holds the recipient’s address.</p>
<p>It builds the mail body with the data posted via the WooCommerce product enquiry form.</p>
<p>Using wp_mail() is a simple way of sending email via WordPress. It is as similar to <a href="https://phppot.com/php/php-mail/">PHP mail</a> as it has a one-line code for sending emails. You may <a href="https://help.dreamhost.com/hc/en-us/articles/215526937-Configuring-the-WP-Mail-SMTP-plugin" target="_blank" rel="noopener">configure SMTP to send email</a> via WordPress.</p>
<pre class="prettyprint"><code class="language-php"> 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 = '[email protected]'; $subject = 'Product enquiry'; $body = 'The customer details: <br/><br/>'; if(!empty($customerName)) { $body = 'Customer Name:' . $customerName . '<br/>'; $body .= 'Customer Email:' . $customerEmail . '<br/>'; $body .= 'Customer Message:' . '<br/>'; $body .= $customerMessage . '<br/>'; } $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>WooCommence product page with contact form</h2>
<p>With all prerequisites and complete coding of the custom plugin, it’s time to enable it.</p>
<p>Go to WordPress admin and navigate via <em>Plugins->Installed Plugins</em> using the left menu.</p>
<p>You may see the ‘WooCommerce Contact Form’ plugin in the installed list. Activate the plugin and visit the product page of the shop.</p>
<p>See the screenshot shown at the beginning of the article. It displays the WooCommerce product enquiry form on a product page.</p>
<h2>Conclusion</h2>
<p>Thus, we have created a plugin for a WooCommerce product enquiry form with simple code. If you want any customization with this plugin, please let me know in the comments section.</p>
<p>Let us see the other methods of displaying a contact form on a WooCommerce site in the upcoming article.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/woocommerce-product-enquiry-form/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/05/...om-plugin/