Js popup window with form. WordPress feedback form: we create quickly and efficiently. Source code for calling the form and handler

Hello dear reader, in this article I will show you how to create a form feedback in a popup 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 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 there are other additional tools creating a popup animation will occur double opening images.

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 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 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 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 ; /*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”.

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.

Hello. In this lesson we will make a full-fledged feedback form, 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 that, our modal window appeared with the form, you need to somehow force it to do it. 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:

As you can see, going through the code, even with the naked eye you can see that to display the form better, I used 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 give its code here, because 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 full-fledged work In the form's modal window, 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 doesn’t understand anything, I’ll 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.

Greetings to my readers, I have gained experience and will tell you about the principles of operation of the feedback form php connections. I'll show you on clear examples, so that you understand how everything works and how the interaction occurs between the input form itself (its input fields) and the handler file written in PHP. In addition, you can download the sources for free along with .

Of course, it will be great if you have at least a little understanding of HTML / CSS because... You will have to drag the code onto your page by analogy. PHP language We won’t touch on it, I’ll show you all the necessary edits that you need to make for yourself.

UPDATE: Based on the responses from readers, I realized that I need something more beautiful and functional, please meet me, check it out and take a look. Choose which one you like best)

UPDATE2: Version 3.0 Adaptive Landing+ ajax form with transmission of UTM tags, read and take a look. You'll like it

I remembered myself when I first tried to create a feedback form in PHP on my own, and to be honest, it was labor-intensive, because... I didn’t understand what and how was happening. Patience and perseverance, friends, and you will succeed.

We will study the analysis of the feedback form itself using an example landing page (Landing Page), by the way, there is a separate article on. You can see how this works in action using the buttons below, I am attaching the sources of this one-page page and the main php handler file (this file will process and send the email)

After downloading the sources and unpacking the archive, you will see the following file structure:

image - all images that are used for the Landing Page itself, buttons, etc.
js - javascript scripts, which provide for example a pop-up modal window on the page and other visual effects
index.html - index file our one-pager
index1.php - a handler file into which values from the form are transferred, then a letter is generated from the received variables and sent to the specified email address. Index1.php will also act as an intermediate notification page about the successful sending of data from automatic redirection back to index.html (i.e. our one-page page)

It is important that your hosting, where the site files are located, supports PHP processing, otherwise the index1.php file will not be executed and will not work. To clarify this nuance, contact the campaign where your hosting is registered or just test it - it works, it means there is support. If not, then enable the php language support option

Take a look at the diagram of how all elements interact (page, form, handler)

Source

Let's take a look at how one of the buttons works, which brings up a modal pop-up window containing a feedback form. This given source code is not something you can insert into a page once or twice and it will work. You will have to customize it yourself to suit your design and needs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Request a call back Request a call back

Below is the complete source code of the index1.php handler, in order to set up sending to your mailbox, change “ [email protected]"to your own, the rest, in principle, can be left unchanged

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

You will be contacted

You will be contacted body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Change the current page address after 3 seconds (3000 milliseconds)*/

Call up the window and enter the data for test check our form

Let me remind you once again, your hosting must support processing php files, otherwise our handler will simply not be executed and no letter will be sent to specified email-address. The result of a successfully completed feedback form

That's all for me, I tried to convey the meaning and operation of the script the best way. If you have any questions, feel free to contact me in the comments or on VK (see contact details). I wish you easy and productive work To you.

Hi all. We were bombarded with questions about how to implement a form that appears in a modal window after clicking a button, and after submitting, a message about 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 an aggressive sale. Allegedly, now is the time when the user, upon seeing open form believes that they are trying to sell him something. 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.

Between head tags connect styles:

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) ( // Displaying the text of the sending error $(formNm).html(error); ) )); ); ));

I won’t give the original css code 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 don't forget to change your addresses Email on 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 a paid plan and not 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

Due to numerous requests from users, we found a private solution for the implementation that appears when you click on a button (for example, “Order a call”).

To add a pop-up form to your landing page:

1. Log into the editor of the page where the form should be embedded.

2. To resolve the conflict jQuery libraries, copy the code posted by , and paste it through the Scripts tool, setting the position to "After the tag:

3. Using the Button tool, create a button:

This button will appear on landing page, so the text on it must correspond to the target action that will follow its click (for example, “Order a call!”). In the URL line, you can specify any link (for example, to the main site), since it is only needed to create a button.

4. Using the Shape tool, create a shape:

The form will appear after clicking the button; the name of the labels must correspond to the target action (for example, “Name” and “Phone” for the “Order a call!” button).

7. Find the lines in the code:

In these, you will need to change the ID value for each element accordingly.

8.1 In ID number 1 in the screenshot you need to enter the form ID. To do this, click once on the form fields, go to the “Advanced” tab of the “Properties” menu on the right and copy the “Anchor ID”:

8.2 In line 2 in the screenshot you need to enter the ID of the button associated with the form.
8.3 In line 3 in the screenshot - the ID of the button that will be displayed on the page.

That's all. The pop-up form is ready.

If you wish, you can change the appearance