How to make a feedback button in WordPress. Spam protection with Akismet

Useful tips

Hi all. We were bombarded with questions about how to implement the form that appears in modal window after clicking the button, and after submitting, a message indicating success or failure would be displayed.

I think there are plenty of similar things on the Internet, but since people are asking, I decided to do it. Moreover, such functionality must be present on almost every landing page to implement a button call back. And indeed, now there are more and more AB testing results showing that open forms work worse than those hidden in a modal window and opened after clicking a button.

Some argue that this is due to the fact that people are slowly “developing immunity” and the open form is aggressive selling. Allegedly, now is the time when the user, upon seeing an open form, believes that they are trying to “sell” something to him. I don’t entirely agree with this theory, but there is a grain of truth. This may be true in some types of business. Well, now let's get down to implementing the form.

Note! I will not describe each action in detail, but I suggest you ready-made option in the source. If you have any questions, write in the comments. We'll figure out:)

Today we’ll start not with jQuery, but with the layout of the button and form. We will include all scripts at the end of the page.

A button that, when clicked, will open a modal window:

Submit your application

You can set any class, but in the href write #modal - this will be the id of the container with shading and a contact form.

Now I will give the code for the form and the block on which the form will be located:

Leave your contact details and our consultant will contact you. I want this form for my website

After adding styles, it looked like this:

To create a modal window, the Remodal library was used. This is a set of css and js files, just for creating animated modal windows. You can download it from the link or with my edits at the end of the article.

We add styles between the head tags:

And before the closing body tag, add scripts:

Script.js is a script for processing the form. The same Ajax that allows us to carry out the entire procedure without reloading the page:

$(document).ready(function () ( $("form").submit(function () ( // Get the form ID var formID = $(this).attr("id"); // Add a hash to the name ID var formNm = $("#" + formID); $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) ( // Output text of the sending result $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Output the text of the sending error $(formNm).html(error); ) )); return false; ) ); ));

I won't give source css and js from the files responsible for the modal window and form, since they are quite large. If so, look at the source. And here php handler largely standard (if I may say so):

Please do not forget to change your email addresses to your own.

Like this ajax form it worked out. Sorry for not trying to explain in detail how each element was made. I just wanted to give a finished result, but there is no point in describing all the animations and appearances. Download the source and implement it on your website. And that’s all for today. Good luck to all!

Guys, I urge you to test the form on a real or virtual server(hosting). Please make sure that your server supports php, you have paid tariff and not a test period. Otherwise, in 90% of cases the form will not work.

Don't wait for a letter at your place mailbox, if you simply opened the index file in the browser and clicked the "Submit" button. Php is a server-side language!

If you are too lazy to figure it out and make the form yourself, then I recommend paying attention to.

Updated version article is located

Hello. In this tutorial we will make a full form feedback, and it will appear in a modal window when you click on a button on the page. I did this lesson myself, from scratch, using only the jQuery framework and one small JavaScript. The lesson is very interesting, so please don’t pass it by! Below you can view a demonstration of the form I created, and also download necessary files for work:

Step 1. general description and how the feedback form works:

First, I will tell you what files we will need and, in fact, why they are needed:

images - the folder where all the images of our form are stored;
index.html - the main “index” file in which the button for calling the feedback form will be located;
contact.html is the file that contains the form itself. It is this file that will be included in the modal window;
send.php - a handler file responsible for sending letters;
jquery.js - the main jQuery framework;
style.css is a file with cascading style sheets for our form.

So, let's move on and in order... The form will work as follows: The user goes to the page on which there is a button to call the modal window, presses it, then the form appears, in which the visitor enters all the data and text of the message and sends, then it is redirected to a page with a message about the successful or unsuccessful sending of the letter. That's all, now let's start laying out our form...

Step 2. Button to call the form.

So, in order for our modal window with the form to appear, we need to somehow force it to do this. To do this, we just need to place a regular button on the page. The code for such a button is shown below, along with the styles applied to it:

Write a message to the administrator

Step 3. The form itself + settings for it

Now let's figure out where our feedback form will be located. And it will be located in the file contact.html, which is already located in the source code of the lesson. This form It’s quite small, so I’ll place its code below:

Sending a Message to the Administration:

*Name: *E-mail: Subject: *Message:

As you can see, going through the code, even with the naked eye you can see that to display the form better, I used a table layout. This was very useful for me to equalize all the form fields.

Step 4. Processor responsible for sending letters

Here I will quickly tell you about the main processor for sending letters. I will not provide its code here, since it is in the source code. Download and view its contents. If you know PHP somewhere at an intermediate level, like me, then you can easily parse the entire code of this handler yourself. If everything is ready, then move on...

Step 5. “Screwing in” the main jQuery framework

Now, as in any jQuery lesson, we must “screw in” the main jQuery framework. To do this, let’s go back a little, to where our button is located, and between the tags and insert the following code:

Step 6: Styling the Form

As you can see, the styles for our form are placed separately in the style.css file, since these styles take up too much space. We just need to link the code below to our index file:

Step 7. jQuery improvements

Now for the form modal window to fully work, we must insert the following jQuery code:

$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href")); ) )); ));

Conclusion.

Our interesting feedback form is ready. The path was long and difficult, so if anyone does not understand anything, I will listen to your questions in the comments to this lesson. And that’s all for me, see you again, friends!

With sincere respect, your jQuery guide - M.K.

Hello my beloved reader! In this episode, I will tell you how I implemented a pop-up call back form on a WordPress site.

The fact is that the callback form is very often used by most webmasters precisely for the convenience of users, so that they complete the target action as soon as possible - that is, leave a request on the site.

You can often see them on many commercial sites that provide services or offer to buy any products. In fact, online stores are not full cycle, that is, when there is no cart, but there is something like a pre-order through this form. Here's what they might look like:

Or in the form of a button also in the site header:

Someone can use them in the footer of the site, this is also allowed. It looks like this:

So, friends. All these were examples, now we will implement the same callback form for a WordPress site in practice. I will do it on a website dedicated to landscaping the territory of Kaliningrad.

First of all, we need to log in and go to the plugins section, where we will add new plugin entitled Contact Form 7. This is the most popular solution for creating simple and complex blogs.

Not a damn thing - 24 million downloads already says a lot. Click on the install button and it will appear on the left side of the admin panel.

The Russian language is already selected by default, so no need to worry. We continue our process.

Now we need to add the fields that will participate. You already have them by default, in principle you can leave them, don’t delete them. The only thing I would add is a mandatory field with a phone number.

To do this, we need to click on the “generate tag” button on the right side of the screen and select the appropriate item. Like this:

Click on the “Phone number” item, check the required field and then copy the resulting tag into the form on the left along with other names and into the letter template.

On the left side you will have an entry like this:

Place a phone number field below .

On the left side is the template incoming letters we will have a record like this:

Don’t forget to also check the “Use HTML email format” checkbox.

At the bottom you will need to translate a line like this “Please fill in the required field” into Russian, something like this: “Please fill in the required field”

In the addressee field, add email where applications from the site will fall.

Great! The call back form for the site is almost ready. Now we need to make it pop up when clicked.

Creating a Popup Form

Our task is to ensure that when you click on the link button, a pop-up call back form appears. To create it, we need a special plugin based on the Jquery language, it’s called Easy FancyBox. It is also available for installation directly from the admin panel. Let's now add it.

Just click on “Install” and it will start working for you. It has settings for media files. We can go over them briefly.

Image sizes – set your own values for thumbnails, medium and large images.

FancyBox effect for the following media categories:

Pictures
PDF documents
Inline content
SWF graphics
Youtube
Vimeo
Dailymotion
IFrames

Indicate what you want to use in the future. I'll leave it for pictures only.

You can also set transparency (Opacity) and color. I didn't set anything, I left everything as is by default.

Window

Show window close icon
Header color and border color
Dimensions (default 560x340x10)
Behavior (delay in seconds when the callback form appears on the site and closing speed).

Compatible with other browsers and devices

Enable rules for browser IE 6 and 7 versions (styles mean)
Enable style rule for IE 8 browser

I didn't specify anything in them, although you can experiment with cross-browser functionality of the form.

Images

Auto-detection for image extensions – jpeg, png, jpg. You can add your own extensions
Apply to all linked images
Next, I simply did not change the settings, I left everything as is. Do the same.

Great! Now let's save all this wealth of options.

Now we listen very carefully, watch and repeat after me. It is best to place the call back form in the most visible place, that is, at the very top of the site header, under phone numbers and contacts. That's what we'll do. Let's go to the header template. php and paste this code:

Back call

< a id = "myButton" href = "#contact_form_pop" class = "fancybox" >Back call< / a >

< div style = "display:none" class = "fancybox-hidden" >

< div id = "contact_form_pop" >

< / div >

Don’t be alarmed that there is an extra div tag here; in my site layout it didn’t spoil the design or cause an error, but in another case there was an error. Experiment with different templates this way and that.

Pay attention to the function in which the form is displayed:

[ contact - form - 7 id = "92" title = "Call back form" ] !}

You may ask, where can I get it? Everything is elementary, Watson! Go to Contact Form 7 -> Forms and there you will see a shortcode for inserting anywhere on the site.

Now I'll save the page I edited and see what I ended up with.

field size, font and design of the “Submit” button. Be patient a little J

Design for call back form

I decided to change the size of the name, email and phone fields in the design. The standard input is not quite suitable. How to find out their correct class? This is done by inspecting the elements, right-clicking and clicking on view element code and below you will see all the elements and classes.

This is the code I inserted into the style sheet to get the callback form design I needed.

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, you need to install the ability operational communications with visitors to the 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 pop-up feedback form for WordPress? Reasons for using it

Let's look at why this form is needed

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.

Effective appearance. The animation of the appearance of a new window looks interesting and unusual

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 you have other additional tools for creating 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 the “Close FancyBox when overlay is clicked” option in the Easy FancyBox settings, which closes the window when you click outside of it.

Step-by-step instruction

Well, with “boring” preliminary preparation That's it, now let's move on to the “tasty” part - how, in fact, the WordPress pop-up feedback form is developed.

Handling the Form Window

Where do we start? Of course, with preset 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 our main goal is to simply 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, the new form will be displayed in the widget. Select from the menu sequentially " Appearance", 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 Starting text Ending text

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 ; /*padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*converting the text to unlined*/ text-align:center; /*centering the label*/ color:#ffffff; /*shade of the label*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; ) /**Changing 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; 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 at their own discretion, 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”.

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

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

Below, paste your code just before the closing tag.

In general, there is nothing difficult in adding a contact form to your website, the main thing is to have some free time and the desire to thoroughly study all aspects. Now you know what it is contact form, why it is needed, how to use it on the site, and how to process a link to call a window with a pop-up effect. Good luck to you and success in this difficult but exciting business of website building.

There are many WordPress plugins for creating contact forms on your blog or website. most notably, it allows you to embed a contact form directly into posts and WordPress pages(while many plugins force you to use custom template to the page, thereby limiting its editing).

Embedding the form on the page is usually sufficient, but what if you want the form to appear in a popup when the user clicks the Contact Us link? To realize such a desire, you need to use two WordPress plugin at the same time: Easy FancyBox

1. First of all, install plugins and Easy FancyBox.

2. For simplicity, we will use the Contact Form 7 form already created by the plugin itself during installation for the example. On the Contact Form settings page, take the form code, which you need to copy and paste into WordPress editor to create a form.

3. Create new page in WordPress. In order to add a contact form you need to paste the code found in square brackets from the Contact Form 7 settings page to your page. Make sure to paste the code correctly, exactly as the plugin displays it.

4. Your WordPress now has a contact form. We decided to make it pop up in a modal window after the user clicks on the link. The Easy FancyBox plugin comes into play. With its help, you can make any page element appear in a pop-up. Open the page edit, click on the TEXT tab and add the following HTML code:

5. That's it, now we have a link that “launches” the contact form in a pop-up window. Congratulations! You'll probably need to tweak the CSS of your email forms to get the width, height, and email messages to display correctly. possible errors when filling. This should be enough to get you started.

How to make a feedback button in WordPress. Spam protection with Akismet

Popular articles

Latest articles

Sections

Pages

Special projects

Contacts