Do you want to add an order form to your website? If this is the case, keep in mind that every e-commerce website needs a form so that its customers can order a product or service and possibly pay directly over the Internet.
In this article, we will offer you the top 10 plugins for WordPress that will allow you to create an order form on your website.
1.Supercart
supercart is a complete WordPress plugin designed to create order forms based on the famous WHMCS plugin. Can be used as one page ( full ajax) or multiple pages/steps ( half ajax). It is very secure, easy to use and can be set up in just 10 minutes.
If you have already installed WHMCS, just download and activate this WordPress order form plugin and you will be able to use the information from your WHMCS database without any problems. Once activated, you will only need to update the add-ons (if you have them) to simply add HTML tags.
You will also be able to add an image for all your extensions. Briefly speaking, supercart it is the most complete, most advanced and most powerful WHMCS order form plugin available on the market.
2. List of Woo Products Tables
It's a simpler, faster, and more efficient way to list your WooCommerce products on a flexible, easy-to-use table or form; with quick view. Indeed, thanks to the plugin List of Woo Product Tables You can easily display all your WooCommerce products as a table or form on one page.
Just copy the shortcode and place it on any page. Its features include: support for multiple auto-generated shortcodes, displaying columns as needed, Ajax search engine, ability to quickly view catalog and tables, etc.
3. ARG Multistep Checkout for WooCommerce
With an elegant and intuitive design, the WordPress extension ARG Multistep Checkout will help you improve the user experience by separating the most important elements of the default WooCommerce payment process.
Increasing sales is an easy goal and this is where the WooCommerce ARG Multistep Checkout plugin makes the process complex and easy to understand.
Other features include: intuitive design, smooth animations when changing and checking a step, adding new steps, accessing next steps by clicking on the next tab, integrating login and registration steps, having an order verification step, great integration with your WordPress theme, walkthrough, WPML compatibility, etc.
4. Standard PayPal Payment Gateway for Ninja Forms
Le Plug Standard PayPal Payment Gateway for Ninja Forms allows you to create an order form and receive payments using your site's standard PayPal account.
Its main features are: easy integration, activation or deactivation of the Paypal gateway in separate forms, support for recurring payments and much more.
5. Super Shapes - Calculator
With this WordPress extension, you can create advanced payment forms based on user input. Set up great booking forms and bookings or create complex evaluation forms.
It's as easy as doing regular math. This is a plugin extension. Super Shapes The latter is necessary for this xtension to work properly.
6. WooCommerce fields and fees
WooCommerce fields and fees Allows an eShop administrator to create payments (or discounts if the fee is negative) and additional billing and shipping fields to which they can optionally associate certain conditional rules.
According to these conditional rules, the plugin decides whether additional fields should be displayed in payment forms and whether fees should be applied to the payment cart. Each field/tax can have multiple conditional rules linked to each other. A conditional rule can take into account several types of data.
Among its features, you will find, among others: support for conditional logic, support for multiple data types, integration of multiple field types, excellent compatibility with WooCommerce and WPML, and much more.
WooCommerce Registration
WordPress Plugin WooCommerce Registration allows you to add additional custom fields to the customer registration form. You will have the option to add several types of fields to be mentioned among others: text zone, highlight zone, checkbox, radio button, time selector, date selector, password color picker, etc.
You will also be able to display all fields on the payment page except for the image field in case customers want to check. This plugin also allows you to enable/disable default WooCommerce fields. Connectivity via Facebook and Twitter is also integrated into this plugin.
Among its other features you will find: adding an unlimited number of fields, an intuitive interface, customizing fields for better readability, conditional logic support for its fields, advanced options for personalizing fields, and many more.
8. Cart and Checkout Pages WHMCS - One Page Checkout
The main goal of this amazing plugin is to give users the best experience in the process of ordering products. So visitors quickly turn into customers.
WHMCS Cart and Order Pages (WCOP) has very stylish, user-friendly order and checkout pages with many features.
In addition to the standard WHMCS order pages/forms, "WCOP" offers a one-page checkout. This one page checkout form is the perfect solution if you want to offer your customers a one page checkout.
9. WooCommerce Additional Product Options
WooCommerce Extra Product Options is a WordPress extension that will allow you to create additional product options with conditional logic support. You can also create forms, convert attribute dropdowns into radio buttons, and more.
Among its features we will find among other things: support for several types of fields, customization of prices according to the selected fields, visual field designer for the form, support for shortcodes, activation of some options for specific roles, choice between increasing the price by a fixed value or as a percentage, import functionality / export to other forms, the ability to hide or show prices, conditional logic for fields and sections in the form builder, compatibility with several e-commerce plugins and extensions, detailed documentation and much more...
10. WP Cost Estimate & Payment Forms Builder
Sell any customized service or product with ease by creating your own transparent and responsive cost calculator and order forms on your WordPress site. This unique plugin can actually be used to market any type of service or product, apps, websites, graphics, SEO, pets, moon fragments.... or anything else.
Your customers will be able to get an accurate estimate of their order (the estimate or final order is sent via email) or pay directly with Paypal or Stripe. The customer's email address can be automatically sent to your MailChimp / MailPoet / GetResponse list.
You can also choose to hide all prices in the form and emails so that you can use them as a regular form. Its intuitive and powerful conditional system and its many components make it easy to create any type of form.
Conclusion
That’s it for this article dedicated to the best WordPress order form plugins for WordPress. Don't forget to send us your comments, suggestions and wishes on this list.
However, you can also turn to our resources if you need more elements to carry out your internet website building projects by consulting our WordPress Blog Guide or Divi: The Best WordPress Theme of All Time.
Hello, friends! In this lesson we will talk about creating a feedback form, or as people say "contact form".
Today we will show you how you can create in a few minutes light, beautiful and functional feedback form with my favorite plugin Contact Form 7 .
I will try to explain in as much detail as possible all the stages of setting up a contact form, and in this regard, the lesson will turn out to be quite long 🙂
Creating a Contact Form in WordPress
At the very beginning, I want to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words, the fact that this plugin was downloaded can be MORE THAN 25 MILLION TIMES!!!
And so, let's get started. To create a feedback form you need to do the following:
1. Install and activate the Contact Form 7 plugin. How can you install plugins.
2. After activation, go to Contact Form 7 -> Forms.
3. In the opened window copy the line with embed code.
4. Paste the copied code on the page where we want to add the feedback form. After inserting the code, do not forget to save the changes by clicking the button "Update".
like this result adding a contact form, we get:
Ready! you installed work uniform feedback to your site!
As you can see, all for a few minutes You can easily install a feedback form on the site. You can put an end to this, but for those who are not satisfied with the standard form and who want create completely new contact form with other fields and possibilities - recommend read the lesson to the end.
In order to create a new form, we first need to decide which fields we need in it. In this lesson, as an example, we will create a simple call back order form.
To do this, we need the following fields to be filled in the form:
- Name (Required field)
- Surname
- Phone (Required field)
- Field with the choice of a convenient time for a call
After we have decided on the fields, we proceed to create the form:
1. Go to Contact Form 7 -> Add New.
2. In the window that opens, press the button "Add New". If necessary, select a language from the drop-down list below. By default language will be Russian.
3. After pressing the button, you will be redirected to the page where the form editor.
At the very top of the page is the field in which we write title new form. AT Form Template we see standard form fields that are created by default.
Below we see the settings of the letter that comes to your mail after someone has sent an order from the form on the site. In these settings, for example, you can change or add an e-mail to which requests from a form on your site will be sent. AT letter template the information that will be displayed inside the letter is configured.
4. After we have superficially familiarized ourselves with the structure of the editor, we proceed to the creation of our new form. For this we need DELETE from the form template, all lines except the button "Send", and in the letter template delete all completely . After removal, you should have something like this:
5. Now we need to create new fields: Name(mandatory), Surname, Telephone(mandatory), Convenient call time.
Starting by creating a field to enter a name, which must be mandatory. To do this, press the button "Generate Tag" and choose Text field.
In the settings of the new field, put a check mark, which is only necessary if the field must be required. Next, copy the generated code to the form template on the right, and copy the following code to the email template. See the image below for comments and arrows for better understanding.
6. After we have added a field for entering a name, click "Generate tag" -> Text field and by analogy we create a field Surname and Telephone by copying and pasting the code into the form template and email template. The only difference is that for the field Surname You don't need to check the box to be required. .
After adding the First Name, Last Name and Phone fields, the form editor will look like this:
7. Now we create a field Convenient call time. To do this, press "Generate Tag" and choose "Drop-down menu".
In field Choice we write one option per line, in our case this is the time from 8-00 to 18-00 at intervals of two hours. After filling in, copy the corresponding lines of code into the form template and the letter template.
In the end, you should end up with something like this:
9. Copy the form code and paste it on the page where you need the form. If you did everything right, you should get the following callback order form:
After the user places an order for a callback from your site, a letter will be sent to your mail with content like this:
READY! Here we have created with you callback order form from scratch.
I agree that for some, everything may seem very complicated and scary, but this feeling will only be until the first creation of a contact form from scratch 😉
In most cases, the standard feedback form, which is created by the plugin by default immediately after its installation and activation, is quite sufficient.
I hope this tutorial was useful to you, and you figured out the Contact Form 7 plugin.
If you have questions during the creation of the form, or something will not work - write and ask questions in the comments.
And remember that feedback form on the site - a required attribute on the contact page.
Hello, friends! In this lesson, we will talk about creating a feedback form, or as they say in the people "contact form". Today we will show you how you can create a lightweight, beautiful and functional feedback form in a few minutes using my favorite Contact Form 7 plugin. I will try to explain all the steps of setting up a contact form in as much detail as possible, and in this regard, the lesson will turn out to be quite long :) Creating a contact form in WordPress At the very beginning, I want to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words, the fact that this plugin ...
Review
Vote for the lesson
100
Grade
Outcome: Dear readers! Feel free to vote and leave a comment. This way I can understand the usefulness of the lessons and articles, and improve their quality in the future. Thanks in advance!
Not so long ago, a note was published on the blog “The 50 Most Popular Plugins for the WordPress Engine” and as the work on the WordPress course is coming to an end, we want to present you with another selection of plugins for this engine. Namely, today we will be reviewing the top best plugins for contact forms.
We will start by remembering what the most important pages or blocks should be on all commercial sites. These are “About us” - where information about the company is written, “Services” - with a description of the services or goods provided, and “Contacts” - for receiving feedback from customers or orders.
It is in contacts that feedback forms are placed, as this allows the visitor not only to get acquainted with your offer and leave, but to somehow express themselves. Write a review, tell you your wishes or comments on the project, offer your cooperation, or order your services.
But unfortunately, this useful functionality is not built into the standard set of the engine and we have to look for extraneous solutions to this problem. To do this, you need to either write the form yourself (if you know how), or use ready-made plugins.
I hope you go through this list and choose the most suitable plugin for your needs.
This is the most famous and probably the best plugin for creating contact forms, as the number of active installations already exceeds 3 million, and the plugin itself is regularly updated by the developers. The standard feature set includes checkboxes, radio buttons, file uploads, anti-spam and CAPTCHA functions. And with it, you can quickly set up a form containing text fields, phone numbers, postal addresses, dates, and more. This plugin is completely free and easy to embed with plain HTML and boasts AJAX submission.
This is a whole set of plugins, widgets and services for the WordPress engine. And accordingly, it has its own very simple, but good built-in form builder. With it, you get a quick and easy interface for adding forms to any note or page on the site. To do this, you just need to click the "Insert Form" button and you will be able to quickly create and add a form.
This plugin allows you to create unique-looking contact forms through the Active Engage function and embed them not only on site pages or notes, but on all pages at once in the lower right corner. With just one click from a visitor, your contact form will appear on the screen and will draw attention to itself. But, at the same time, the usual integration of the form in posts, on pages or in the sidebar is also possible.
This is another very popular plugin that is available in two versions - as a plugin for WordPress and PHP code for integration into "custom" sites. The uniqueness of this plugin is that spammer bots are automatically detected on the site. Using captcha and Akismet Fast Secure form plugin blocks attacks with the most popular spamming tactics. This feature reduces the chance of spam and any other unwanted information.
An all-in-one free plugin with a great intuitive drag'n'drop interface for creating contact forms on your WordPress site. In the admin panel, you can build your form simply by dragging and dropping the necessary blocks and customizing them to your needs. And also it has a huge number of functions, including AJAX handler, reliable anti-spam modules, data import and export.
This is another drag'n'drop plugin that allows you to create and manage all kinds of forms on your site from one place. It is designed to make the form creation process quick and easy, so that the user does not need to learn how to edit any code. The plugin has a fairly extensive developer support section for problem solving and help setting it up.
Another plugin that allows you to quickly and easily create contact forms on your site. To combat spam, it integrates with the Captcha plugin. In the pro version of the plugin, additional features are available, such as form validation and box selection, by the way, both of them are available for free in the aforementioned Contact Form 7.
Here is the list of plugins. I hope you have already chosen the most suitable one for yourself and even managed to test it on your website.
See you in other posts!
By default, WP does not have such functionality, but plugins and specially designed configurations for the engine come to the rescue.
WordPress Contact Form Plugin Contact Form 7
I will analyze the free Contact Form 7, which is translated into Russian. As standard, it includes:
- Postal address
- Phone on request
- Message text
- captcha
Add captcha reCaptcha
We install the plugin as standard through the WordPress admin panel, this is how it looks in the panel.
CF7 in search
Set up Google reCaptcha, go to the integration section, and click on the link google.com/recaptcha. Must have a Google account.
Link to recaptcha
Transfer to the service, set up the items as in the screenshot, enter the domain correctly, click send at the bottom.
Binding captcha to the site
Copy data for captcha, both keys.
Access keys
Go back to the WordPress plugin and click the Integration Settings button.
Integration
We enter the keys copied on the reCaptcha service, write them to the appropriate sections and save.
Saving settings
Form creation
Go to settings and create a new form. We erase the standard markup.
We erase standard inscriptions
We enter the name of the new project and press the Text button, because the name will be entered in text without rules.
Text field
A pop-up window will appear, customize according to your needs.
Tag Generator - The type determines whether the visitor must fill in the field, I set yes
- We do not change the name, this is a unique identifier
- Default value, entered the phrase that I see inside
- Use instead of a placeholder, that is, until nothing is entered, the inscription will be displayed
- I do not advise using the Akismet field
- To add styles, enter class or id, made pole-name
- Paste the tag into the general field
Similarly, we press the e-mail button, we see the same interface.
Mail Generator
Entering mail can be done through text, but then you will lose the validation function. The plugin will check if there is an @ sign.
We add a section of the text area and the phone (optional), the principle is the same.
Phone buttons and text area
Previously, we set up captcha integration in WordPress, in the basic version of CF7 there is no button for inserting captcha, for this we created a shortcode and place it under the rest of the elements.
It remains to add a submit button, select from the list and configure its output.
Send button
The result is this code.
Final code CF7
Mail sending settings
Change letter options
- Field tags created earlier
- Email address where emails will be sent
- From whom and subject, fill in as desired
- Additional headers, completely cleared
- We write in the body of the letter what we want to receive by mail after sending. For example, I typed Mail and inserted the corresponding tag in front of this word.
- Click Save below
Preservation
Test the rest of the notification and settings tabs, you can change the text displayed in different situations.
Inserting a form into a website
A short code has formed at the top of the page, copy it.
Shortcode
We go to any record and paste.
Putting the shortecode on the page
After clicking the View button, it will transfer to the site with a display of the work done.
final version
A good thing for WordPress theme developers is to pre-build a product that supports CF7, which makes life easier and does not need to write CSS styles in the site code. My theme supports the plugin and displays quite a nice picture. If you are not satisfied, then a class was assigned to each field, use it to change the design. I checked the work of the topic, letters come quickly. For other ways, read the link.
I will attach a video instruction to all the material, showing not only the creation process, but also how make a nice shape, because the whole process cannot be described in text.
Make fields horizontally in line
I looked on the Internet and was horrified at how many manipulations they do. I won’t show you how to fully customize the design, this is the topic of not a single large manual. We go into editing the form and wrap the fields that we want to line up horizontally in a div with a class, look at the code.
I want to line up the Name, Mail and Phone fields in a line. Don't forget to save changes.
Wrapping in a div
Go to the WordPress admin panel Appearance > Theme Editor > style.css and write the styles for WordPress feedback at the end of the file.
Flex-form(display:flex;) @media only screen and (max-width: 655px)(.flex-form(display:block;))
Writing styles
From the styles, it can be seen that the div with the flex-form class has been assigned the display:flex property, which sets the arrangement of elements in a line, without additional parameters, the space is divided equally.
The second entry shows when the screen resolution has reached 655 pixels, the form changes its property from flex to block and the form will start to display as before with the fields on top of each other. This limit of 655 varies on a case by case basis, styled to make the feedback look normal on mobile devices.
Popup feedback form
Positively at the reception of applications operate from CF7. The popup plugin will be Popup Maker. I will not describe, the link to the material is located in this paragraph. In addition to that article.
How to add to elementor
To insert a form in elementor, you need to use the shortcode section. The form was created according to the instructions above, so there is a shortcode from CF7. We go to the creation of the page in the elementor and in the search by elements we are looking for a shortcode.
Finding an element in elementor
The elementor processed the request
Using theme customization
Most WordPress themes don't have the tools to create automatic feedback. But our templates from WPShop have a built-in function that is displayed using a shortcode. Let's take Root as an example. I go to the creation of the page, then look at the picture.
Add-on in ROOT
- We write the text [ contactform ] (without spaces inside the brackets)
- Click preview
A page will open with an already adapted, markup and layout form, by which the visitor can get feedback from the administrator.
ROOT built-in function work
Feedback via widgets
Inserting feedback into widgets is easy. The text widget will help, move it to the active zone and write the shortcode into it.
Using the text widget
We set the title, enter the configuration in the text area, go to the blog and see how the feedback is processed.
Form in a widget
Feedback without plugin
If you prefer methods without a plugin, that is, there is an excellent instruction, I found it on the Internet, if the owner of the code shows up, I will gladly put a link.
Open the function.php file for editing, write the code at the very bottom, how to use .
/*feedback code*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() ( ob_start(); ?>
We created a form in the WordPress HTML markup and tied it to a shortcode. I think this approach will be convenient, because it will be possible to display the block anywhere.
We go to the creation of the page in the WordPress panel, write, click on view.
In Gutenberg, insert a line into any text block.
Entering the output into the record
Going to the site, we will see an unformed form, the fields work, but the letter will not be sent, because the PHP handler is not attached.
Bad appearance
Now let's customize the appearance, paste this code into the style.css file of the active theme.
#add_feedback ( margin: 20px 0 0; position: relative; ) #art_name, #art_email, #art_subject, #art_comments ( padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em; ) #art_subject ( width: 100%; margin: 5px 0; ) #art_comments ( width: 100%; ) #add_feedback .button ( border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: inherit; margin: 10px 0 0 0; border-radius: 3px; background-color: #2f94ce; ) #add_feedback input:focus, #add_feedback input:focus, #add_feedback input:focus, #add_feedback textarea:focus ( color: #444; box-shadow: 0 0 3px rgba(68, 68, 68, 0.2); ) .error-text ( background: #F59E9E; padding: 15px 0px; text -align: center; color: #fff; ) .error-name, .error-email, .error-comments ( display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white ; border: 1px solid red; padding: 5px 10px; line-height: 1.1; background: red; box-shadow: 0 0 3 px 0px rgba(0, 0, 0, 0.3); ) .error-name:after, .error-email:after, .error-comments:after ( content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px solid red; ) .error-comments ( top: 16%; left: 0; ) .error-name ( left: 0; ) .error-email ( right: 4%; ) .message-success ( background: rgba( 0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px; ) #add_feedback .error ( border: 1px solid red; ) #add_feedback .required:after ( content: "*"; position: absolute; left: 20px; bottom: -10px; ) #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus :-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email:focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms- input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::-moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-inpu t-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder ( color:transparent)
We update style.css on the server and see how the feedback on the page has changed.
Typed block
Create a feedback.js file and put the code in it. Upload to the hosting in the js folder of the active theme.
jQuery(document).ready(function ($) ( var add_form = $("#add_feedback"); // Reset field values $("#add_feedback input, #add_feedback textarea").on("blur", function () ( $("#add_feedback input, #add_feedback textarea").removeClass("error"); $(".error-name,.error-email,.error-comments,.message-success").remove(); $("#submit-feedback").val("Submit a message"); )); // Submit field values var options = ( url: feedback_object.url, data: ( action: "feedback_action", nonce: feedback_object.nonce ), type: "POST", dataType: "json", beforeSubmit: function (xhr) ( // When submitting, change the caption on the button $("#submit-feedback").val("Submitting..."); ) , success: function (request, xhr, status, error) ( if (request.success === true) ( // If all fields are filled, submit the data and change the caption on the button add_form.after("
").slideDown(); $("#submit-feedback").val("Submit a message"); ) else ( // If the fields are empty, display the messages and change the caption on the button $.each(request.data, function (key, val) ( $(".art_" + key).addClass("error"); $(".art_" + key).before(" " + val + ""); )); $("#submit-feedback").val("Something went wrong..."); ) // Upon successful submission, reset the field values $("#add_feedback").reset( ); ), error: function (request, status, error) ( $("#submit-feedback"). val("Something went wrong..."); ) ); // Submitting add_form.ajaxForm( options); ));
js folder on server
Now we load the second part of the code in function.php.
/*second part*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() ( // Process fields wp_enqueue_script("jquery-form"); // Include script file wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery"), 1.0 , true); // Set ajax object data wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-nonce" ),)); ) add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() ( // Array of errors $err_message = array(); // Check the nonce. If the check fails, block the send if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce")) ( wp_die("The data was sent from the wrong address"); ) // Check for spam. If the hidden field is filled or the check is cleared, then block the sending if (false === $_POST["art_anticheck"] || ! empty($_POST[ "art_submitted"])) ( wp_die("This is spam"); ) // Check name fields, if empty, write message to error array if (empty($_POST["art_name"]) || ! isset($_POST ["art_name"])) ( $err_message["name"] = "Please enter your name."; ) else ( $art_name = sanitize_text_field($_POST["art_name"]); ) // Check mail fields if is empty, write the message to the error array if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) ( $err_message["email"] = "Please enter your email address mail."; ) elseif (! preg_match("/^[[:alnum:]]*@+\.(2,4)$/i", $_POST["ar t_email"])) ( $err_message["email"] = "The email address is invalid."; ) else ( $art_email = sanitize_email($_POST["art_email"]); ) // Check email subject fields, if empty, write default message if (empty($_POST["art_subject"]) || ! isset( $_POST["art_subject"])) ( $art_subject = "Message from the site"; ) else ( $art_subject = sanitize_text_field($_POST["art_subject"]); ) // Check the message fields, if empty, write the message to error array if (empty($_POST["art_comments"]) || ! isset($_POST["art_comments"])) ( $err_message["comments"] = "Please enter your message."; ) else ( $ art_comments = sanitize_textarea_field($_POST["art_comments"]); ) // Check the array of errors, if not empty, then send the message. Otherwise, send an email if ($err_message) ( wp_send_json_error($err_message); ) else ( // Specify the addressee $email_to = ""; // If the addressee is not specified, then we take the data from the site settings if (! $email_to) ( $email_to = get_option("admin_email"); ) $body = "Name: $art_name \nEmail: $art_email \n\nMessage: $art_comments"; $headers = "From: " . $art_name . "<" . $email_to . ">" . "\r\n" . "Reply-To: " . $email_to; // Send email wp_mail($email_to, $art_subject, $body, $headers); // Send success message $message_success = "Message sent. I'll contact you shortly."; wp_send_json_success($message_success); ) // Kill the ajax process again just in case wp_die(); )
Checking if the form works. The problem may arise if you have not correctly loaded the js file into the WordPress theme, and the path to it is not specified correctly, namely in the second code in the section // Include the script file.
Fill out and send a letter
Such a letter comes in the mail with feedback.
What comes after sending
Great, we did it, we were able to make a feedback form in WordPress, using three different methods, if you have questions, then ask, we will figure it out. Good luck!
I like it I don't like it
Web forms can be used for a variety of reasons, but their main purpose is to get feedback and gather the requested information. However, their use goes beyond the collection of information, and they are used for site registration, applications, and so on.
If your site is on WordPress and you are looking for a multifunctional form builder for creating forms for any purpose, take a look at the plugin Form Maker.
WordPress Form Maker
This is one of the most popular form plugins in the WordPress.org directory that comes with a user-friendly admin area, a built-in form builder, and plenty of customization options. At the time of this review, the plugin has over 1.5 million downloads, 90,000 active installs, and an average rating of 4.6 stars.
Description Demo Download
Let's take a closer look at the Form Maker plugin and see what features and functionality it includes.
The Form Maker plugin can be downloaded either from WordPress directory, or from the plugin's official page at web-dorado.com. The plugin comes with detailed documentation and demo version for the admin panel and the forms themselves.
Form creation
Creating forms with Form Maker is very easy and doesn't take much time. After installing and activating the plugin, you will find it in the sidebar of your Console, where you can create and manage your forms.
Unlike other plugins where you have to create forms from scratch, Form Maker comes with 12 ready-made templates, which you can later edit and customize as you wish.
In addition, the plugin allows you to edit and save the form as a copy, which means that the template will not undergo any changes.
For example, here is a template for a standard feedback forms. You can drag fields up/down, reorder
and move them left or right to create columns in the form:
However, if you want to create your own forms from scratch, just click on the button Add New(Add New) and the plugin will direct you to the form creation page.
First, you will need to come up with a name, choose a theme for the form, and then you can start adding fields. Form Maker has an intuitive form builder, which allows you to add the required number of fields in the forms and view the changes you have made:
There are various field options that you can add to forms. They are designed for text input, time and date of sending files, integration with PayPal, Captcha protection, and more.
With form fields available, you can get any information from your visitors. The full list of field options is below:
Each parameter of each field can be configured, which allows you to adjust the properties of the fields according to your needs and see all changes when preview:
Form customization
Now let's talk about your form settings. You can give your form a great look thanks to the available design templates. The plugin currently has 37 form themes, which can be edited with custom CSS.
In addition, the plugin allows you to create your own themes from scratch.
To customize the form template, you need to go to its parameters (icon with a yellow Edit pencil).
After you uncheck the automatic layout generation box, you can edit the HTML code, as well as change the position, add in-line styling, and so on. Click on the appropriate buttons to add the field you need.
Form Options
It provides a wide range of form options that the Form Maker plugin allows you to customize. For example, general form options, email options, payment methods, post-submission actions, JavaScript, MySQL options, and conditional fields.
Under general parameters you can find some basic form settings and front-end options. Choose the theme of the form and where you want to store your data, and choose who can access the front-end form submission.
In the options section Email you can find settings for messages sent to users and administrator. Specify the email address, subject and paste the text in the message for the administrator.
AT dispatch section you can choose what happens when your visitors complete and submit the form. You can choose from the available options, such as stay in the form, stop at a specific page or post, redirect them to a specific URL, or add custom text that will be displayed to visitors after the form is submitted.
Form Maker also provides PayPal integration. AT payment methods section you can adjust payment settings, such as enabling PayPal, choosing the payment currency, tax rate, and more.
Conditional fields- this is one of the features of the Form Maker plugin. This feature allows you to hide or show form fields depending on the specific modes that you have set.
For example, you can set a conditional field to request the name of a state if the user has selected the US as their country. This will mean that the state name field will not be displayed to other non-US users:
In the submit section, you can find all submitted forms. A summary is available for each form analytical data such as number of entries, number of form views, conversion rate, and so on.
This section is also searchable, which means you can search the database for all the fields in a given form. In addition, you can edit or delete any content and arrange the submission fields in the order that suits your needs.
The plugin allows you to export materials to csv or XML-format for viewing data in Microsoft Excel.
Form Maker allows block IP addresses if you are being spammed through your forms. To do this, you just need to go to the Blocked IPs section, enter the IP address you want to block in the appropriate field and click the Add IP button.
You can also block IP addresses from the plugin's submission section. Blocked IPs can be unblocked at any time.
Add-ons
Form Maker is a feature rich plugin that comes with a number of add-ons that will enhance the technical capabilities of your form.
Here is the complete list of Form Maker add-ons:
- import/export
- Save Progress
- Stripe Integration
- Google PDF Integration
- Mailchimp Integration
- User Registration
- Post generation
- Conditional Emails
- Dropbox Integration
- Google Drive Integration
- Pushover Integration
- calculator
