Wordpress popup form. Popup for WordPress

Greetings dear reader, in this article I will show you how to create a form feedback in the popup on your WordPress site. Often, when developing your own website or blog, it is necessary 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.

What is the wordpress popup feedback form for?

Reasons to use

Consider why such a form is needed

1. Saving free space on the site. A contact form can be placed anywhere: in the footer or header, in the main page content, as a floating button, etc.
2. Effective appearance. The animation of the appearance of a new window looks interesting and unusual
3. Availability. You can leave notes in this form from anywhere on the site, users do not need to return to the home 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 as an opening window for ordering a call, service or product, or subscribing. Optionally, you can add visual effects, various images, etc.

Popup form plugins

Let's take a look at the tools you need to design pop-ups in wordpress, a custom application for designing and building websites.

Contact Form 7

This plugin is used directly for constructing the 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 the same as for the previous plugin.

Configuring plugins

You can configure the parameters of the Easy FancyBox add-on via media files. Use the options in the "Settings" -> "Media" menu.

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 item "Images", which indicates the activation of the pop-up window when you click on the image. It is advisable to remove it, since in the presence of others additional tools creating a pop-up animation will double-open the images.

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

Anyone can additionally delve into the plugin settings and set them at their discretion.

Tip: if you want the form to always be open, then uncheck the box next to the option "Close FancyBox when overlay is clicked" in the Easy FancyBox settings, which performs the function of closing the window when the mouse is clicked outside of it.

Step-by-step instruction

Well, we're done with the "boring" preliminary preparation, now let's move on to the most "tasty" part - how, in fact, the pop-up form of the feedback is being developed wordpress links.

Form window handling

Where do we start? Of course, with the preliminary configuration of the form itself. Select the "Contact Form 7" item in the right menu, and then the "Add new" option.

Think of a new name for the form, for example, "Experiment", type it into the input field of the window that opens, where the text "Title" is located, and click the "Save" button. You can change other parameters, including the form template itself, but we will not touch it. Our main goal right now is just to 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 for the subsequent display of the form. You need to copy it.

Form deduction

Now let's get down to programming. New program code can be inserted anywhere on the site, for example, in "Contacts", and others. In our example, the new form will be displayed in the widget. Select "Appearance" in the menu in sequence, 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 program code into the "Content" text box:

This is how 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 starting and / or ending text before and after the form, convert the text into a heading or display it in a separate block, use different styles, placeholders, etc. There would be time and desire!

Styling a link

Let's also look at two ways to convert a link to a button to improve its visual display.

Method 1 - using additional theme styles.

The code below can be inserted as follows:

The program code itself looks like this:

/ *** Displaying a link as a button **** / .contact-us a (margin: auto; / * aligning the block in the center * / display: block; width: 199px; / * button size * / padding: 11px 22px ; / * padding * / border: 1px solid black; / * border tint * / background: # 3399ff; / * background pattern * / text-decoration: none; / * converting the caption to unlined * / text-align: center; / * centering the caption * / color: #ffffff; / * shade of the caption * / -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;) / ** Change color hover links ** / .contact-us a: hover (-moz-box-shadow: 0 0 7px # 111; -webkit-box-shadow: 0 0 7px # 111; box-shadow: 0 0 7px # 111 ; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;)

The result is a button like this:

The code already says which parameter is responsible for what. Now everyone can edit the code as they see fit, experimenting with different styles and colors and creating the most appropriate popup link.

Method 2 - using an image in the form of a button. First, upload the necessary image to the site (any to your liking, 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 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 quotes):

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

1

The button shown in the screenshot below is displayed on my site:

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

Adding to the menu

In order for the pop-up feedback form for wordpress to be called directly from the menu, you must use the following code

First you need to figure out exactly where you need 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:

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 a desire to thoroughly study all aspects. Now you know what it is contact form, what it is for, how to use it on the site, and how to handle a link to invoke a window with a pop-up effect. Good luck and success in this difficult but exciting business of site building.

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

I think there is already a lot of this on the Internet, but since people ask, I decided to do it. Moreover, such functionality should be present on almost every landing page to implement a callback button. Indeed, now more and more AB - testing results appear, which say that open forms work worse than those that are hidden in a modal window and open after clicking on the button.

Some argue that this is due to the fact that people are slowly "developing immunity" and the open form is an aggressive sale. Supposedly now the time has come when the user, when he sees an open form, thinks that they are trying to "sell" something to him. I do not quite agree with this theory, but a grain of truth is present. Maybe in some types of business this is true. For now, let's get into the implementation of the form.

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

Today we will start not with jQuery, but with the layout of the button and form. All scripts are included at the end of the page.

The button by clicking on which the modal window will open:

Submit your application

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

Now I will give the code of 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 on my website

After adding styles, it looks 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 already with my edits at the end of the article.

Include styles between the head tags:

And before the closing body tag - add scripts:

Script.js is a script for processing a 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 send result $ (formNm) .html (data);), error: function (jqXHR, text, error) (// Output of the send error text $ (formNm) .html (error);))); return false;) );));

I will not quote source css and js from the files responsible for the modal window and the form, since they are quite large. If anything, look at the source. But the php handler is largely standard (if I may say so):

Sender's name:$ name Telephone:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Thanks for sending your message!";) else (echo" Mistake. Message not sent! ";)) else (http_response_code (403); echo" Try again ";)?>

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

Here is such ajax form turned 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, appearances. Download the source and embed it on your site. 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 a trial period. Otherwise, in 90% of cases, the form will not work.

Do not wait for the letter in your mailbox if you just opened the index file in your browser and clicked the "Send" 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

There are many WordPress plugins for creating feedback forms on your blog or website. the most notable of these, it allows you to embed a contact form right in the post and WordPress pages(while many plugins force a custom template to be applied to the page, thereby limiting editing).

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

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

2. For the sake of simplicity, we will use the Contact Form 7, already created by the plugin itself during installation for the example. On the Contact Form settings page, we take the form code that needs to be copied and pasted into WordPress editor to create a form.



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





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

Contact Us





5. That's it, now we have a link that "launches" the contact form in a pop-up window. Congratulations! You may need to tweak the CSS of the email forms to display the correct width and height, as well as messages about possible mistakes when filling. This should be enough for a start.



Recently, for a site, I was asked to make a WordPress feedback form in a modal window. That is, when clicking on the "write to us" link, instead of going to the corresponding page, the user should open a new pop-up window where the message sending function will be located. This is a more interactive solution, although not everyone likes it. I personally prefer the classic implementation with a contact page, but the forms on the sites are different - so it will be useful to consider the solution to this problem. In my work I used 2 plugins: known to many Contact Form 7 and the Easy Modal module to make a modal window in WordPress.

Update 05/18/2017: Judging by the latest reviews in the repository, in some cases there may be problems with its work. If this also affects you, try a new solution from the developers called Popup Maker. Another alternative can be considered.

I will not dwell in detail on the installation and configuration of Contact Form 7, all the information about it. The blog also had an article on what might come in handy.

Let's go directly to the Easy Modal... Find him. The developers claim that it is The best decision creating modal windows on the site with different interesting options for presenting content.



More than 10 thousand downloads, estimate 4.6. Valid versions are 3.4 - 4.0.8, although I have successfully run it on WP 4.3.1. Despite the fact that the plugin has now been transformed into a new Popup Maker solution, you can still find the usual Easy Modal version 2.0.17 on wordpress.org and when searching for plugins inside the admin area. Using his example, I will tell you about creating a modal feedback window in WordPress.

After installation, a section of the same name will appear, where there are several items. We will need the very first one - Modals... Click on the Add New button there.



This will create a new modal for your WordPress site. There will be 4 tabs in the item settings:

• General - general parameters.
• Display Options - display options.
• Close Options - settings for closing the window (using a click or the Esc button).
• Examples - code examples to use.

General settings contain the title of the window (not displayed on the site), its title, content and type of download. In the content block, after switching to HTML mode, add the shortcode of your feedback form in the modal window.



Load Type has 2 options:

• Load Sitewide (for the whole site).
• Per Page / Post (for specific posts and pages).

A very interesting option. If you need a pop-up window that will be displayed on all pages of the site (the link is located in the sidebar, for example), then knock out the first option. In the second case, the corresponding settings block will appear on the pages / posts of the site when editing:



You can activate and select your pop-up window for a particular page. If you do not check the box, then the element will not be loaded on the site.

The second tab of the module parameters - Display Options.



Here you indicate:

• window size - automatic, medium, adaptive, small, large, etc .;
• background - you can use the background for the form or display it without it;
• animation of displaying a pop-up window;
• position (location) - top center, bottom right, etc .; fixed or not;
• indentation at the top of the screen.

Examples of displaying the output of a modal window in WordPress using the Easy Modal plugin can be found in the last tab.



You need to insert this code through the widget in the sidebar or in text editor... It is no different about any other HTML code, the only thing is that it specifies the class of a specific modal window (eModal-1). For the second element you created, the class would be eModal-2, and so on. In order not to make a mistake when pasting the code, the easiest way is to copy it from this page.

Editing the skin of a modal window

In the Easy Modal plugin, in addition to settings for a specific element, you can define themes for pop-up windows (Theme). In the base free version module has only one template, but this is more than enough.



This tool has 6 tabs:

• General - specify the name of the topic;
• Overlay - background (here you can select the color and transparency of the shape's background);
• Container - different settings for the modal itself (padding, frame, shadow);
• Title - parameters of the title of the pop-up window (font, shadow);
• Content - font and color of texts in the block;
• Close - an element for closing the form (text and decoration).

As you can see appearance can be customized as you like to suit your needs. I got this simple WordPress form in a modal window:



After setting all the settings, remember to save them (click on the Save button).

Video of adding Contact Form 7 in Easy Modal pop-up window

By the way, I found a video on working with the Easy Modal plugin, demonstrating the process of creating a feedback modal window in WordPress. There, the module interface is slightly outdated (some settings look different), but the general essence is captured. Perhaps it will be easier for someone to understand this issue with the help of a video.

Total about modal windows for wordpress

As mentioned above, now the Easy Modal plugin (judging by official page) converted to Popup Maker. I managed to find a module of the same name in the repository, but I have not tested it. I am telling you about this so that you know what to look for, if suddenly Easy Modal in WordPress of subsequent versions stops working.

Both solutions are free, although they have paid add-ons. They allow you to customize targeting, add more themes, contain analytics, and some other features. If you need a more advanced modal window mechanism, you can take a closer look at these extensions.

As for the task of opening the Contact Form 7 feedback form in a pop-up window, there are enough basic features of Easy Modal. Moreover this decision can be used to display other modal windows in WordPress - useful tips, additional information etc. Given the presence of an editor for inserting HTML code, you can show videos, forms, etc. in the pop-up window. All in all a useful plugin. If you have any questions about it, write in the comments.

Greetings, friends. Today's tutorial 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

Let me remind you once again that we will work with a plugin, so if you need feedback without a plugin, you better visit the article about, the setting there is a little more complicated, but, on the other hand, the option is more universal (suitable for every site) and less load on the server.

The main advantage of the contact form on Contact Form 7 is its simplicity of customization, almost unlimited functionality and automatic design adjustment for 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 complex questionnaire with checkboxes and dropdown lists. Also, it is possible to attach files for transfer.

In short, the plugin is mega-functional.

If you are still worried about the question "to make or not to make a contact form?" (you can get by by simply placing contact information on desired 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 in everything manually. Saving time won't hurt anyone.

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

Thirdly, the use of a contact form allows you to hide your email address and, thereby, get rid of possible spam that inevitably appears when your email account is freely available.

Fourth, it's just stylish and modern.

Installing and configuring the Contact form 7 plugin

Plugin is in common base wordpress, 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 easier - through the WordPress admin panel, 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.



Configuring the Contact form 7 plugin

Plugin configuration consists of two stages.

The first is customizing 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 to insert the form into the pages of the site. Each form we create inside the plugin will have its own unique shortcode. To insert into a page, it will be enough to insert only it.

So let's go.

To begin with, in the left menu of the admin panel we find the Contact form 7 tab. Below it, a menu with two items - "Forms" and "Add new" will pop up.



We do not have ready-made forms yet, therefore, go to the "Add new" section. There will open a page offering 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.

Form name block

The first block is responsible for the name of your form - put 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 for you so as not to get confused in all the variety in the future.



Form template block

Initially, this block is set standard configuration fields. It contains the name of the sender of the letter, his email address, the subject of the email, the contents of the email, and the send button.



Required fields are marked with asterisks. If this field is left blank, the message will not be sent.

The layout of the fields can be customized using regular html markup.

As for setting up the fields themselves, you can delete unnecessary ones and add those that you need. If you do not want the subject of the letter to be entered manually, just delete the corresponding block.

Adding fields is also very simple. 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 parameters. The plugin is in Russian, so all settings are intuitive.

The first checkbox indicates a mandatory or optional field (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 everyone else;
• "And paste the following code into the letter template below" - we will need this code to design the letter in the next block.



Thus, 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 performance of the feedback form, it only serves to transfer the information that was entered in the form.

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



As the first item, we indicate the email address to which the message will be sent (it can be anything).

The second item indicates e-mail from which the email will be sent to you. I would not change anything here, the default is mailbox your blog and has a tag added to it with the name of the person posting the message.

Next, we indicate the subject of the letter. By default, the subject 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, which is automatically set in each letter. I did this for feedback forms from pages about services and advertising. Messages from there always come with the same topic "Ordering services" or "Ordering advertising" - simply and clearly.

The field of additional headers contains the "Reply-To:" tag so that when replying to a 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. It is not worth changing this field.

The field "Letter template" is responsible for the internal content of the message you received. By default, it contains information about the sender, the subject, and the 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 that are not installed by default, do not forget to add the corresponding tag in the email 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 letter template below" field).

Any text information this block (except for tags) can be changed to your liking. You can also add any descriptions and change tags in places, placing them in the order that suits you.

Block "Letter 2"

If you want someone else to receive the message sent to you, then you can put a tick in this block.

This block is configured similarly to the previous one. By default, all 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 sending a copy, for example, to your manager or accountant.

Block "Notifications when submitting a form"

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

Form activation

After you have filled in all the fields, return to the beginning to the "Form name" block and click the "save" button located on the right.

The plugin will put the form you created in the list of valid ones and assign it a special code like this:

[contact - form - 7 id = "5464" title = "(! LANG: Check" ] !}

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

Anti-spam - Akismet and Captcha

Spammers cause a lot of trouble for 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 its basic form, then, after a while, you will be attacked by many empty and meaningless messages.

There are two ways to get rid of spammers:

1. Put a mandatory captcha (this can be done with an additional plugin - Really Simple CAPTCHA).
2. Use the wordpress antispam plugin - Akismet.

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

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

In addition, akismet is featured on most wordpress sites to protect against spam comments on 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 Akismet

1. Install the Akismet plugin on your site and activate it -.

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

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

It should look like this:



Once saved, the contact form should block all messages sent by spammers. You can check the filter operation 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 unchecked. In this case, the likelihood of passing spam messages will increase, but you are less likely to lose the messages you want.

Spam protection with Really Simple CAPTCHA

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

Open the required contact form for editing

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



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 window

The contact form does not always have to be located in a specific section of the site; sometimes, the client must be able to access it from every page of the resource.

In such cases, it is not always convenient to post a full form. It is much easier to place an attention-grabbing button 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 using another plugin - Easy FancyBox.

1. Installing the plugin



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



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.

This completes the plugin setup, proceed to setting up the feedback button.

2. Insert the code on the site

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

On your site, where you want to display the 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: // link to the picture"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [contact - form - 7 id = "id of your form" title = "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 - write your id and title.

3. Remove the restriction on shortcodes in the sidebar

This item is required if you want to install a 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) and insert the following code before the closing brace "?>":

add_filter ("widget_text", "do_shortcode");

add_filter ("widget_text", "do_shortcode");

It will enable you to execute all shortcodes in the sidebar.

I ended up with a nice pop-up form like this:



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 you have leads to a form with a name and phone number and serves to order a call back from the site, and the second should open another form where a detailed order request is going (with an address, a field for description, the ability to attach a file, etc.) ). In the Contact Form 7 plugin itself, you can create an infinite number of form options, but how do you fit them into different buttons on the same page?

To do this, you need to correct the button code from the previous paragraph. The first button uses the above option. In the second, two values ​​change:

1. The link changes, the href parameter is assigned the value # contact_form_pop_2
2. Change the id to the same value # contact_form_pop_2