Beautiful feedback form in a modal window. Using the service
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 “capture” forms, such as contact forms or feedback 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 a 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 the Easy FancyBox plugin. 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, 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:
send a message |
Where is the value href attribute match the identifier div block which contains the form for sending a letter:
1 |
Send Email |
Let's add two fields to the form: the text of the message and the sender's email address, as well as a submit 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 use an Ajax request to send the data to the PHP script.
Initially the form is hidden:
#inline ( display : none ; ) |
A few styles for designing form fields and a couple of classes applied to the fields when not correct input data. When the errors are corrected, the style of the fields becomes normal:
1 | Txt ( Txtarea ( Txt: focus, Input.error, Input.error: focus, |
To design the “Submit” button we will:
1 | #send ( #send : hover ( #send : active ( |
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:
$(document).ready(function() ( |
We also cancel standard action form submit, 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:
| Name | Description |
| padding | Padding to the content in the window (Default 15px) |
| margin | Distance from the edges of the browser to the window (Default 20px) |
| width | Default width for "IFRAME" and "SWF" content. Also, for "inline", "AJAX" and "HTML" objects if "AutoSize" is set to "false". Can be numeric or "Auto". (Default 800px) |
| height | Default height for "IFRAME" and "SWF" content. Also, for "inline", "AJAX" and "HTML" objects if "AutoSize" is set to "false". Can be numeric or "Auto". (Default 600px) |
| minWidth | Minimum window width (Default 100px) |
| minHeight | Minimum window height (Default 100px) |
| maxWidth | Maximum window width (Default 9999px) |
| maxHeight | Maximum window height (Default 9999px) |
| autoSize | If “true”, then autoHeight and autoWidth are also “true” (Default true) |
| autoHeight | If set to "true", the height for "inline", "AJAX" and "HTML" content is determined automatically (Default is false) |
| autoWidth | If set to “true”, for “inline”, “AJAX” and “HTML” content the width is determined automatically (Default is false) |
| autoResize | If set to "true", the content will resize as the window changes |
| autoCenter | If set to "true", the content will be centered |
| fitToView | If set to “true”, the window will be adjusted to the size of the browser before opening (Default is true) |
| aspectRatio | If set to "true", then resizing is limited by the aspect ratio (Default false) |
| topRatio | Vertical positioning. If set to 0.5, the distance to the top and bottom of the browser window will be the same. If 0 then the modal window will be on top (Default 0.5) |
| leftRatio | A similar parameter only for horizontal positioning (Default 0.5) |
| scrolling | Show scroll bars. Can be set to 'auto', 'yes', 'no' or 'visible' (Default is auto) |
| wrapCSS | Custom CSS Class |
| arrows | If set to “true”, navigation buttons will be displayed (Default true) |
| closeBtn | If set to “true”, then the button to close the window will be displayed (Default is true) |
| closeClick | If “true”, then when you click on the content the window will close (Default is false) |
| nextClick | If set to “true”, then in the gallery when you click on the content there will be a transition to the next picture (False by default) |
| mouseWheel | If “true”, then the gallery can be scrolled using the mouse wheel (Default is true) |
| autoPlay | If “true”, then when you open the first element in the gallery, a slideshow will start (Default is false) |
| playSpeed | Slideshow speed (Default 3000 milliseconds) |
| preload | Number of thumbnail images under the main image (Default 3) |
| modal | If "true", navigation and close button will be disabled (Default false) |
| loop | If “true”, then the gallery will start again after reaching the end (Default is true) |
| ajax | Option for ajax request |
| iframe | Option to manage iframe |
| swf | Option to manage swf content |
| keys | You can define keys to navigate through slideshows |
| direction | Navigation direction |
| scrollOutside | If set to "true", the script will avoid creating scrollbars (Default is true) |
| index | Overrides the start group index (Default 0) |
| type | Overrides the content type. Supported types: "image", "inline", "AJAX", "IFRAME", "SWF" and "HTML" (Default null) |
| href | Overrides the content source with the link (Default is null) |
| content | Overrides the content that will be displayed (Default is null) |
| title | Overrides the header, can be set any HTML(Default null) |
| tpl | An object containing various templates |
| openEffect/ closeEffect / nextEffect/ prevEffect |
Animation effect for actions, possible values are 'fade', 'fade', 'elastic', 'elastic' |
| openSpeed/ closeSpeed / nextSpeed / prevSpeed |
Animation speed (Default 250) |
| openEasing/ closeEasing / nextEasing/ prevEasing |
Easing method for each transition type (Default is swing) |
| openOpacity/ closeOpacity |
If set to “true”, then the transparency changes (Default is true) |
| openMethod/ closeMethod/ nextMethod/ prevMethod |
The transition effect can take the values 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut' |
| parent | The parent element of the container. This is useful for ASP.NET where the top element is the "form" (Default is body) |
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:
1 | $(".modalbox" ) .fancybox (( |
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:
1 | function validateEmail(email) ( |
The last step is sending the message. We track the click event on the “Submit” button:
1 | $("#send" ) .on ("click" , function () ( |
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 the AJAX request. The first request parameter is the data transfer type (POST or GET). Next we specify the handler file (sendmessage.php). Next parameter data (data), using the serialize method we prepare data in forms for sending to the server.
If we receive a 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 rather a second after sending the data.
PHP scriptWe 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 email address to which letters will be sent.
1 | $sendto = " [email protected]"
;
// Formation of the letter header // Formation of the body of the letter From: " . $usermail . " \r \n " ;$msg .= " Message: " . $content . " \r \n " ;$msg .= "" ; // send message |
Hello. In this lesson we will create a full-fledged feedback form, and it will appear in modal window by clicking 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:
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.
Greetings, friends. Today's tutorial will help your WordPress site have a nice and functional feedback form. We will do it using the Contact Form 7 plugin. At one time I spent a lot of time searching for a normal contact form and worthy alternative I haven't found this plugin yet.
Plugin featuresLet me remind you once again that we will be working with a plugin, so if you need feedback without a plugin, you’d better visit the article about, the setup is a little more complicated, but the option is more universal (suitable for every site) and puts less load on the servers.
The main advantage of the contact form on Contact Form 7 is its ease of customization, almost unlimited functionality and automatic design adjustment to any WordPress template. With its help, you can make not only a form for sending messages from the site. The plugin can be used to create an order button, a call back, or a complex questionnaire with checkboxes and drop-down lists. It is also possible to attach files for transfer.
In a word, the plugin is mega-functional.
If you are still concerned about the question “to do or not to do a contact form?” (you can get by by simply posting contact information on the right pages), then I will say unequivocally - it’s worth doing.
Firstly, sending a message directly from the site is more convenient than opening mail program and fill everything out manually. Saving time won't hurt anyone.
Secondly, the contact form can be customized and this will allow you to receive letters of a standard format - they will be easier to navigate. For example, you can set a standard header for a message “Order” and all emails from the orders page will arrive with this header.
Thirdly, using a contact form allows you to hide your email address and, thereby, get rid of possible spam that inevitably appears when your email box becomes publicly available.
Fourthly, it is simply stylish and modern.
Installing and configuring the Contact form 7 pluginThe plugin is in general wordpress database, so there is no need to search for its files somewhere, download them for yourself and then upload them to the hosting. Everything is made simpler - through the WordPress admin, enter the plugins section, type “Contact form 7” in the search field and install it. If you have never installed plugins, then detailed instructions how to install the plugin.
Setting up the plugin consists of two stages.
The first is setting up a specific form. There can be many different forms, each of them can contain its own set of fields. In a word, for each task and each page on the site you can separately create a feedback form, Wordpress allows this - their list will be stored in the plugin database.
The second stage is inserting the form onto the site pages. Each form we create inside the plugin will have its own unique shortcode. To insert it onto the page, you only need to insert it.
So, let's go.
To begin, in the left menu of the admin panel we find the Contact form 7 tab. A menu with two items will pop up under it - “Forms” and “Add new”.
We don’t have any ready-made forms yet, so let’s go to the “Add new” section. A page will open there asking you to select a language, and the default language will also be listed there. Just click blue button"Add new."
Form settings are divided into separate blocks. I will consider them in order.
Block “Form name”The first block is responsible for the name of your form - place the cursor on the inscription “Untitled” and enter the name you need. This name will only be displayed to you in the list of contact forms of the plugin, so make it clear to you so as not to get confused in the future by all the diversity.
Initially, this block contains standard configuration fields. It contains the name of the sender of the letter, his email address, the subject of the letter, the contents of the letter and the send button.
Required fields are marked with asterisks. If this field is left empty, the message will not be sent.
The location of the fields can be customized using regular HTML markup.
As for setting up the fields themselves, you can remove unnecessary ones and add those that you need. If you do not want the subject of the letter to be entered manually, simply delete the corresponding block.
Adding fields is also very easy. On the right side there is a button to generate a tag, by clicking on it you will see a list of all possible fields that this plugin supports.
Select the desired item and configure its settings. The plugin is in Russian, so all settings are intuitive.
The first checkbox indicates whether the field is required or optional (it adds an asterisk).
After setting up the field, you will have 2 shortcodes:
- “Copy this code and paste it into the form template on the left” – this code is inserted into the form code in the same way as all the others;
- “And paste the following code into the letter template below” - we will need this code to format the letter in the next block.
This way you can add any number of fields, checkboxes, drop-down lists, elements for attaching files, etc. to the form.
Block "Letter"Now our task is to customize the letter that we will receive. The letter does not in any way affect the functionality of the feedback form; it only serves to convey the information entered in the form.
Our task is to include all the information in the letter.
The first step is to indicate the email address to which the message will be sent (it can be anything).
The second point indicates email, from which the letter will be sent to you. I wouldn't change anything here, it's listed by default Mailbox your blog and added a tag with the name of the person sending the message.
Next we indicate the subject of the letter. As a standard, the subject is taken from the field that is filled in in the form. But you can remove this element from the form, and enter a specific topic in the field, which is set automatically in each letter. I did this for feedback forms from pages about services and advertising. Messages from there always come with the same subject “Ordering services” or “Ordering advertising” - simple and clear.
The additional headers field contains the “Reply-To:” tag so that when you respond to a letter received from your blog, you send the message to the blog, and to the address that the sender of the letter indicated in the form field. There is no need to change this field.
The “Letter Template” field is responsible for the internal content of the message you received. By default, it contains information about the sender, subject, and message text entered in the field.
At the end, the site from which the letter was sent is indicated.
If you added any additional fields to the form that were not installed by default, then do not forget to add the corresponding tag in the letter template. It was given to you in the “Form Template” block, where you generated the corresponding tag (the “And paste the following code into the email template below” field).
I love it text information This block (except for tags) can be changed to your liking. You can also add any descriptions and swap tags, arranging them in the order that suits you.
Block “Letter 2”If you want someone else to receive the message sent to you, you can check this box.
This block is configured similarly to the previous one. By default, all the fields in it are filled in so that the letter goes to the person who filled out the form (apparently so that he does not forget).
You can set up a copy to be sent to, for example, your manager or accountant.
Block “Notifications when submitting a form”In this block you can configure the messages that the user sees after he clicks the send message button. If you want to change anything, please, I left everything as it is.
Form activationAfter you have filled out all the fields, return to the beginning to the “Form Name” block and click the “save” button located on the right.
The plugin will place the form you created in the list of active ones and assign it special code something like this:
[ contact - form - 7 id = "5464" title = "Verification" ] !} |
By inserting this code anywhere on your website, you will get a ready-made form for communicating with your potential clients.
Anti-spam – Akismet and CaptchaSpammers cause a lot of trouble for website owners, and each new form that allows you to write something only adds to the number of spam bots.
If you leave the contact form plugin in its basic version, then after a while you will be bombarded with a lot of empty and meaningless messages.
There are two ways to get rid of spammers:
The first option is inconvenient because it forces visitors to manually enter additional characters. It's not that difficult, but some people don't like it.
Using the Akismet plugin is more convenient because it independently analyzes the entered data (names, email addresses, links) and, based on the accumulated database, draws conclusions about the spam or non-spam of the message.
In addition, akismet is installed on most WordPress sites to protect against spam in comments to articles. This means that when using it you will not need to install additional plugins and create unnecessary load on the site.
Spam protection with Akismet1. Install the Akismet plugin on your site and activate it - .
2. Add additional data to the contact form tags:
- in the field with the author's name add akismet:author
- in the field with sender email emails akismet:author_email
- in the field for the site address akismet:author_url
It should look like this:
After saving, contact form should block all messages sent by spammers. You can check the operation of the filter using the special test name “viagra-test-123? – when you enter it, an error message should appear.
To make the check less stringent, you can check only part of the fields, for example, name and email, and leave the site address without verification. In this case, the likelihood of spam messages getting through will increase, but you will be less likely to lose necessary messages.
Spam protection with Really Simple CAPTCHAIf you find that Akismet does not suit you (it lets through a lot of spam or blocks the necessary messages), then you can enable a captcha. To do this, install the Really Simple CAPTCHA plugin.
Open the desired contact form for editing
Select Captcha from the list of tags. In the tag settings, you can select the size of the image with symbols, otherwise there is no need to change anything. At the bottom of the settings window, 2 tags will appear, one is responsible for displaying the image, the second displays a field for entering data from this image.
For the captcha to start working, you need to copy and paste both of these tags into the left window of the form template, and then save the changes.
Placing a feedback form in a pop-up windowThe contact form does not always have to be located in a specific section of the site; sometimes, the client should be able to access it from every page of the resource.
In such cases, posting a full form is not always convenient. It is much easier to place a button in a prominent place that attracts attention. Clicking this button should already lead to the opening of the form.
Thus, a person will be able to send messages from the site without leaving the page he needs.
This is done using another plugin – Easy FancyBox.
1. Install the plugin
First of all, we install the plugin itself, it is in common base plugins, therefore, just enter its name in the admin panel of your blog in the search for plugins. After installing the plugin, a “media files” tab will appear in the “settings” section.
In this tab you need to find a list of content types that should be displayed in the pop-up window. By default there is only Images, you need to add Inline content.
Now that the plugin setup is complete, let’s move on to setting up the feedback button.
2. Paste the code into the siteIn principle, you can use a regular text link, but an image button will look better.
On your site, where you want to display a button for the contact form (in the header, footer or sidebar), insert the following code:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "contact form" alt = "contact form" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "your form id" title = "name of your form" ] !} < / div > < / div > |
In the code, you need to indicate the address of the image that you use as a feedback button, and edit the shortcode of the form itself - enter your id and title.
3. Remove the restriction on shortcodes in the sidebarThis item is required if you want to install a button in the sidebar. The sidebar in WordPress does not always allow shortcodes.
To enable this function, you need to open the function.php file for editing (directly from WordPress admin) and insert the following code before the closing bracket “?>”:
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
It will give you the ability to execute all shortcodes in the sidebar.
I ended up with this nice pop-up form:
Sometimes there is a need to place several forms on a website with different settings and fields.
For example, one button leads to a form with a name and phone number and is used to order a call back from the site, and the second should open another form where there is a detailed order application (with an address, a description field, the ability to attach a file, etc. ). In the Contact Form 7 plugin itself, you can make an endless number of form options, but how to fit them into different buttons one page?
To do this, you need to adjust the button code from the previous paragraph. The first button uses the option presented above. In the second, two values change.