Simple WordPress feedback form. Making a pop-up responsive contact feedback form in WordPress

1 vote

Good day, readers of my blog. Andrey Zenkov is with you. WordPress form feedback- an important part of any website, we’ll talk about it today. Let's consider specific examples on the most popular CMS - WordPress. Make yourself comfortable, pour some tea, because a long, fascinating and informative article awaits you.

I want to start my story today with the words of Richard Bach: “There should be no limits for us.” I urge all my readers to never stop there. Every time you observe stagnation in your development, make every effort to break through the next ceiling. Beyond it, even greater success awaits you.

What is a feedback form and what is it for?

Feedback form is a module on the website that is necessary for operational contact between the resource owner and visitors. What is it for? I have identified three main reasons for you:

  • Protection from spam bots. Email address parsers will add you to their database if you simply post it on your website. This will lead to constant receiving of messages that do not provide any value. When creating a form, I recommend hiding your address;
  • Getting all the information. In order for the user to convey to you everything he wants the first time, add the necessary fields to the form (phone number, comment, message subject, etc.);
  • Saving visitors time. They will no longer have to look for your address, go to their email client and type a message. This can be done directly from your resource.

There are more advantages, I have highlighted the main ones for you. I recommend installing a plugin with captcha. This measure will protect you from spam bots; you will receive letters only from interested, real guests of your project.

If you want to learn how to protect yourself not only from spam bots, but also from other, more serious threats, I recommend taking the course “ Total WordPress protection ”, prepared by an experienced webmaster.


Ready-made solutions for your project

If you don't know how to develop your own convenient form feedback for the site, I have prepared several interesting plugins that are easy to install on our own. You don't even need special knowledge in .

Contact Form 7

After specifying all the settings, you will receive a code for a ready-made contact form with emails sent when you click a button. You can place it anywhere on your website.

What can be concluded?

Feedback form sent by email - perfect solution to communicate with your subscribers. Don't miss the opportunity if people want to communicate with you. Someone will teach you something new, someone will give you helpful advice. Today I told you about the options that I use myself when creating projects. Choose the best for yourself and start acting! And this article comes to an end.

Follow the blog updates to regularly learn something new and interesting.

If you came to this post looking for feedback for your site, then you are in the right place.

To be more specific, I have compiled a selection of the five best feedback plugins for WordPress. We all know how important it is, especially when you don't want to write your contact information or automate the process of receiving questions from your clients.

I present to your attention the TOP 5 WordPress plugins for creating feedback.

1. WPForms

WPForms is a young WordPress plugin for creating feedback forms.

pros

Used visual editor Drag&Drop, which makes this plugin even more “user-friendly” (easy to use).

The light version does not limit the installation of the plugin on an unlimited number of domains.

The paid version of the plugin includes such functionality as: multi-page forms, email subscription, payment forms, order forms, use of your own field logic, and so on.

Minuses

Although the light version is free, you still need to upgrade the plugin to the Pro version to unlock the new functionality that was described in the “Pros” above.

The main task for WPForms is to make the plugin as convenient as possible for users. Since not everyone is familiar with HTML/CSS in order to directly correct form fields, etc. Therefore, it does not have some of the difficult-to-understand functions that other plugins have.

Gravity Forms is a premium plugin that provides as much functionality as you could possibly want.

pros

Powerful plugin with unlimited functionality.

The plugin comes with premium support, as well as extensive documentation, FAQ and discussion forum.

Minuses

Gravity forms does not have a free version and most likely it will be an expensive product for one site. If you have several websites (multi-site), then cost should not be a problem for you.

Ninja forms are perfect solution for creating free forms in WordPress. Can also be used to create highly interactive forms.

pros

The plugin is available for free from the official WordPress website. You can install it on an unlimited number of sites.

In addition to free version there is a premium one, which also has more features(such as: SMS notifications, Freshbooks, Campaign Monitor and Salesforce).

Excellent community support, detailed documentation, and email support.

Minuses

The main and only disadvantage of this plugin is that if you want to use add-ons for it, they must be purchased, since many of them are distributed on a paid basis.

Pirate is a free WordPress plugin written by the Themeisle team. Easy to customize and convenient for creating simple shapes.

pros

Absolutely free to download and subsequent updates.

This plugin has all the many functions, for example: CAPTCHA for checking against bots and SMTP, to remove the possibility of the letter ending up in the Spam folder.

Minuses

This plugin is used if you need to create a simple form. If you need to create something more complex, this plugin most likely will not suit you.

Lack of addons (other plugins) that work together.

Fact! This plugin has the most downloads of all form building plugins.

pros

The main advantage is that it is free and can be installed on an unlimited number of sites.

Due to its popularity, Contact Form 7 was able to attract many developers, who in turn wrote a large number of add-ons. Many of them are distributed free of charge.

It is a great addition for creating a simple feedback form for your blog.

Minuses

Setting up the form can be a bit difficult for novice users, as the interface is a bit confusing.

Due to its free nature, support for the plugin is minimal. You are getting free updates plugin, but to solve any problem, you will need to contact official forum WordPress repositories or the general forum in the hope that someone will help.

Popup forms

Many of the plugins that were described above in this post have the ability to connect forms using shortcodes.

The official documentation of the WordPress site writes that “Shortcode” is a set of functions for creating special elements on the page used in the content of posts or pages.

To get started, take any shortcode and use Popup Maker to create a modal window where you need to add a form.

Essentially that's all you need to create modal window with a feedback form.

Conclusion

If you are looking for a plugin that will solve all your desires, then most likely you will not find it, because there will be something wrong with each one. In some places the functionality will not suit you, in others the design will not work.

Each of them needs an upgrade. Most likely you will have to find a developer who will add some functionality for you or correct the site's styles.

Quality has always sold, so I wouldn’t expect extensive functionality from free plugins. Use what you can still afford. As soon as you have the opportunity, update the plugin to the “Pro” version or buy another plugin (maybe you like one better).

Take your time with the purchase, analyze what really suits your needs, and only an informed choice and analysis will allow you to rejoice after a successful purchase.

Hello dear reader, in this article I will show you how to create a popup contact form on your WordPress site. Often, when developing your own website or blog, it is necessary to establish the ability to quickly communicate with visitors to an Internet resource. In this case, the pop-up feedback form for WordPress will come in handy, which will help to establish quick contact with users.

Why do you need a popup feedback form for WordPress?

Reasons for use

Let's look at why this form is needed

  1. Saving free space Online. The contact form can be placed anywhere: in the footer or header, in the main content of the page, as a floating button, etc.
  2. Effective appearance. The animation of the appearance of a new window looks interesting and unusual
  3. Availability. You can leave entries in this form from anywhere on the site; users do not need to return to the main page.

An added bonus: the form is easy to modify and customize to suit the needs of your site. A pop-up feedback form for WordPress can be presented in the form of an opening window for ordering a call, service or product, or making a subscription. If desired, you can add visual effects, various images, etc.

Plugins for installing a popup form

Let's take a look at the tools required to develop popups in wordpress - special application for development and creation of websites.

Contact Form 7

This plugin is used directly to design the form. To install it, follow these steps:

Easy FancyBox

This plugin is suitable for developing a pop-up window effect. The Easy FancyBox installation sequence is similar to the previous plugin installation.

Setting up plugins

You can configure the settings of the Easy FancyBox add-on through media files. Use the menu options “Settings” -> “Media files”.

In the block that opens just below standard settings The parameters of the plugin itself will be located. There is usually a checkmark next to the “Images” item, which indicates that a pop-up window will be activated when you click on the image. It is advisable to remove it, since if there are other additional tools When creating a pop-up animation, images will open twice.

But that is not all. Check the box next to “Inline content”

Anyone can further delve into the plugin’s settings and set them to their own discretion.

Tip: if you want the form to always be open, then uncheck Easy settings FancyBox checkbox next to the “Close FancyBox when overlay is clicked” option, which performs the function of closing the window when the mouse is clicked outside of it.

Step-by-step instruction

Well, with “boring” preliminary preparation done, now let’s move on to the “tasty” part - how, in fact, the pop-up return form is developed wordpress communications.

Handling the Form Window

Where do we start? Of course, with preliminary configuration of the form itself. Select “Contact Form 7” in the right menu, and then the “Add new” option.

Come up with a new name for the form, for example, “Experiment,” enter it into the input field of the window that opens, where the text “Title” is located, and click on the “Save” button. You can change other parameters, including the form template itself, but we won’t touch it. Now ours the main objective– just learn how to create pop-up forms.

Take a look at the result. As you can see, the plugin generated a special shortcode that is used to subsequently display the form. You need to copy it.

Form output

Now let's get down to programming. New program code can be inserted anywhere on the site, for example, in “Contacts”, and others. In our example new form will be displayed in the widget. Select “Appearance” in the menu, then click on “Widgets”, then in the window that opens, click on the “Text” option.

Now click on the “Add Widget” button

Paste the following code into the Content input field:

Write a letter

This is what the resulting result will look like:

Please note that instead of the shortcode specified in the example, you will need to specify the one that you created as a result of creating a new form.

Additionally, the form can be edited: add or remove input fields, enter initial and/or ending text before and after the form, convert the text into a title or display it as a separate block, use different styles, placeholders, etc. If only there was time and desire!

Link styling

Let's also look at two ways to convert a link into a button to improve its visual appearance.

Method 1: Using additional theme styles.

The following code can be inserted as follows:


The program code itself looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /***Displaying a link in a button form****/ .contact-us a( margin:auto; /*aligning the block in the center*/ display:block; width:199px; /*button size*/ padding:11px 22px ; /*inner padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*text-align:center; /*centering the caption*/ color:#ffffff; /*color of the caption*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease) /**Change the color links when hovering the cursor**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease;

/***Displaying a link in a button form****/ .contact-us a( margin:auto; /*aligning the block in the center*/ display:block; width:199px; /*button size*/ padding:11px 22px ; /*inner padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*text-align:center; /*centering the caption*/ color:#ffffff; /*color of the caption*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease) /**Change the color links when hovering the cursor**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease;

The result is a button like this:

The code already says which parameter is responsible for what. Now everyone can edit the code to their liking, experimenting with different styles and colors and creating the most suitable link for the popup.

Method 2 – use an image as a button. First, upload the required image to the site (any image you like, not necessarily in the form of a button - it doesn’t really matter). To do this, click on “Media” -> “Add New” and select the desired picture. A permanent link to the file will appear to the right of the image (in in this example http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), copy it and add it to the code (do not remove the quotes):

Add the resulting code to the main output code of the form instead of the text “Write a letter”.

1

My website displayed the button shown in the screenshot below:

And this is what the button will look like if you leave the additional style described in the first method:

Add to menu

So that the pop-up feedback form for WordPress can be called directly from the menu, you must use the following code

1 2 3
  • Write a letter
  • Write a letter
  • First you need to figure out where exactly you need to insert this code. Go to the “Editor” through “Appearance” and among the templates select “Header (header.php)”

    Now find the place where the menu code is located. Find the following information:

    1 2