06-01-2022, 08:08 AM
WordPress WooCommerce Contact Form Plugin with Widget
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/06/wordpress-woocommerce-contact-form-plugin-with-widget.jpg" width="350" height="562" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 31st, 2022.</div>
<p>Earlier we learnt about WordPress widgets and their uses. Also, we saw how to create a custom widget and include them in the frontend template.</p>
<p>This is a continuity of the guide series to <a href="https://phppot.com/wordpress/woocommerce-contact-form/">create a WooCommerce contact form</a>. This is yet another method to enable a contact form component. It uses WordPress widgets to achieve this.</p>
<p>The contact form widget can be rendered in the WooCommerce UI. It can be rendered in the shop theme’s registered widget area. This article guides how to render a contact form in a default widget area.</p>
<h2>Advantages of WordPress widgets</h2>
<p>Creating and using <a href="https://phppot.com/wordpress/how-to-create-wordpress-widget/">widgets for a WordPress site</a> has many advantages. Some of them are listed below.</p>
<ul>
<li>It adds abstraction by segregating a unit of logic from the usual flow.</li>
<li>It increases performance and speed by priority-based loading of widgets.</li>
<li>It acts as an add-on feature that can be enabled/disabled on a need basis.</li>
<li>It adds security by dynamic loading of components and templates.</li>
</ul>
<h2>WordPress contact form plugin for registering the widget</h2>
<p>This method creates a WordPress contact form plugin to register the widget instance. This widget is registered for displaying a contact form component in the widget area.</p>
<p>The plugin file creates the custom widget which inherits the WordPress widget class.</p>
<p>The custom widget class method loads the <a href="https://phppot.com/php/php-contact-form/">contact form template</a> file reference. It is to get the content from the template HTML and render it into the widget area. Then, the WordPress contact form plugin registers the custom widget.</p>
<p>After registering, this instance can be viewed in the existing widgets components panel.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17233" src="https://phppot.com/wp-content/uploads/2022/05/widget-component-grid.jpg" alt="Widget Component Grid" width="350" height="562" srcset="https://phppot.com/wp-content/uploads/2022/05/widget-component-grid.jpg 350w, https://phppot.com/wp-content/uploads/20...87x300.jpg 187w" sizes="(max-width: 350px) 100vw, 350px"></p>
<p>The following WordPress <a href="https://phppot.com/wordpress/woocommerce-product-enquiry-form/">contact form plugin</a> code shows the sub-class of the WP-Widget.</p>
<p>This plugin class inherits the WP-Widget class and overrides the widget() method. In this method, it constructs and outputs the widget UI HTML.</p>
<p>This plugin registers the widget by WordPress contact form plugin class name. This registration will happen on the init action of the WordPress widget.</p>
<p class="code-heading"><plugin-directory>/contact-form-widget/contact-form-widget.php</p>
<pre class="prettyprint"><code class="language-php">
<?php
/* * Plugin Name: Contact form Widget * Plugin URI: https://phppot.com * Description: Sidebar widget contact form * Author: Vincy * Author URI: https://phppot.com * Version: 1.0.0 * Slug: content */ class Contact_Form_Widget extends WP_Widget { function __construct() { parent::__construct( 'Form_Widget', 'Contact Form Widget', array( 'description' => 'To render contact form in a default widget area', ) ); } function widget( $args, $instance ) { $contactFormHTML = getContactHTML('template-parts/contact-form' ); echo $args['before_widget']; echo $args['before_title'] . "Contact us" . $args['after_title']; echo $contactFormHTML; echo $args['after_widget']; }
} function register_contact_form_widget() { register_widget( 'Contact_Form_Widget' );
}
add_action( 'widgets_init', 'register_contact_form_widget' );
</code></pre>
<h3>Contact form template, assets for WooCommerce shop</h3>
<p>The theme files have the WooCommerce contact form templates and styles. A child theme is created for this example to do the theme-specific changes.</p>
<p>The child theme’s functions.php returns the WooCommerce contact form template HTML. The <code>getContactHTML()</code> function receives the <a href="https://phppot.com/wordpress/how-to-create-wordpress-custom-page-template/">WordPress template-parts</a> slug and the filename. It uses the <code>get_template_part()</code> function to get the template HTML.</p>
<p>The WordPress contact form plugin file calls this method to grab the content.</p>
<p class="code-heading"><child-theme-directory>/functions.php</p>
<pre class="prettyprint"><code class="language-php">
<?php /** * Enqueues scripts and styles for front end. * * @return void */
function woocommerce_contact_form_styles()
{ 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: <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"); // Get contact form template and return the HTML response in a variable
function getContactHTML($slug, $name = null)
{ ob_start(); get_template_part($slug, $name); $content = ob_get_contents(); ob_end_clean(); return $content;
}
</code></pre>
<p>Also, this file contains the mail sending script with the <code>send_contact_email()</code> function. It mail sending and assets en-queueing scripts will be familiar. Because they are as same as that of creating for the <a href="https://phppot.com/wordpress/wordpress-contact-form-without-plugin/">last WooCommerce contact form articles</a>.</p>
<p>This contact form template contains inputs to collect customers’ details and messages.</p>
<p class="code-heading">template-parts/contact-form.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
/** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/b...hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since Twenty Twenty-One 1.0 */ ?>
<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>
<p>This is the WordPress default widget area to add the widget component. In this theme, it registers the footer panel as the default widget area. It is the drop area to render the chosen widget from the existing options.</p>
<p>Go to <em>Appearance->widgets</em> via the WordPress admin to this option. But, complete widgetising by using the register_widget() method to see this option.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17239" src="https://phppot.com/wp-content/uploads/2022/05/add-widget-block-550x500.jpg" alt="Add Widget Block" width="550" height="500" srcset="https://phppot.com/wp-content/uploads/2022/05/add-widget-block-550x500.jpg 550w, https://phppot.com/wp-content/uploads/20...00x273.jpg 300w, https://phppot.com/wp-content/uploads/20...68x698.jpg 768w, https://phppot.com/wp-content/uploads/20...-block.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>WordPress contact form widget plugin output</h2>
<p>The below screenshot is the final output of the WordPress contact form plugin output. Thus, the WooCommerce footer panel displays the contact form component to send enquiry.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17241" src="https://phppot.com/wp-content/uploads/2022/05/wordpress-contact-form-widget-in-ui-550x263.jpg" alt="Wordpress Contact Form Widget in UI" width="550" height="263" srcset="https://phppot.com/wp-content/uploads/2022/05/wordpress-contact-form-widget-in-ui-550x263.jpg 550w, https://phppot.com/wp-content/uploads/20...00x144.jpg 300w, https://phppot.com/wp-content/uploads/20...-in-ui.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>How to add a widget in the WordPress legacy editor</h2>
<p>The above method uses blocks to render the registered contact form widgets. In a legacy editor, it contains a drag and drops area to move the widget components into the default widget area.</p>
<p>By navigating <em>Appearance->Widgets</em> it displays the <a href="https://phppot.com/php/php-shopping-cart-by-jquery-drag-and-drop/">draggable</a> widget cards in the panel. Also, it shows the drop area to build the widget panel to be displayed on the front end.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17244" src="https://phppot.com/wp-content/uploads/2022/05/lagacy-wordpress-widget-editor-550x237.jpg" alt="lagacy wordpress widget editor" width="550" height="237" srcset="https://phppot.com/wp-content/uploads/2022/05/lagacy-wordpress-widget-editor-550x237.jpg 550w, https://phppot.com/wp-content/uploads/20...00x130.jpg 300w, https://phppot.com/wp-content/uploads/20...editor.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>If you want to test this in your widget editor, add the following code in the theme’s functions.php. There are also plugins to restore the legacy editor in the WordPress admin.</p>
<pre class="prettyprint"><code class="language-php">
<?php
function example_theme_support() { remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'example_theme_support' );
</code></pre>
<h2>3rd-party WordPress contact form plugin registers widgets</h2>
<p>There are existing 3rd-party contact form widgets available. For example, the <a href="https://wordpress.org/plugins/new-contact-form-widget/" target="_blank" rel="noopener"><em>contact form widget</em> plugin</a> provides an easy-to-use component. It renders an enquiry form in the WooCommerce shop.</p>
<p>It contains 25+ features <a href="https://phppot.com/php/php-contact-form-with-add-more-file-attachment-option/">including a form builder</a>. Instead of creating a custom code, an existing solution is preferable to get a quick output.</p>
<h2>Conclusion</h2>
<p>We have learned how to create a WordPress contact form plugin that uses widgets to render the HTML. I hope, the procedure is easy to follow and helps to create a custom widget on your own.</p>
<p>All the examples of the WooCommerce contact form cover all implementation methods. It will help to choose one among them on the need of the shop.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/wordpress-contact-form-plugin/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/05/...th-widget/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/06/wordpress-woocommerce-contact-form-plugin-with-widget.jpg" width="350" height="562" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 31st, 2022.</div>
<p>Earlier we learnt about WordPress widgets and their uses. Also, we saw how to create a custom widget and include them in the frontend template.</p>
<p>This is a continuity of the guide series to <a href="https://phppot.com/wordpress/woocommerce-contact-form/">create a WooCommerce contact form</a>. This is yet another method to enable a contact form component. It uses WordPress widgets to achieve this.</p>
<p>The contact form widget can be rendered in the WooCommerce UI. It can be rendered in the shop theme’s registered widget area. This article guides how to render a contact form in a default widget area.</p>
<h2>Advantages of WordPress widgets</h2>
<p>Creating and using <a href="https://phppot.com/wordpress/how-to-create-wordpress-widget/">widgets for a WordPress site</a> has many advantages. Some of them are listed below.</p>
<ul>
<li>It adds abstraction by segregating a unit of logic from the usual flow.</li>
<li>It increases performance and speed by priority-based loading of widgets.</li>
<li>It acts as an add-on feature that can be enabled/disabled on a need basis.</li>
<li>It adds security by dynamic loading of components and templates.</li>
</ul>
<h2>WordPress contact form plugin for registering the widget</h2>
<p>This method creates a WordPress contact form plugin to register the widget instance. This widget is registered for displaying a contact form component in the widget area.</p>
<p>The plugin file creates the custom widget which inherits the WordPress widget class.</p>
<p>The custom widget class method loads the <a href="https://phppot.com/php/php-contact-form/">contact form template</a> file reference. It is to get the content from the template HTML and render it into the widget area. Then, the WordPress contact form plugin registers the custom widget.</p>
<p>After registering, this instance can be viewed in the existing widgets components panel.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17233" src="https://phppot.com/wp-content/uploads/2022/05/widget-component-grid.jpg" alt="Widget Component Grid" width="350" height="562" srcset="https://phppot.com/wp-content/uploads/2022/05/widget-component-grid.jpg 350w, https://phppot.com/wp-content/uploads/20...87x300.jpg 187w" sizes="(max-width: 350px) 100vw, 350px"></p>
<p>The following WordPress <a href="https://phppot.com/wordpress/woocommerce-product-enquiry-form/">contact form plugin</a> code shows the sub-class of the WP-Widget.</p>
<p>This plugin class inherits the WP-Widget class and overrides the widget() method. In this method, it constructs and outputs the widget UI HTML.</p>
<p>This plugin registers the widget by WordPress contact form plugin class name. This registration will happen on the init action of the WordPress widget.</p>
<p class="code-heading"><plugin-directory>/contact-form-widget/contact-form-widget.php</p>
<pre class="prettyprint"><code class="language-php">
<?php
/* * Plugin Name: Contact form Widget * Plugin URI: https://phppot.com * Description: Sidebar widget contact form * Author: Vincy * Author URI: https://phppot.com * Version: 1.0.0 * Slug: content */ class Contact_Form_Widget extends WP_Widget { function __construct() { parent::__construct( 'Form_Widget', 'Contact Form Widget', array( 'description' => 'To render contact form in a default widget area', ) ); } function widget( $args, $instance ) { $contactFormHTML = getContactHTML('template-parts/contact-form' ); echo $args['before_widget']; echo $args['before_title'] . "Contact us" . $args['after_title']; echo $contactFormHTML; echo $args['after_widget']; }
} function register_contact_form_widget() { register_widget( 'Contact_Form_Widget' );
}
add_action( 'widgets_init', 'register_contact_form_widget' );
</code></pre>
<h3>Contact form template, assets for WooCommerce shop</h3>
<p>The theme files have the WooCommerce contact form templates and styles. A child theme is created for this example to do the theme-specific changes.</p>
<p>The child theme’s functions.php returns the WooCommerce contact form template HTML. The <code>getContactHTML()</code> function receives the <a href="https://phppot.com/wordpress/how-to-create-wordpress-custom-page-template/">WordPress template-parts</a> slug and the filename. It uses the <code>get_template_part()</code> function to get the template HTML.</p>
<p>The WordPress contact form plugin file calls this method to grab the content.</p>
<p class="code-heading"><child-theme-directory>/functions.php</p>
<pre class="prettyprint"><code class="language-php">
<?php /** * Enqueues scripts and styles for front end. * * @return void */
function woocommerce_contact_form_styles()
{ 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: <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"); // Get contact form template and return the HTML response in a variable
function getContactHTML($slug, $name = null)
{ ob_start(); get_template_part($slug, $name); $content = ob_get_contents(); ob_end_clean(); return $content;
}
</code></pre>
<p>Also, this file contains the mail sending script with the <code>send_contact_email()</code> function. It mail sending and assets en-queueing scripts will be familiar. Because they are as same as that of creating for the <a href="https://phppot.com/wordpress/wordpress-contact-form-without-plugin/">last WooCommerce contact form articles</a>.</p>
<p>This contact form template contains inputs to collect customers’ details and messages.</p>
<p class="code-heading">template-parts/contact-form.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
/** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/b...hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since Twenty Twenty-One 1.0 */ ?>
<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>
<p>This is the WordPress default widget area to add the widget component. In this theme, it registers the footer panel as the default widget area. It is the drop area to render the chosen widget from the existing options.</p>
<p>Go to <em>Appearance->widgets</em> via the WordPress admin to this option. But, complete widgetising by using the register_widget() method to see this option.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17239" src="https://phppot.com/wp-content/uploads/2022/05/add-widget-block-550x500.jpg" alt="Add Widget Block" width="550" height="500" srcset="https://phppot.com/wp-content/uploads/2022/05/add-widget-block-550x500.jpg 550w, https://phppot.com/wp-content/uploads/20...00x273.jpg 300w, https://phppot.com/wp-content/uploads/20...68x698.jpg 768w, https://phppot.com/wp-content/uploads/20...-block.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>WordPress contact form widget plugin output</h2>
<p>The below screenshot is the final output of the WordPress contact form plugin output. Thus, the WooCommerce footer panel displays the contact form component to send enquiry.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17241" src="https://phppot.com/wp-content/uploads/2022/05/wordpress-contact-form-widget-in-ui-550x263.jpg" alt="Wordpress Contact Form Widget in UI" width="550" height="263" srcset="https://phppot.com/wp-content/uploads/2022/05/wordpress-contact-form-widget-in-ui-550x263.jpg 550w, https://phppot.com/wp-content/uploads/20...00x144.jpg 300w, https://phppot.com/wp-content/uploads/20...-in-ui.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>How to add a widget in the WordPress legacy editor</h2>
<p>The above method uses blocks to render the registered contact form widgets. In a legacy editor, it contains a drag and drops area to move the widget components into the default widget area.</p>
<p>By navigating <em>Appearance->Widgets</em> it displays the <a href="https://phppot.com/php/php-shopping-cart-by-jquery-drag-and-drop/">draggable</a> widget cards in the panel. Also, it shows the drop area to build the widget panel to be displayed on the front end.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17244" src="https://phppot.com/wp-content/uploads/2022/05/lagacy-wordpress-widget-editor-550x237.jpg" alt="lagacy wordpress widget editor" width="550" height="237" srcset="https://phppot.com/wp-content/uploads/2022/05/lagacy-wordpress-widget-editor-550x237.jpg 550w, https://phppot.com/wp-content/uploads/20...00x130.jpg 300w, https://phppot.com/wp-content/uploads/20...editor.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>If you want to test this in your widget editor, add the following code in the theme’s functions.php. There are also plugins to restore the legacy editor in the WordPress admin.</p>
<pre class="prettyprint"><code class="language-php">
<?php
function example_theme_support() { remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'example_theme_support' );
</code></pre>
<h2>3rd-party WordPress contact form plugin registers widgets</h2>
<p>There are existing 3rd-party contact form widgets available. For example, the <a href="https://wordpress.org/plugins/new-contact-form-widget/" target="_blank" rel="noopener"><em>contact form widget</em> plugin</a> provides an easy-to-use component. It renders an enquiry form in the WooCommerce shop.</p>
<p>It contains 25+ features <a href="https://phppot.com/php/php-contact-form-with-add-more-file-attachment-option/">including a form builder</a>. Instead of creating a custom code, an existing solution is preferable to get a quick output.</p>
<h2>Conclusion</h2>
<p>We have learned how to create a WordPress contact form plugin that uses widgets to render the HTML. I hope, the procedure is easy to follow and helps to create a custom widget on your own.</p>
<p>All the examples of the WooCommerce contact form cover all implementation methods. It will help to choose one among them on the need of the shop.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/wordpress-contact-form-plugin/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/05/...th-widget/