{"id":125084,"date":"2022-05-23T10:30:02","date_gmt":"2022-05-23T10:30:02","guid":{"rendered":"https:\/\/phppot.com\/?p=17054"},"modified":"2022-05-23T10:30:02","modified_gmt":"2022-05-23T10:30:02","slug":"how-to-create-woocommerce-product-enquiry-form-using-custom-plugin","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/05\/23\/how-to-create-woocommerce-product-enquiry-form-using-custom-plugin\/","title":{"rendered":"How to Create WooCommerce Product Enquiry Form using Custom Plugin"},"content":{"rendered":"
by Vincy<\/a>. Last modified on May 23rd, 2022.<\/div>\n

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>\n

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>\n

The 3-party plugins give a massive package with voluminous functionalities and features. They have form builders, email template builders and all.<\/p>\n

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>\n

If you want to know how to create a WooCommerce contact form with 3-party plugins<\/a>, see my last article linked.<\/p>\n

\"woocommerce<\/p>\n

Steps to create a WooCommerce product enquiry form plugin<\/h2>\n
    \n
  1. Create a contact form plugin directory and file.<\/li>\n
  2. Design a WooCommerce product enquiry form template.<\/li>\n
  3. Create the CSS and JavaScript assets of a plugin.<\/li>\n
  4. Load the form templates into the page content.<\/li>\n
  5. Enqueue the WordPress plugin<\/a> assets.<\/li>\n
  6. Send product enquiry via WordPress AJAX on form submit.<\/li>\n
  7. Hook wp_ajax to send product enquiry mail.<\/li>\n<\/ol>\n

    Create a contact form plugin directory and file<\/h2>\n

    Create a directory named \u201cwoocommerce-contact-form\u201d in the WordPress plugin directory.<\/p>\n

    <wordpress-application-root>\/wp-content\/plugins\/
    <\/code><\/p>\n

    Then, create a file woocommerce-contact-form.php into it with the following plugin header<\/a>. The header must have the plugin name, URI, author and more details.<\/p>\n

    \n\/* 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 *\/\n<\/code><\/pre>\n
    Design WooCommerce product enquiry form<\/h2>\n
    Create a template file inside the plugin directory as <woocommerce-contact-form>\/templates\/contact-form.php<\/code>.<\/p>\n
    Put this HTML into the file to display a contact form<\/a> with Name, Email and Message fields.<\/p>\n
    This template file<\/a> is loaded into the product page using a WordPress filter hook via this plugin.<\/p>\n
    \n<h3>Product enquiry<\/h3>\n<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>\n<\/div>\n<\/code><\/pre>\n
    Create plugin assets<\/h2>\n
    This plugin uses simple CSS and JavaScript assets. The CSS provides minimal styles to make the enquiry form suit any shop theme<\/a>.<\/p>\n
    If you want to change this WooCommerce product enquiry form theme, this CSS file will be useful.<\/p>\n
    \n#woocommerce-contact-form { width: 500px; border: #CCC 1px solid; padding: 25px 5px 25px 25px; border-radius: 3px;\n} #woocommerce-contact-form input { border: #CCC 1px solid; width: 50%; padding: 10px; margin: 15px 20px 15px 0px; border-radius: 3px;\n} #woocommerce-contact-form textarea { border: #CCC 1px solid; width: 96%; border-radius: 3px; box-sizing: border-box; padding: 10px; margin: 15px 20px 15px 0px;\n} .display-flex { display: flex;\n} #woocommerce-contact-form input.btn-send { color: #FFF; background: #232323; border-radius: 3px; border: #000 1px solid;\n} #response { display: none;\n}\n<\/code><\/pre>\n
    JavaScript enquiry form validation and submission via AJAX<\/h3>\n
    This script uses jQuery to handle form validation<\/a> and submit the posted data via AJAX.<\/p>\n
    All the fields are required to be entered to send the product enquiry from the WooCommerce page.<\/p>\n
    Once the conditions return true, then the jQuery AJAX<\/a> will serialize the form data and post it to the server.<\/p>\n
    All client-side and server-side responses are sent to UI using jQuery .text()<\/em>.<\/p>\n
    \n$(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() { } }); } });\n});\n<\/code><\/pre>\n
    The AJAX script points to a URL that is mapped with the wp_ajax endpoint via .htaccess.<\/p>\n
    The send_contact_email action param hooks the wp_ajax action filter in the plugin file.<\/p>\n

    # BEGIN Shop
    <IfModule mod_rewrite.c>
    RewriteRule send-contact-email\/ \/wordpress\/wp-admin\/admin-ajax.php?action=send_contact_email [L,QSA]
    <\/IfModule>
    # END Shop
    <\/code><\/p>\n
    WooCommerce product enquiry form plugin file<\/h2>\n
    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>\n
      \n
    1. Load the contact form template using \u2018the_content\u2019 filter hook.<\/li>\n
    2. Enqueue the form.css and form.js files created for this WooCommerce product enquiry form. (Also enqueued the jQuery CDN path).<\/li>\n
    3. Hook the wp_ajax_nopriv_*<\/code> to execute the send_contact_email<\/code> callback by listening the AJAX request.<\/li>\n<\/ol>\n
      The load_contact_form<\/code> function reads the template content by using PHP file_get_contents()<\/a> function. It appends the content to the page content on a condition basic.<\/p>\n
      Before adding the WooCommerce product enquiry form it checks if it is a product page. If so, is_product()<\/em> returns boolean true<\/em>.<\/p>\n
      \n<?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; }\n\/\/ add filter to hook 'the_content' with a plugin functions.\nadd_filter('the_content', 'load_contact_form'); \/** * Enqueues scripts and styles for front end. * * @return void *\/\nfunction woocommerce_contact_form_styles()\n{ 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); }\n}\nadd_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles'); <\/code><\/pre>\n
      Hook wp_ajax action with the contact email sending callback<\/h3>\n
      The below code is part of the woocommerce_contact_form.php<\/em> plugin file. It defines a callback send_contact_email()<\/code>.<\/p>\n
      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>\n
      \/wordpress\/wp-admin\/admin-ajax.php?action=send_contact_email<\/code>.<\/p>\n
      It builds the wp_mail() parameters to send the product enquiry to the shop admin or seller. The $to<\/em> holds the recipient\u2019s address.<\/p>\n
      It builds the mail body with the data posted via the WooCommerce product enquiry form.<\/p>\n
      Using wp_mail() is a simple way of sending email via WordPress. It is as similar to PHP mail<\/a> as it has a one-line code for sending emails. You may configure SMTP to send email<\/a> via WordPress.<\/p>\n
       function send_contact_email()\n{ $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 = 'vincysmtp@gmail.com'; $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;\n}\nadd_action(\"wp_ajax_nopriv_send_contact_email\", \"send_contact_email\"); <\/code><\/pre>\n
      WooCommence product page with contact form<\/h2>\n
      With all prerequisites and complete coding of the custom plugin, it\u2019s time to enable it.<\/p>\n
      Go to WordPress admin and navigate via Plugins->Installed Plugins<\/em> using the left menu.<\/p>\n
      You may see the \u2018WooCommerce Contact Form\u2019 plugin in the installed list. Activate the plugin and visit the product page of the shop.<\/p>\n
      See the screenshot shown at the beginning of the article. It displays the WooCommerce product enquiry form on a product page.<\/p>\n
      Conclusion<\/h2>\n
      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>\n
      Let us see the other methods of displaying a contact form on a WooCommerce site in the upcoming article.<\/p>\n
        <\/p>\n
      \n
      Popular Articles<\/h2>\n<\/p><\/div>\n
       \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
      by Vincy. Last modified on May 23rd, 2022. 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. As a developer we can build a WooCommerce product enquiry form custom plugin easily. It […]<\/p>\n","protected":false},"author":2,"featured_media":125085,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-125084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/125084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=125084"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/125084\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/125085"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=125084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=125084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=125084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}