CSS feedback form in a modal window. Feedback form in a modal window

Hello, dear readers! I already wrote about modal windows once, there was an article. In this article I will show you how to create a pop-up window on any website. We will use jQuery plugin fancybox. And to add meaning to the article, we’ll insert a form for sending a letter into the modal window. I would like to immediately note that the modal windows on this plugin work on all browsers. Let's get started!

What do we need?! not so much:

• jQuery library;
• fancybox plugin;
• PHP script for sending a message.

Download current version plugin you can use the link above. Regarding the fancybox plugin, it's very good tool to create windows on a website. You can include any video content, images (both individually and in a gallery), text, floating frames in the windows, the plugin has a bunch of settings (more on them below) + the fact that it works equally correctly in all browsers is very pleasing.

I won’t complicate the markup, just click on the link and a window with a form for sending a message will open:

Where the value of the href attribute matches the identifier div block which contains the form for sending a letter:

Let's add two fields to the form: the text of the message and email address sender, as well as a send button. After the user enters the e-mail, the text of the message and clicks send, we will first check the correctness of the entered information and then using ajax request we will send the data to the PHP script.

Initially the form is hidden:

A few styles for designing form fields and a couple of classes applied to fields when data is entered incorrectly. When the errors are corrected, the style of the fields becomes normal:

To design the “Submit” button we will:

Let's move on to the most interesting part, using the plugin. We call the .fancybox method and the link class acts as a selector:

We also cancel standard action form submit(send), this will allow us to use our own ajax request. When calling the method, I did not use a single parameter and left all the default values. However, they are worth mentioning:

Using these parameters is very simple, let's say we want to reduce the padding to the content of the content and the height of the content:

Before sending, we will check the correctness of the entered data and the correctness of the entered email address. Therefore we will need a verification function. We will use a regular expression:

The last step is sending the message. We track the click event on the “Submit” button:

We place the data entered by the user into the first two variables. We determine the length of the message (msglen) and check the entered email address (mailvalid). Next, we check if the mailvalid variable is false, which means the email address was entered incorrectly, and this input will be highlighted in red. We also check the number of characters entered into the message text; if there are less than 4 characters, we indicate that this is an error (we highlight the text input in red). $("#contact" ) .serialize() ,
success: function (data) (
if (data == "true" ) (
$("#contact" ) .fadeOut ( "fast" , function () (
$(this).before("Success! Your message has been sent:)" ) ;
setTimeout("$.fancybox.close()" , 1000 ) ;
} ) ;
}
}
} ) ;
}
} ) ;

If both fields are checked, then instead of the “send” button we show the text that the message is being sent. This gives the user confirmation that both fields are checked and the process is in progress.

Now AJAX request. The first request parameter is the data transfer type (POST or GET). Next we specify the handler file (sendmessage.php). The next parameter is data, using the serialize method we prepare data in forms for sending to the server.

If we get good response from the server (we generate this data in a PHP file), then we will hide the contact form and show a message about the success of the submission. I use SetTimeout() so that the modal window does not close immediately, but a second after sending the data.

We send the data entered by the user with using JQuery in sendmessage.php. In PHP we generate this data from the POST array, generate and send a message. If the sending was successful, we return true back to JQuery, otherwise false .

In the $sendto variable we indicate the address Email to which letters will be sent.

) else (

echo "false" ;

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 Hello, dear readers of the blog site! In this article you will learn how to create a pop-up form on a website using two ready-made solutions. On almost any website there are forms of “capture”, such as and forms for ordering goods or services. Forms are used especially often in one-page websites (landing pages) and they are needed for interaction and communication with the visitor. As a rule, these forms work quite well in terms of conversion, proven over the years. However, in addition to the forms that are found in open form, in some cases pop-up forms are used. They are very convenient, do not take up much space, because they pop up when you click a button, and they also do not redirect visitors to other pages. It turns out that the site, even within one page, does everything necessary functions on communication with the visitor.

It is about creating pop-up forms that we will talk about. I'll tell you how to do this on sites where the form is in html or made using a plugin Contact Form 7 on WordPress.

Create a pop-up form in html.

Let's look at the example of the form call back. Below is an example of a form that will open when you click on the “Order a call” or “Would you like me to call you back?” button.

Call back

To open a form, you must first hide it, we do this by specifying in the div that includes the form, style="display: none;" , so the form is hidden. It is also necessary to specify a meaningful id for this div, since in our case we are using a callback form, we call it callback .

Create a pop-up form in WordPress (Contact Form 7).

It should be noted right away that if you created forms on the site without the help of the Contact Form 7 plugin, then the option described above will suit you.

So, we need 2 plugins: Contact Form 7 and Easy FancyBox, the first for creating forms, the second for opening the form, install them. If the form you need has not yet been created, then create it.
We only need its shortcode, which looks something like this:

Now, if you want to make the form end-to-end, then add this code to the footer:

Naturally, install your own shortcode, it can be found by clicking on Contact Form 7 in the left menu, a page with a list of already created forms will open.
And if you need a form for specific page, then paste the code through the admin panel on the page (you can place the code in a widget), but not in the visual editor.

[Your short code]

Also install your shortcode.

Now we need to configure Easy plugin FancyBox. To do this, go to its settings. In the left menu, open “Settings” and click “Media Files” (not to be confused with the menu tab just above, which is also called “Media Files”). If you already have a plugin for pop-up photos installed on your site, then uncheck Images and check Inline content. Then save the changes.

All that remains is to make a button that, when clicked, will open the form. It can be placed anywhere, in the header, footer, it can be attached to one of the sides of the browser, you can also place the button in any article or page. Paste this code where you would like to see the button:

Write to us

You can decorate the button and the form as you like, giving it any style.

And that's all. If you liked the article, then tell your friends and colleagues about it, give it a thumbs up and subscribe to the group (in the left sidebar), and for this I will write even more interesting articles for you.

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. This file 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:

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.