+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] How to Create a WordPress Woocommerce Contact Form (/thread-99424.html)
[Tut] How to Create a WordPress Woocommerce Contact Form - xSicKxBot - 05-20-2022
How to Create a WordPress Woocommerce Contact Form
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/05/how-to-create-a-wordpress-woocommerce-contact-form.jpg" width="500" height="305" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on May 19th, 2022.</div>
<p>A contact form is an important component of an eCommerce site. It is for letting the customers connect to the sellers. It allows customers to enquire and send their queries on the order and engage with the seller.</p>
<p>The WordPress WooCommerce plugin helps to create your online shop in a few minutes. It is very <a href="https://phppot.com/php/php-contact-form/">easy to create a contact form</a> in the WordPress eCommerce shop.</p>
<p>There are plugins available in the market to customize the WooCommerce contact form. All of them give a shortcode or an option to embed forms into a page.</p>
<p>We can also <a href="https://phppot.com/wordpress/how-to-create-wordpress-custom-page-template/">build a custom solution</a> to render the form into a <a href="https://woocommerce.com/" target="_blank" rel="noopener">WooCommerce</a> page.</p>
<p>There are many ways to render the WooCommerce contact form in the template files. For example,</p>
<ol>
<li>by creating a shortcode with theme’s <em>funtions.php</em></li>
<li>by using custom or existing WordPress plugins.</li>
<li>by <a href="https://phppot.com/wordpress/how-to-create-wordpress-widget/">creating a widget</a> for displaying the contact form.</li>
</ol>
<p>This article shows some of the available plugins to integrate a WooCommerce contact form. It also describes how to configure these plugins to render the form in the shop pages.</p>
<h2>Reasons for having a contact form in a WooCommerce store</h2>
<p>A WooCommerce contact form is essential for the following reasons.</p>
<ol>
<li>To let customers raise queries, and support tickets.</li>
<li>To allow discussion about purchases.</li>
<li>To encourage customers to add feedback and comments for improving sales.</li>
<li>To enquire about products and orders.</li>
</ol>
<h2>List of Woocommerce contact form plugins</h2>
<p>These are the list of WordPress plugins used to create a WooCommerce contact form. Most of them have the free version and are simple to integrate.</p>
<table class="tutorial-table">
<tbody readability="2">
<tr>
<th>Contact form plugin</th>
<th>Number of installations</th>
<th>Last updated</th>
</tr>
<tr>
<td>WPForms</td>
<td>5+ million</td>
<td>2 weeks ago</td>
</tr>
<tr>
<td>Contact Form 7 (CF7)</td>
<td>5+ million</td>
<td>3 month ago</td>
</tr>
<tr>
<td>Ninja Forms</td>
<td>1+ million</td>
<td>2 months ago</td>
</tr>
<tr>
<td>Formidable Pro</td>
<td>300000+</td>
<td>2 days ago</td>
</tr>
<tr readability="2">
<td>Simple Basic Contact Form</td>
<td>10000+</td>
<td>2 months ago</td>
</tr>
<tr readability="2">
<td>Contact Form by BestWebSoft</td>
<td>80000+</td>
<td>2 months ago</td>
</tr>
<tr>
<td>Gravity Forms 20000</td>
<td>20000+</td>
<td>2 weeks ago</td>
</tr>
</tbody>
</table>
<p>Install and activate the WooCommerce plugin to turn a WordPress site into an online shop.</p>
<p>Then, integrate any one of the above plugins to render a WooCommerce contact form on the shop.</p>
<p>In the upcoming sections, we will see the usage mechanism of the free plugins among the above list.</p>
<p>Before that, <a href="https://wordpress.org/download/" target="_blank" rel="noopener">install WordPress and download</a> the WooCommerce <a href="https://phppot.com/wordpress/how-to-install-a-wordpress-plugin-for-beginners/">plugin to be installed</a> and activated.</p>
<h2>How to create a contact form using WPForms?</h2>
<p>The <a href="https://wordpress.org/plugins/wpforms-lite/" target="_blank" rel="noopener">WPForms plugin</a> helps to create a WooCommerce contact form in 5 minutes.</p>
<p>There are two steps to display a contact form on a WordPress WooCommerce page.</p>
<ul>
<li>Customize a contact form using WPForms settings.</li>
<li>Embed the WooCommerce contact form into an existing or new page.</li>
</ul>
<p>For customizing the contact form, follow the below steps with the WordPress admin</p>
<ul>
<li>Go to WpForms -> All Forms via the left <a href="https://phppot.com/wordpress/how-to-limit-the-archive-menu-list-in-wordpress/">menu</a>.</li>
<li>Choose the contact form title and the template.</li>
<li>Construct the form by drag and drop field tools and save the form.</li>
<li>Embed the form into an existing or a newly created page.</li>
</ul>
<p>Embedding the WooCommerce contact form into the shop template is very easy.</p>
<ul>
<li>Choose the contact form to be embedded.</li>
<li>Click the “Embed” option above the form editor which is next to the “Save” button.</li>
<li>Choose one among the three ways provided as shown below to embed a WooCommerce contact form.</li>
</ul>
<p><img loading="lazy" class="alignnone size-full wp-image-17007" src="https://phppot.com/wp-content/uploads/2022/05/embed-woocommerce-contact-form.jpg" alt="Embed WooCommerce Contact Form" width="500" height="305" srcset="https://phppot.com/wp-content/uploads/2022/05/embed-woocommerce-contact-form.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/embed-woocommerce-contact-form-300x183.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"></p>
<h2>How to create a WooCommerce contact form using CF7?</h2>
<p>Contact form 7 is one of the heavily installed forms customization plugins. It helps to customize a WooCommerce contact form in the following aspects.</p>
<p>Install and activate to build a contact form with <a href="https://phppot.com/php/php-wizard-like-registration/">a wizard-like customization</a> process.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17010" src="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-7-550x368.jpg" alt="WooCommerce Contact Form7" width="550" height="368" srcset="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-7-550x368.jpg 550w, https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-7-300x201.jpg 300w, https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-7-768x514.jpg 768w, https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-7.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>Step 1: Customize the form template</h3>
<p>It covers all possible form fields to be rendered onto a form template. It has these selectable options above the <a href="https://phppot.com/php/php-image-upload-using-tinymce-editor/">rich-text editor</a> of the form edit window.</p>
<h3>Step 2: Customize the email template</h3>
<p>Then, it allows for designing an email template. In this, it has the option to build the email header and the body with the subject and other details.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17011" src="https://phppot.com/wp-content/uploads/2022/05/cf7-mail-template-customization.jpg" alt="CF7 Mail Template Customization" width="500" height="333" srcset="https://phppot.com/wp-content/uploads/2022/05/cf7-mail-template-customization.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/cf7-mail-template-customization-300x200.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"></p>
<h3>Step 3: Configuring the acknowledgment message</h3>
<p>The acknowledgment messages guide the end-users. It helps to complete submitting the WooCommerce contact form easily. It is for the following purposes.</p>
<ul>
<li>To respond with a success or failure message.</li>
<li>To show a help text on entering wrong formatted data into the form.</li>
<li>To alert users to enter all mandatory fields.</li>
<li>To alert users to accept conditions or select form content if any.</li>
</ul>
<p>After successful configurations, save the form template. Then, copy the shortcode for rendering this WooCommerce contact form in the front end.</p>
<p>The shortcode is displayed below the contact form title in the editor window. Put this shortcode in the right template where the contact form is expected to be displayed.</p>
<h2>Creates forms with WordPress Ninja Forms plugin</h2>
<p><a href="https://wordpress.org/plugins/ninja-forms/">Install the Ninja Forms plugin</a> to deploy a contact form template on a WooCommerce page.</p>
<p>After activating the plugin, the WordPress admin will show the menu. Go to Ninja Forms -> Add New to choose the contact form template.</p>
<p>It also allows extensive customization of a WooCommerce contact form. It slides in a panel of form fields with a drag and drops option.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17017" src="https://phppot.com/wp-content/uploads/2022/05/ninja-form-builder.jpg" alt="ninja form builder" width="500" height="317" srcset="https://phppot.com/wp-content/uploads/2022/05/ninja-form-builder.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/ninja-form-builder-300x190.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>There are 4 options to set up emails & actions to be performed on submitting the form.</p>
<ol>
<li>Record submission: Database storage of the submitted form fields.</li>
<li>Email confirmation: Confirmation message to the customer about the message received status.</li>
<li>Email Notification: Notify the admin about the customer’s attempt to contact him or her.</li>
<li>Success message: Acknowledge the customers via the form UI.</li>
</ol>
<p><img loading="lazy" class="alignnone size-full wp-image-17016" src="https://phppot.com/wp-content/uploads/2022/05/form-actions-setting.jpg" alt="form actions setting" width="500" height="243" srcset="https://phppot.com/wp-content/uploads/2022/05/form-actions-setting.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/form-actions-setting-300x146.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>Each action has configurable directives to set the following.</p>
<ul>
<li>It allows configuring the confirmation and notification mails’ subject, body and header.</li>
<li>It allows setting the acknowledgment message displayed in the UI.</li>
<li>It has options to mark some form fields excluded from storing in the database.</li>
</ul>
<p>It also contains advanced features to restrict users not logging in. Also, it <a href="https://phppot.com/jquery/prevent-form-double-submit-using-jquery/">restricts the number of form submissions with a configured limit</a>.</p>
<h2>‘Formidable Pro’ form in a WordPress eCommerce website</h2>
<p>It has various FREE or PRO templates of WordPress contact forms.</p>
<p>It gives blank forms to customize form templates without subscription or payment.</p>
<p>It is free and capable of customizing the flow by settings the form title, description and the fields.</p>
<p><img loading="lazy" class="alignnone size-full wp-image-17024" src="https://phppot.com/wp-content/uploads/2022/05/formidable-pro-contact-form.jpg" alt="formidable pro contact form" width="500" height="495" srcset="https://phppot.com/wp-content/uploads/2022/05/formidable-pro-contact-form.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/formidable-pro-contact-form-300x297.jpg 300w, https://phppot.com/wp-content/uploads/2022/05/formidable-pro-contact-form-150x150.jpg 150w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>Like other contact form plugins, this also has the form builder to drag and drop fields.</p>
<p>It has enough free features to build a WooCommerce contact form. Those are,</p>
<ul>
<li>Enable or disable displaying the form title and description above the form fields.</li>
<li>Configuring the after-submit behavior. It can be any one of the following.
<ul>
<li>A response text to display a success or error message.</li>
<li>A HTML response from a WordPress page.</li>
<li><a href="https://phppot.com/wordpress/how-to-redirect-your-wordpress-blog-readers-to-a-random-post/">Redirect to a separate page</a> after submission.</li>
</ul>
</li>
<li>Enabling Honey pot integrations to safeguard the form from bots and malicious users.</li>
<li>Enabling/disabling spam checking with respect to the on-submit token uniqueness <a href="https://phppot.com/wordpress/the-right-way-to-include-javascript-and-css-in-wordpress/">using JavaScript</a>.</li>
</ul>
<p><img loading="lazy" class="alignnone size-full wp-image-17025" src="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-builder-formidable-pro.jpg" alt="woocommerce contact form builder formidable pro" width="500" height="281" srcset="https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-builder-formidable-pro.jpg 500w, https://phppot.com/wp-content/uploads/2022/05/woocommerce-contact-form-builder-formidable-pro-300x169.jpg 300w" sizes="(max-width: 500px) 100vw, 500px"></p>
<p>After building the WooCommerce contact form, click update to save the changes.</p>
<p>It is also having the “Embed” option to put the form into a WordPress page. The above image shows the “Embed”, “Preview” and “Update” options in the top right corner.</p>
<h2>How to use the Simple Basic Contact Form plugin on a WooCommerce page?</h2>
<p>The “Simple Basic Contact Form” is too simple to integrate as it is named. Unlike all the above plugins, it has a single-page setting to configure.</p>
<p>Though it doesn’t have a form builder, it provides a long scrollable list of configurations. These are more than enough to set up a useful WooCommerce contact form.</p>
<p>It includes place holder to include additional contents additional with the form fields. Those are,</p>
<ul>
<li>Form description above and below the fields.</li>
<li>Help text above the submit button to guide the customers.</li>
<li>Markup of the success or failure responses.</li>
<li>Custom CSS to let the WooCommerce contact form be in the <a href="https://phppot.com/wordpress/how-to-create-a-minimal-wordpress-theme/">theme of the shop</a>.</li>
<li>Enable captcha or question challenge.</li>
<li>Include stop words.</li>
</ul>
<p>This settings page contains all minimal form fields required for a contact form. These are like Name, Email, Label, Text and more.</p>
<p>After configuring, add the <a href="https://phppot.com/wordpress/how-to-create-shortcode-in-wordpress/">shortcode</a> [simple_contact_form] into a shop page template. It will render the corresponding form UI to allow customers to convey their doubts about the order placed.</p>
<h2>Conclusion</h2>
<p>With the use of any one of the above plugins, creating a WooCommerce contact form must be easy. It will enable your shop to let your customer enquire about the placed orders and product customization.</p>
<p>These choices help to choose one among them based on the need of your WooCommerce site.</p>
<p>These plugins have a volume of placeholders to configure. Sometimes, there will be a simple form expected to allow customers to enquire.</p>
<p>If you want a sleek solution instead of these complex configurations, then a custom code is best. Let us see how to create a WooCommerce contact form plugin in the next article.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/woocommerce-contact-form/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/05/19/how-to-create-a-wordpress-woocommerce-contact-form/