Hello. In this lesson, we will do a full-fledged feedback form, and it will appear in a modal window by clicking on the button on the page. I did this lesson myself, from scratch, using only the jQuery framework and one small JavaScript "ohm. The lesson is very interesting, so please do not pass by! Below you can watch a demonstration of the form I got and also download the necessary files for work:

Step 1.  General description and operation of the feedback form:

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

• images  - a folder where all the images of our form are stored;
• index.html  - the main, "index" file, in which the button will be located to call the feedback form;
• contact.html  - the file in which the form itself is located. This file will be connected to the modal window;
• send.php  - file handler involved in sending letters;
• jquery.js  - The main jQuery framework;
• style.css  - 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 the button for calling the modal window is located, clicks it, then the form appears, in it the visitor enters all the data and the message text and sends, then he is thrown to the page with a message about the successful or unsuccessful sending of the letter. That’s all, and now we’ll begin to layout our form ...

Step 2  Button to call the form.

So that our modal window with the form appears, you need to somehow force it to do this. To do this, we just need to place an ordinary button on the page. The code for this 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 still be located. And it will be in the file contact.html, which is already located in the source code of the lesson. This form is very small, so I’ll place its code below:

Sending Administration Message:

As you can observe, walking along the code even with the naked eye, it can be seen that for a better display of the form I used a table layout. This was very useful to me to compare all the fields of the form.

Step 4  Handler responsible for sending emails

Here I will quickly tell you about the main handler for sending letters. I will not give his code here, because it is in the source. Download and see its contents. If you know php somewhere at an average level, something like me, then you can easily parse all the code for this handler yourself. If everything is ready, then move on ...

Step 5  "Twisting" the main jQuery framework

Now, as in any jQuery tutorial, we need to screw 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  Shape styling

As you can see, the styles for our form are taken out separately, to a file style.cssbecause these styles take up too much space. We just need to bind the code below to our index file:

Step 7  jQuery improvements

Now for the modal form window to work properly, we need to insert the following jQuery code:

Conclusion

So our interesting feedback form is ready. The path was long and difficult, so if someone did not understand something, I will listen to your questions in the comments to this lesson. And that's all for me, until we meet again, friends!

Sincerely, Your jQuery Explorer - M.K.

Greetings, dear reader, in this article I will show you how to create a feedback form in a pop-up window on your WordPress site. Often when developing your own website or blog, you need to establish the possibility of operational communication 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 I need a pop-up feedback form for wordpress

Reasons for use

Consider why this form is needed

1. Saving free space on the site. The contact form can be placed anywhere: in the footer or header, in the main content of the page, in the form of a floating button, etc.
2. Effective appearance. Animation of a new window appears 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.

Additional bonus: the form is easy to modify and customize to the needs of your site. The pop-up feedback form for wordpress can be presented in the form of an opening window for ordering a call, service or product, subscribing. If desired, you can add visual effects, various images, etc.

Popup plugins

Consider the tools necessary for developing pop-ups in wordpress - a special application for developing and creating websites.

Contact Form 7

This plugin is used directly for constructing a form. To install it, follow these steps:

Easy fancybox

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

Plugin settings

You can configure Easy FancyBox add-on settings through media files. Use the options menu "Settings" -\u003e "Media".

In the block that opens, just below the standard settings, the parameters of the plug-in will be located. Here usually there is a checkmark opposite the “Images” item, which indicates the activation of the pop-up window when you click on the image. It is advisable to remove it, since if there are other additional tools for creating pop-up animations, the images will double open.

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

Everyone can additionally delve into the settings of the plugin and set them to their 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 performs the function of closing the window when the mouse is clicked outside.

Step-by-step instruction

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

Form Window Processing

Where do we start? Of course, with pre-setting the form itself. Select “Contact Form 7” from the right menu, and then select the “Add new” option.

Create a new name for the form, for example, “Experiment”, drive 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 will not touch it. Now our main goal is simply to learn how to create pop-up forms.

Take a look at the result. As you can see, the plugin generated a special shortcode used for subsequent output of the form. You need to copy it.

Form Derivation

Now let's do the programming. The 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 "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 entry field:

This is what the result will look like:

Keep in mind that instead of the shortcode specified in the example, you will need to specify the one that was formed as a result of creating a new form.

Additionally, the form can be edited: add or remove input fields, enter the start and / or end text before and after the form, convert the text to a heading or display it in a separate block, use various styles, placeholders, etc. There would be time and desire!

Link styling

We also consider two ways to convert a link into a button to improve its visual display.

1 way - using additional theme styles.

The program code below can be inserted as follows:

The program code itself looks like this:

/ *** Button link display **** / .contact-us a (margin: auto; / * alignment of the block in the center * / display: block; width: 199px; / * button size * / padding: 11px 22px ; / * inner indentation * / border: 1px solid black; / * hue of the frame * / background: # 3399ff; / * background pattern * / text-decoration: none; / * conversion of the text to the unmarked * / text-align: center; / * label centering * / color: #ffffff; / * label hue * / -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;) / ** Change the color links when hovering ** / .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;)

This button turned out:

The code already says what its parameter is responsible for. Now everyone can edit the code at their discretion, experimenting with different styles and colors and creating the most suitable link for the pop-up window.

2 way - using the image in the form of a button. First upload the necessary image to the site (any one to your taste, not necessarily in the form of a button - this does not really matter). To do this, click on "Media" -\u003e "Add new" and select the desired picture. A permalink to the file will appear to the right of the image (in this example http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), copy it and add to code (do not remove quotes):

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

1

A button appeared on my site, shown in the screenshot below:

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

Adding to the menu

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

First you need to figure out exactly where to insert this code. Go to the "Editor" through the "Appearance" and among the templates select "Header (header.php)"

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

Insert your code just before the closing tag below.



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

Very often it is required to create a feedback form while hiding it. This form should appear when you click on the button or the inscription on the site in the pop-up lightbox. In this article we will write: How to make a feedback form in a pop-up window for WordPress. The output of the Feedburner subscription form. How to make a call on one page multiple forms. How to make the window with the feedback form (fancybox) close after sending and we will analyze all possible errors and their solutions.

To create a feedback form or other forms for a site on CMS WP, the Dvizhok design studio recommends the Contact Form 7 plugin, and for the pop-up window with the lightbox effect we will use Easy FancyBox.

The most popular, high-quality and easy to configure and use is the Contact Form 7 plugin - with its help you can create any contact forms and more. Since the plugin has a large number of different forms and fields, it can be used for many tasks.

In this case, to call several forms, pay attention to these parts of the code:

6. Display Feedburner Subscription Form

SUBSCRIBE

SUBSCRIBE:

You can use this code for your subscription form by changing only the address of the feed https://feedburner.google.com/fb/a/mailverify?uri\u003dCms-info to your own.

Add this code if you are using a plugin with fancybox for example Easy Fancybox:
   on_sent_ok: $ .fancybox.close ();
  to the Advanced settings section of your form.


If an error occurs: The requested content cannot be loaded. Please try again later

Such an error may be on the latest versions of the WordPress engine, it is recommended to change the class in the link:
   Feedback
  change to:
   Feedback

We changed fancybox to fancybox-inline.

Problems and solutions which are encountered:

1. When clicking on the link with the form, nothing happened - in the address bar appeared http: // site / # contact_form_pop.
  The problem was solved by replacing the plugin Easy fancybox  on FancyBox for WordPress

2. If you have a gallery connected (for example, NextGEN Gallery) or a theme that already has a lightbox effect is installed, the following is obtained: the photos are opened with the built-in lightbox and LightFancy Box lightbox, that is, you have to close them two times later.
  To avoid this, turn off the checkmark in the EasyFancy Box settings. Images  and at the top of the popup form code, replace the fancybox class with fancybox-inline. Your code will look like this :.

Feedback

That's all, if you want to "thank" our - you have the opportunity: on the right there are options for donations for the development of the portal. Or share an article in your social.styles through the services below.

Greetings, friends. Today's lesson will help your wordpress site get 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 looking for a normal contact form and did not find a worthy alternative to this plugin.

Plugin features

I remind you once again that we will work with the plugin, therefore, if you need feedback without the plugin, you should visit the article about it, the setup is a little more complicated, but, on the other hand, the option is more universal (suitable for every site) and loads the server less.

The main advantage of the contact form on Contact Form 7 is the simplicity of its configuration, almost unlimited functionality and automatic adjustment of the design to any WordPress templates. 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, callback or a complex questionnaire with checkboxes and drop-down lists. Also, it is possible to attach files for transfer.

In a word, the plugin is megafunctional.

If you are still worried about the question “to do or not to make a contact form?” (You can do this by simply placing contact information on the necessary pages), then I will say for sure - it's worth doing.

Firstly, sending a message directly from the site is more convenient than opening a mail program and filling in everything manually. Saving time will not hurt anyone.

Secondly, the contact form can be configured and this will allow you to receive letters of a standard sample - it will be easier to navigate in them. For example, you can put a standard header for the message “Order” and all letters from the orders page will come with such a header.

Thirdly, the use of the contact form allows you to hide your email address and, thereby, get rid of possible spam, which inevitably appears when an email box gets into free access.

Fourthly, it is simply stylish and modern.

Install and configure Contact form 7 plugin

The plugin is in the general wordpress database, so there is no need to look for its files somewhere, download them to yourself and then upload them to the hosting. Everything is made simpler - through the wordpress admin panel, go to the plugins section, type “Contact form 7” in the search field and install it. If you have never installed plugins, then detailed instructions on how to install the plugin.



Configure Contact form 7 plugin

Plugin configuration 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 it - their list will be stored in the plugin database.

The second stage is the insertion of the form on the site pages. Each form created by us inside the plugin will have its own unique shortcode. To insert on a page, it will be enough to insert only it.

So let's go.

First, 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”.



While we do not have ready-made forms, therefore, go to the "Add a new" section. There, a page opens offering you to select a language, and the default language is also indicated there. Just click the blue "Add New" button.



Form customization is divided into separate blocks. I will consider them in order.

Block "Name of the form"

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 be displayed only to you in the list of plug-in contact forms, so make it understandable to you so that in the future you will not get confused in all its diversity.



Block "Template"

Initially, a standard field configuration was specified in this block. It contains the name of the sender of the letter, his email address, subject of the letter, the contents of the letter and the send button.



Asterisks indicate required fields. If this field is left blank, the message will not be sent.

The location of the fields can be adjusted using the usual html markup.

As for the settings of the fields themselves, you can remove the unnecessary 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 simple. On the right side there is a button to generate a tag, 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 the settings are intuitive.

The first checkbox indicates whether the field is required or optional (it adds an asterisk).

After setting the field, you will have 2 shortcodes:

• “Copy this code and paste it into the form template on the left” - this code is pasted into the form code in the same way as everyone else;
• “And insert the following code into the letter template below” - we will need this code to fill out the letter in the next block.



Thus, you can add to the form any number of fields, checkboxes, drop-down lists, elements for attaching files, etc.

Block "Letter"

Now our task is to configure the letter that we will receive. The letter does not affect the performance of the feedback form, it only serves to transmit the information that you entered in the form.

Our task is to include all the information in the letter.



The first paragraph, we indicate the email address to which the message will be sent (it can be any).

The second paragraph indicates the email box from which the letter will be sent to you. I wouldn’t change anything here, by default the mailbox of your blog is indicated and a tag with the name of the person sending the message is added to it.

Next, we indicate the subject of the letter. By default, the theme is taken from the field that is filled in the form. But you can remove this element from the form, and enter a specific subject in the field that 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” - simply and clearly.

The additional headers field contains the “Reply-To:” tag so that when you reply to the letter received from your blog, you send a message to the blog, and to the address indicated by the sender of the letter in the form field. Change this field is not worth it.

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 entered any additional fields into the form that were not set by default, then do not forget to add the appropriate tag in the letter template. It was given to you in the “Form Template” block, where you generated the corresponding tag (“And paste the following code into the letter template below” field).

Any text information of this block (except 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 fields in it are filled so that the letter goes to the person who filled out the form (apparently so that he does not forget).

You can configure sending a copy, for example, to your manager or accountant.

Block "Notifications when submitting the form"

In this block, you can configure the messages that the user sees after he clicks the send message button. Want to change something - please, I left everything as it is.

Form activation

After you have completed all the fields, go back to the beginning of the “Form Name” block and click the “save” button located on the right.

The plugin will put the form you created into the list of existing ones and assign it a special code of approximately the following type:

[contact - form - 7 id \u003d "5464" title \u003d "(! LANG: Verification" ] !}

By inserting this code anywhere on your site, you will receive a ready-made form for communicating with your potential customers.

Fighting Spam - Akismet and Captcha

Spammers cause a lot of trouble to site 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 the basic version, then after some time, you will be attacked by many empty and meaningless messages.

There are two ways to get rid of spammers:

1. Put the required captcha (this can be done with an additional plugin - Really Simple CAPTCHA).
2. Use the anti-spammer wordpress plugin - Akismet.

The first option is inconvenient in that it forces visitors to manually enter additional characters. It's not that hard, but some don't like it.

Using the Akismet plugin is more convenient in that it independently analyzes the input data (names, email addresses, links) and, based on the accumulated database, draws conclusions about the spam or non-spam nature of the message.

In addition, akismet stands on most wordpress sites to protect against spam in the comments to articles. So, when using it, you will not need to install additional plugins and create an extra load on the site.

Spam Protection with Akismet

1. Install the Akismet plugin on your website and activate it.

2. Add additional data to the tags of the contact form:

• in the field with the name of the author akismet: author
• in the field with the email of the sender of the letter akismet: author_email
• in the field for the site address akismet: author_url

It should look like this:



After saving, the contact form should block all messages sent by spammers. You can check the filter using the special test name “viagra-test-123? - when entering 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 unchecked. In this case, the probability of passing spam messages will increase, but you are less likely to lose the necessary messages.

Spam protection with Really Simple CAPTCHA

If you find that Akismet does not suit you (skips a lot of spam or blocks the necessary messages), then you can enable captcha. To do this, install the Really Simple CAPTCHA plugin.

Open the desired contact form for editing

In the list of tags, select Captcha. In the tag settings, you can choose the size of the picture with symbols, otherwise nothing should be changed. At the bottom of the configuration window, 2 tags will appear, one is responsible for displaying the image, the second displays a field for entering data from this image.



In order 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.

Placement of feedback form in popup window

Not always the contact form should be located in a particular section of the site, sometimes, the client should be able to access it from each page of the resource.

In such cases, posting a full form is not always convenient. It is much easier to place a button that attracts attention in a prominent place. Pressing 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 with the help of another plugin - Easy FancyBox.

1. Installing the plugin



First of all, we install the plug-in itself, it is in the general plug-in database, therefore, it is enough to enter its name in the admin panel of your blog in the search for plug-ins. After installing the plugin, the “media files” tab will appear in the “settings” section.



In this tab, you need to find a list of types of content that should be displayed in a pop-up window. The default is only Images, you need to add Inline content.

This completes the configuration of the plugin, go to the configuration of the feedback button.

2. Paste the code on the site

In principle, you can use a regular text link, but the picture button will look better.

On your site, where you want to display the button for the communication form (in the header, basement or sidebar), insert the following code:



< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "contact form"alt \u003d " contact form "src \u003d "http: // link to image"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [contact - form - 7 id \u003d "id of your form" title \u003d "name of your form"] < / div > < / div >

In the code you need to specify the address of the image that you use as a feedback button, and edit the shortcode of the form itself - register your id and title.

3. We remove the restriction on shortcodes in the sidebar

This item is necessary if you want to install the button in the sidebar. Not always the sidebar in WordPress allows you to execute shortcodes.

To enable this function, you need to open the function.php file for editing (directly from the wordpress admin area) and insert the following code before the closing bracket “?\u003e”:

add_filter ("widget_text", "do_shortcode");

add_filter ("widget_text", "do_shortcode");

It will make it possible to execute all shortcodes in the sidebar.

I got such a nice pop-up form:



Several different pop-up forms on one page.

Sometimes it becomes necessary to place several forms on the site with different settings and fields.

For example, one button leads to a form with a name and phone and serves 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 infinite number of form options, but how to cram them into different buttons on the same page?

To do this, you need to adjust the button code from the previous paragraph. The first button uses the above option. In the second, two values \u200b\u200bchange:

1. Link changes, set href to # contact_form_pop_2
2. Change id id to the same value # contact_form_pop_2

(Last update: 07/08/2016)

Hello everyone! It's me again, with a helpful post - wordPress popup  - For beginners and not just WordPress users. If you are interested wordPress popup plugin, it is also called a modal window plugin, then you, friends, have hit the right destination.

The plugin, which I will present below, you can use for: Contact Form 7 in a modal window; any contact form (feedback) in a modal (pop-up) window; video in a modal window; Pictures in a popup window posting useful information with links; mail subscription form for new articles in the modal window  and so on and so forth of everything, and you will not list. The plugin is very simple, without complicated settings and almost does not create additional load on / site.

Easy Modal Plugin - Popup / Modal Window for WordPress


  WordPress Modal Plugin - Easy Modal

You can install this plugin in the standard way, through the admin panel - Plugins - Add a new one and enter the name Easy Modal in the Search for plugins field, press Enter. In the list, he should be the first. Install and activate it as usual. And then you can proceed to create a new modal window.

To do this, click on the new Easy Modal section that appears and select Modals:

  Easy Modal - creating a new modal window

After that, at the very top of the page, click the Add New button:


  Add new window

And here, everything is simple:


  Create a popup with video

In the general settings (General tab) give the name of the new window (it will not be displayed, this is for you, if, for example, you create several modal windows); load type Load Sitewide (for the whole site); window title and finally paste into the editor (Text mode) the code you need. I have inserted a YouTube video code in the example.


  Modal Window Setup

In the parameters you can select the window size; use the background or not; animation type for modal / popup; the location of the window, and you can also fix the window (check the box and specify the indent from the top of the screen).

On the Examples tab, you will find code examples to display a popup in WordPress:

  WordPress modal output code

Here you can select a simple text link, button or icon. Please note that each newly created window is assigned an eModal - class. The first window created will have the eModal class - 1; the second eModal - 2; and so on. You only need to substitute the number after the - sign. You can embed this code in or anywhere in your article. Naturally, you can write any text in the code. Yes, I almost forgot that after creating a modal window on the right side of the page, do not forget to click the Publish button.

I inserted the code of the modal window with the video in the sidebar as a button:

  Button on the sidebar of the blog

A visitor clicks on it and a window opens with a video:


  Modal window with video

I hope, friends and comrades, you understand the general principle of working with the Easy Modal plugin. Just add that you can then or immediately for a modal window to make out the appearance by clicking on Theme. Unfortunately, in the free version of the plugin there is only one theme for decoration, but you can arrange it as you like, there are enough settings. When you adjust the appearance of the modal window, you can immediately see a preview of the design on the right:


  Editing a theme - modal / popup window design

After all settings for the appearance of the window, click the button on the right Save. And finally, ladies and gentlemen, I will show an example of the output of the Contact Form 7 contact form in a modal window.

Create a new modal window, as shown above, and simply paste the Contact Form 7 shortcode into the text editor (if you have this plugin installed, if not,):


  Create Contact Form 7 popup
  Button write to the author after the message

If the reader wants to contact you, he will click a button and the contact form will open in a modal window:

  Form for contacting the author in a modal window

Something like that. Also, all your created pop-ups will be displayed on the page (Modals item), where, by the way, the classes for each modal window are indicated:


  Created modal windows on WordPress