Online form is an indispensable tool for absolutely any site. It is the most important source of communication with your website visitors. Forms allow you to collect feedback, conduct surveys, create email subscriptions, collect customer payments, and much more. If you know programming, then you can easily create a form for the site. Otherwise, there are many good plugins that can be easily installed on a site and used to create forms.
stepFORM
stepFORM is a WordPress plugin for creating forms of any complexity based on a visual designer. It has built-in spam protection, collection of responses to email and CRM, integration with Google analytics and Yandex.Metrica, calculating the cost using formulas, accepting payments on PayPal, Wallet One, Yandex.Money and Yandex.Kassa, using the form following a link in social networks, and much more.
uCalc
uCalc - popular WordPress plugin to create payment forms of varying degrees of complexity. The plugin is perfect for forms in which it is necessary not only to receive information from site visitors, but also to make automatic calculations according to formulas or to accept payments from customers for the sale of goods or services. The plugin is connected in a few clicks and does not require programming knowledge. Adding a calculation form occurs when editing a page or publication.
Contact Form 7
Contact Form 7 is one of the most popular WordPress form plugins. With this plugin, you can very flexibly customize the content of forms and customize the sending of data to mail. Forms include ajax submissions as well as Captcha and Akismet against spam.
WPForms
WPForms allows you to create beautiful contact forms, subscription forms, payment forms and other forms for your website in minutes. WPForms will look great on all devices (mobile, tablet, portable and desktop).
Ninja forms
Ninja Forms helps you create online WordPress forms in minutes by simply moving form fields using your mouse. For developers, you can use the built-in hooks, filters, and custom field templates to do whatever it takes to create or submit a form using Ninja Forms as a base.
Form Maker
Form Maker creates responsive WordPress forms through a simple and clear interface... The plugin allows you to create various questionnaires with any fields, question and answer options. You just need a few clicks to create the forms and a couple of minutes to customize them with the available themes, styles and display options.
Caldera Form
Caldera Form is a free and powerful WordPress plugin that creates responsive forms with a simple visual editor. The plugin has many free handy add-ons for both beginners and web developers. Antispam, AJAX, emails with notifications and tracking database records are enabled by default.
Visual Form Builder
Visual Form Builder is a plugin that allows you to create and manage all kinds of forms for your site in one place. It only takes a few minutes to create a fully functional contact form, and you don't need to write a single drop of PHP, CSS or HTML.
This list includes the most popular WordPress plugins for creating online forms. If you are using other interesting plugins that are not in this list, then write in the comments.
Almost every time a webmaster develops a new site, he has to choose the best (for specific needs) WordPress plugin for contact forms and feedback forms. This usually happens because the client does not always like a simple contact form, and sometimes there is a need for several forms at once on one site.
A feedback form is one of the most important elements of a WordPress site, because without it you are deprived of an excellent chance to always keep in touch with your readers, partners, customers. Plus, you're missing out on many opportunities to attract new customers. A WordPress Contact Form Plugin makes it easy to add a contact form to your website. I'm not talking about various corporate and selling sites where sometimes very specific forms are required, not only for simple contacts.
In this article, I will list the most popular plugins in a completely random order. The article will certainly be supplemented with the best solutions over time.
Contact Form 7 is the most popular WordPress contact form plugin with over 12K downloads and growing numbers. The plugin boasts AJAX submission, a built-in Akismet spam filter, and the ability to upload files. The plugin is completely free and can be easily customized with simple HTML.
Pros: If you want a simple contact form, this plugin is what you are looking for as it just needs to be installed and configured using a simple settings page. With one-line code, you can insert a contact form into any post or page.
Cons: Technically this plugin needs no work, but it would be nice to have a few to choose from. If you want to change the appearance of the form, you have to play with CSS.
Fast Secure Contact From is another popular plugin that has already been downloaded over 3.5 million times. It allows blog owners to easily create and add contact forms to WordPress sites. You can also use the form to send invitation requests to a regular or video call.
The plugin has an admin interface with which you can create an unlimited number of forms and view their preview. Using captcha and Akismet Fast Secure form, it blocks attacks based on the most popular spam tactics.
Pros: Unlike other similar plugins, Fast Secure form does not allow users to register a profile, but it can offer other great features, such as the ability to create a schedule, online meetings, support for multiple email addresses, etc.
Cons: B current version The plugin lacks a simple interface, but the author of the plugin recently released a beta version that does much better with the interface. Thus, the problem of the interface is not so acute.
Contact Form by Contact ME
Contact Form is a free plugin in its basic functionality, but it obliges you to register on the contactme.com website. Registration is completely free and requires no effort on your part. The plugin developers claim that it is an order of magnitude better than many popular contact form plugins, including contact form 7!
Pros: the plugin pleases with some useful functionality - an option for sending notifications to your mailbox and a smartphone, the ability to add arbitrary code or scripts to the form, as well as the fact that it puts a logo for the card, company contact information, and even links to profiles in in social networks and much more.
Cons: In order to use the plugin you will have to create a profile on the Contact Me website. Even though registration is simple and free, it still doesn't make you happy when you are forced to do something.
Initially, the FormCraft plugin was created and developed only in a premium version. Relatively recently, the authors made a separate, free version- FormCraft - Form Builder.
As in the premium version, FormCraft - Form Builder allows you to quickly and easily design different forms in a special and very convenient drag & drop editor. There are naturally fewer opportunities here, but for ordinary users quite enough.
The premium version of FormCraft boasts customizable scripting logic, autosave, more than 20+ additional custom fields, popup and fly-in forms, CSV export and more.
One of the best plugins available today, both premium and free.
The Visual Form Builder interface will pleasantly surprise you as the plugin allows you to create and manage all kinds of forms on your site from one place. In one click, you can add new fields, reorganize existing ones, apply an anti-spam solution. In order to change the order of the fields, you can use the drag & drop technology.
Pros: While the Visual Form Builder is similar to the other contact form plugins listed here, it has its own interesting features - the ability to change the order of elements with a simple drag and drop, export of inputs to a CSV file, customizable confirmation messages, a submission form that supports input of many emails.
Cons: If your WordPress site is very large, you are better off using a different plugin as this one stores the form input in your WordPress database.
nForms - WordPress Form Builder
Drag and Drop Builder provides you with a simple multi-column contact form template with Ajax submission and validation. You can even display the form using the popup plugin. It is possible to display the form using a shortcode, normal function PHP or widget.
If you need more than just a contact form, then nForms is a plugin you can use.
Gravity Forms is the most complete solution for adding a contact form to your website. With a bunch of cool features, this plugin is the most progressive and advanced premium WordPress plugin available. You can use the visual editor to create complex feedback forms for your site. There is also a convenient function that facilitates the use of long forms, allowing them to be embedded in multiple pages, moreover, how full the form is is shown by the fill indicator.
Pros: Gravity Forms can offer you completely exclusive functionality that is not available in other similar plugins, for example, an option to create order forms (including real-time costing), dependent fields to hide or show fields, sections, pages or even a submit button of the user's choice.
Pros: Compared to the other plugins featured here, this one is pricey, but again Gravity Forms offers much more than just a contact form. If you are looking for a simple contact form, then there is no point in spending money on this plugin.
Mapped Contact Form Pro WordPress uses a different algorithm to display a form on your website. This is a great solution for a business or company, as it can be used to mark branches or offices on the ground. The plugin is also ideal for those who use maps on their sites.
You can provide your address for each location that is present in the contact form. The plugin is easy to use and can be placed on any post or page with a simple shortcode.
Another popular one in Lately form constructor. Quite powerful, with a great, intuitive editor (like in paid plugins), in which you can build your form by simply dragging and dropping the blocks you want and adjusting them. Has a whole set of pre-prepared fields and blocks. All fields are right there, at creation, edited in the language you need. By default, it only has a standard, contact form for feedback and a corresponding shortcode.
Pros: Excellent functionality. While creating a new form, you can use a convenient switch to quickly preview and test your "designs".
Cons: Lots of block settings can scare off newbies. In addition to the main functionality, it has a lot of premium plugins for working with various payment acceptance services, mailing lists and other things. Although, this can be attributed to the pluses of course.
Ninja Kick: WordPress Contact Form
The most original contact form of the entire collection. It differs in that it is displayed as a separate panel - a slider on the left or right side of the site. It looks very impressive. It has many settings, but mostly regarding its appearance. Setting up the fields themselves is minimal here. However, you can put a shortcode from the popular Contact Form 7 and it will work.
An interesting plugin and the form itself. You can read more in.
Summing up
Now is the time to choose the right extension for your website. Contact Form 7 or FormCraft - Form Builder is probably best solutions for a regular blog, and for large sites offering various services and services, I would recommend using - Gravity Forms or Ninja Forms. Lovers of "stand out" will be perfect - Ninja Kick: Contact Form.
Hello, friends! In this tutorial we will talk about creating a feedback form, or as they say among the people "Contact form".
Today we will analyze with you how you can create in a few minutes easy, beautiful and functional a feedback form using my favorite plugin Contact Form 7 .
I will try to explain in as much detail as possible all the stages of installing the 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 to install plugins you can.
2. After activation, go to Contact Form 7 -> Forms.
3. In the window that opens copy the line with an embed code.
4. Paste the copied code on the page where we want to add a feedback form. After you have inserted the code, do not forget to save the changes by clicking the button "Refresh".
Here is such result adding a contact form to get:
Ready! You installed working form feedback to your site!
As you can see, in total 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 new form First, we need to decide what fields we need in it. In this tutorial, 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)
- A field with a choice of a convenient time for a call
After we have decided on the fields, we proceed to creating 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 the default language will be Russian.
3. After clicking the button, you will be taken to the page on which the form editor.
At the very top of the page is the field in which we write title new form... V 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, which will receive requests from the form on your site. V 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 creating our new form. For this we need DELETE from the form template all lines except for the button "Send", and in the email template delete all completely . After deleting, you should get something like this:
5. Now we need to create new fields: Name(required), Surname, Telephone(required), Convenient call time.
We start by creating a field to enter a name, which should be required. 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 should be required. Next, copy the generated code into the form template on the right, and copy the following code into 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 create a field Surname and Telephone by copying and pasting the code into the form template and the letter template. The only difference is that for the field Surname check the box for mandatory filling no need .
After adding the First Name, Last Name and Phone fields, the form editor will look like this:
7. Now we create the field Convenient call time. To do this, click "Generate Tag" and choose "Drop-down menu".
In field Choice we write in a line according to one option, in our case this time is from 8-00 to 18-00 at intervals of two hours. After filling out, copy the corresponding lines of code into the form template and the letter template.
As a result, you should get something like this:
9. Copy the form code and paste it on the page where you need the form... If you did everything correctly, you should get the following form for ordering a call back:
After the user makes a callback order from your site, a letter will be sent to your mail with the following content:
READY! Here we have created with you callback order form from scratch.
I agree that for some, everything may seem very difficult and scary, but this feeling will only last until the first creation of a contact form from scratch ๐
In most cases, a standard feedback form, which is created by the plugin by default immediately after its installation and activation, is sufficient.
I hope this tutorial was useful to you, and you figured out the Contact Form 7 plugin.
If you have any 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 the people say "contact form". Today we will discuss with you how you can create an easy, beautiful and functional feedback form in a few minutes using my favorite Contact Form 7 plugin. I will try to explain in as much detail as possible all the stages of installing 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 ...
Overview
Vote for the lesson
100
Grade
Outcome: Dear Readers! Do not be lazy 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!
Web forms can be used for a variety of reasons, but their main purpose is to get feedback and collect the information requested. However, their application goes beyond the collection of information, and they are used for registration on the site, applications and so on.
If your site is WordPress and you are looking for a feature-rich form builder to create forms for any purpose, take a look at the plugin Form Maker.
WordPress Form Maker
It is one of the most popular form builder plugins in the WordPress.org directory and comes with a user-friendly admin area, built-in form builder, and tons of customization options. At the time of this review, the plugin has over 1.5 million downloads, 90,000 active installations and an average rating of 4.6 stars.
Description Demo Download
Let's take a close look at the Form Maker plugin and see what features and capabilities are included.
The Form Maker plugin can be downloaded from either WordPress directory, or from the official plugin page to Web-Dorado.com... The plugin comes with detailed documentation and demo version for the admin panel and the forms themselves.
Form creation
It is very easy to create forms with Form Maker and it does not take a lot of time. After installing and activating the plugin, you will find it in the side menu 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 in the future can be edited and customized 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 the 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 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 constructor, which allows you to add the required number of fields in the forms and view the changes you made:
There are various field options that can be added to forms. They are intended for entering text, time and date of sending files, integration with PayPal, Captcha protection, and more.
With available form fields, you can get any information from your visitors. The complete list of field parameters is below:
Each parameter of each field can be customized, which allows you to adjust the properties of the fields according to your needs and see all the changes when preview:
Form customization
Now let's talk about customizing your form. You can give your shape a great look thanks to the affordable design templates... The plugin currently contains 37 themes for the form which can be edited with custom CSS.
Moreover, the plugin allows you to create your own themes from scratch.
To customize a form template, you need to go to its parameters (the icon with a yellow pencil Edit).
After you uncheck the automatic layout creation checkbox, you can edit the HTML code, as well as change the position, add in-line styling and so on. Click on the corresponding buttons to add the field you want.
Form options
There is a wide variety of form options that the Form Maker plugin allows you to customize. For example, general form parameters, parameters Email, payment methods, post-submission actions, JavaScript, MySQL options and conditional fields.
Under general parameters you can find some basic form customization and front-end options. Choose the theme of the form and where you want to save your data, as well as choose the users who can access the front-end form submission.
In the parameters section Email you can find the settings for messages sent to users and administrator. Provide email address, subject and insert text in the message to the administrator.
V sending section you can choose what happens when your visitors complete and submit the form. You can choose from the options available, such as staying in the form, staying on a specific page or post, redirecting it to a specific URL, or adding your own text to be displayed to visitors after the form is submitted.
Form Maker also provides the ability to integrate with PayPal. V section of payment methods you can adjust payment settings, such as enabling PayPal, choosing the payment currency, tax rate, and more.
Conditional fields 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 define a conditional field to prompt for a state name if the user has selected the United States as their country. This will mean that the field with the state name will not be displayed to other non-US users:
In the submission section you can find all the submitted forms. A summary is available for each form analytical data such as the number of entries, the number of views on the form, the conversion rate, and so on.
This section is also intended for search, which means that you can search in the database for all the fields of this 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 receive spam through your forms. To do this, you just need to go to the Blocked IPs section, specify the IP address that you want to block in the corresponding field and click the Add IP button.
You can also block IPs from the submission section of the plugin. 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 allow you to expand technical capabilities your form.
Here full list 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
Outcomes
Form Maker is a great choice if you are looking for an effective tool for creating responsive web forms of any complexity in WordPress. It is well designed and has a good tech support team ready to help.By default, WP does not have such functionality, but plugins and specially designed configurations for the engine come to the rescue.
Contact Form WordPress Plugin Contact Form 7
I will analyze the free Contact Form 7, which is translated into Russian. In the standard version, it includes:
- Mail address
- Optional telephone
- Message text
- Captcha
Add reCaptcha captcha
Install the plugin as standard through the WordPress admin panel, as it looks in the panel.
CF7 in search
Let's set up reCaptcha from Google, go to the integration section, and click on the google.com/recaptcha link. Must have a Google account.
Link to recaptcha
It will transfer to the service, set up the items as in the screenshot, enter the domain correctly, click send below.
Linking captcha to the site
We copy the data for the 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 down to the appropriate sections and save.
Saving settings
Form creation
Go to settings and create a new form. Erasing the standard markup.
Erasing standard labels
Enter the name of the new project and click the Text button, because the name will be entered in text without rules.
Field text
A pop-up window will appear, customize it according to your needs.
Tag generator - The type determines whether the visitor must fill in the field, I put yes
- The name is not changed, it 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 caption will be displayed
- I do not recommend using the Akismet field
- To add styles, enter class or id, made pole-imya
- Insert the tag into the general field
Similarly, we press the e-mail button, we see the same interface.
Mail generator
Mail entry can be done through text, but then you will lose the validation function. The plugin will check if there is an @ sign.
Add a section of the text area and phone (optional), the principle is the same.
Phone and text area buttons
Previously, we set up the integration of captcha in WordPress, in the basic version of CF7 there is no button for inserting a captcha, for this we have created a shortcode and place it under the rest of the elements.
It remains to add a submit button, select from the list and customize its output.
Submit button
The result is the following code.
Final code CF7
Configuring email sending
Changing email parameters
- Field tags created earlier
- Mail address where letters will be sent
- From whom and the subject, fill in as you wish
- Additional headers, completely clear
- 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.
- At the bottom, click Save
Preservation
Test the rest of the notification and settings tabs, you can change the text displayed in different situations.
Inserting a form on the site
A short code has formed at the top of the page, copy it.
Shortcode
Go to any record and paste.
Putting the shortecode on the page
After clicking the View button, it will be transferred to the site with the display of the work done.
Final option
A good trait for WordPress theme developers is to make a product that supports CF7 in advance, which makes life easier and does not need to be written CSS styles into the site code. My theme supports the plugin and displays a pretty nice picture. If you are not satisfied, then a class was prescribed for each field, use it to change the design. I checked the work of the topic, letters come quickly. For other methods, read the link.
I will attach a video instruction to all the material, showing not only the creation process, but also how make a beautiful form design, because the whole process cannot be described in text.
Make margins horizontally in line
I looked on the Internet and was horrified at how many manipulations they are doing. I will not 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 field. Remember to save your changes.
Wrapping in a div
Go to the WordPress admin area Appearance> Theme Editor> style.css add 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, you can see that the div with the flex-form class has been assigned the display: flex property, it sets the position of the elements in line, without additional parameters the space is divided equally.
The second entry shows when the screen resolution reaches 655px, the form changes its property from flex to block and the form starts to display as before with fields underneath each other. This limit of 655 varies individually, the style is made to mobile devices the feedback looked ok.
Pop-up feedback form
Positively on accepting applications are valid from CF7. The plugin for displaying the popup 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 into elementor, you need to use the shortcode section. The form was created according to the instructions above, which means there is a shortcode from CF7. Go to the page creation in the element and look for the shortcode in the element search.
Finding an element in elementor
Elementor processed the request
Using the theme setting
Most WordPress templates do not have tools to create in automatic mode feedback. But our templates from WPShop have a built-in function that is displayed using a shortcode. Let's take a look at Root as an example. I move on to creating a page, then look at the snapshot.
Add-on in ROOT
- We write the text [contactform] (without spaces inside the brackets)
- Click on the preview
A page with an already adapted, marked up and typeset form will open, according to which the visitor can receive feedback from the administrator.
ROOT work of the built-in function
Feedback via widgets
Putting feedback into widgets is easy. The text widget will help, transfer 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 widget
Feedback without plugin
If you prefer methods without a plugin, that 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 down the code at the very bottom, how to use it.
/ * feedback code * / add_shortcode ("art_feedback", "art_feedback"); function art_feedback () (ob_start ();?>
We created a form in WordPress HTML markup and bind it to a shortcode. I think this approach will be convenient, because the block can be displayed anywhere.
We go into creating a page in the WordPress panel, write, click on view.
In Gutenberg, insert a line into any text block.
Putting 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 look, 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.
Typeset 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 ("Send 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 label on the button $ ("# submit-feedback"). val ("Submitting ...");) , success: function (request, xhr, status, error) (if (request.success === true) (// If all fields are filled in, send the data and change the label on the button add_form.after ("
") .slideDown (); $ (" # submit-feedback "). val (" Send message ");) else (// If the fields are empty, display messages and change the button label $ .each (request.data, function (key, val) ($ (". art_" + key) .addClass ("error"); $ (". art_" + key) .before (" "+ val +"");)); $ (" # submit-feedback "). val (" Something went wrong ... ");) // On successful submission, reset the field values โโ$ (" # add_feedback "). reset ( );), error: function (request, status, error) ($ ("# submit-feedback"). val ("Something went wrong ...");)); // Submit add_form.ajaxForm ( options);));
Js folder on server
Now we load the second part of the code into function.php.
/ * second part * / add_action ("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts () (// Processing fields wp_enqueue_script ("jquery-form"); // Include the script file wp_enqueue_script ("feedback", get_stylesheet_directory_uri (). "/js/feedback.js", array ("jquery"), 1.0 , true); // Set the data of the ajax object 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, then block sending if (! wp_verify_nonce ($ _ POST ["nonce"], "feedback-nonce")) ( wp_die ("Data sent from the wrong address");) // Check for spam. If the hidden field is filled in or the check is removed, then block the sending if (false === $ _POST ["art_anticheck"] ||! empty ($ _ POST [ "art_submitted"])) (wp_die ("This is spam");) // Check the name fields, if empty, then write a message to the 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 empty, then write a 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 the email subject fields, if empty, then write the 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, then write a message to array of errors 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 error array, if not empty, then send the message. Otherwise, send an email if ($ err_message) (wp_send_json_error ($ err_message);) else (// Specify the recipient $ email_to = ""; // If the recipient is not specified, then we take 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 an email wp_mail ($ email_to, $ art_subject, $ body, $ headers); // Send a message about successful sending $ message_success =" Message sent. I will contact you shortly. "; Wp_send_json_success ($ message_success);) // Kill the ajax process again just in case wp_die ();)
We check the form for performance. The problem may arise if you have not correctly loaded the js file into the WordPress theme, and the path to it is not written correctly, namely, in the second code in the section // Include the script file.
We fill in and send the letter
Such a letter comes to the mail with a feedback.
What comes after sending
Great, we did it, we were able to create a feedback form in WordPress using three different methods, if you have any questions, then ask, we'll figure it out. Good luck!
I like it I like it
