Hello everyone. They were bombarded with questions about how to implement the form that appears in modal window after clicking on the 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 is the time when the user at the sight open form believes that they are trying to "sell" something to him. I do not quite agree with this theory, but a grain of truth is present. This may be true in some types of business. 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'll 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:

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 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 give the original css code 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" Error. Message not sent! ";)) else (http_response_code (403); echo" Try again ";)?>

You are welcome, don't forget to change addresses Email on their own.

Here's an ajax form. 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.

Don't wait for a 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 out and make the form yourself, then I recommend paying attention to.

Updated version article is

Hello dear readers a! In this tutorial, I'll show you how we can make an HTML5 email signup form validate the entered URL with JQuery. For verification we will use regular expressions, and we will save the entered address in the MySql database. Thus, when saving, it will use AJAX(i.e. call the PHP script without reloading the page). The result can be viewed on the demo page, as well as download the sources. Let's get started!

Basic markup

Let's start by creating a new index.html file. And let's make a simple document structure sticking to HTML5. We will also immediately include the CSS styles and the library, we will need it when checking the entered e-mail:

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

<html lang = "ru"> <head> <meta charset = "utf-8"> <title> Email signup form with jQuery validator</ title> <link rel = "stylesheet" type = "text / css" href = "style.css"> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </ head> <body> </ body> </ html>

You are now ready to create your form!

E-mail subscription form

The purpose of our form is to verify the entered visitor's email address and somehow save it to the list of subscribers. For this we do regular form with a button, by clicking on which the address is processed and saved in the database or in a file as it is convenient for anyone. In the lesson, we will consider saving data in a buz. This will make it clearer, we will focus on checking the correctness of the entered address. This is how the subscription form looks like:

1 2 3 4 5 6 7 8 9

"Enter your E-mail" autocomplete = "off" autocorrect = "off" autocapitalize = "off"> Subscribe to

Let's wrap the form in the #completeform div block, so that after saving the address, the form can be collapsed.

We also use a couple of new attributes in the input field. The field type is set to "email" so that mobile browsers can display the appropriate keyboard. Chrome and some WebKit browsers will use this to check if the user has entered an address. The autocorrect and autocapitalize attributes are designed specifically for mobile browsers.

Span with id error initially hidden, for which the display property is responsible with the value none, this is written in the file with styles, about it a little later. But as soon as the user entered an invalid email address in the span, a warning message is displayed.

JQuery validator and AJAX request

Let's start with a simple email verification function. We use a regex string to test if the text string matches the standard email syntax then return a boolean value true otherwise false.

Let's take a look at the completeInviteForm () function. To avoid confusing the address entry form, we will collapse the fadeOut effect for 400 milliseconds. And as a callback, let's call the $ .ajax () function, use it to call the save.php file and save the entered address to the database. I will cite the source code of the save.php file below, but for now let's figure it out with the $ .ajax () function.

$ .ajax- loads the remote page using HTTP request... As an argument to the $ .ajax () function, an object is passed, consisting of key / value pairs that are used to initialize and manipulate the request. In our case, we will use the following objects:

• type: 'POST' - select the type of request to the file, by default GET, the difference between POST and GET is not very big, just with a GET request, the data is transferred in the header and with a POST in the body of the request, therefore, using POST, you can transfer more information;
• url: ’save.php’ - path to the executable file;
• data: 'email =' + $ ("# email"). val ()- data that is sent to the server. WITH using CSS selector #email refer to the element with id = "email" and get the content of the value attribute, that is, the email entered by the user. And assign this content to a variable email which we will use in the save.php file;
• success: function () ($ (‘# completeform’). before (‘ Everything is ready! You have been added to the mailing list.‘);} - the success function is called on success ajax request... The function performs the following action. In front of the #completeform div, we insert content notifying the user that his email has been added to the mailing list.

1 2 3 4 5 6 7 8 9 10 11 12

function completeInviteForm () ( setTimeout (function () ($ ("# completeform") .fadeOut (400, function () ( $ .ajax (( type: "POST", url: "save.php", data: "email =" + $ ("# email") .val (), success: function () ( $ ("# completeform") .before ( "Everything is ready! You have been added to the mailing list." ) ; } } ) ; } ) ; } , 1100 ) ; }

And using the setTimeout method, the form is hidden and the ajax request is executed asynchronously with a delay of 1100 milliseconds.

Form processing

For the convenience of referring to page elements, let's create a couple of variables with selectors #error and #btnwrap.

var erdiv = $ ("# error"); var btnwrap = $ ("# btnwrap");

Using an event handler live track the click on the "Subscribe" button, its id = "sendbtn". E.preventDefault () method; cancels the standard behavior of the browser for an action (clicking on a button), namely, we cancel page refresh and URL change. We assign the entered email to the variable emailval, and we can start processing this variable.

First if if (! isEmail (emailval)) checks if the isEmail function returned false, this means that the email address entered by the user does not match the regular expression, that is, it is not correct, we will notify the user about this in the error block, display a message (You entered incorrectly E-mail address).

Now the second if executed only if the user entered a valid email address. Then we can start the process of saving the address.

To make the process clear, insert the appropriate text into the error block, and put a GIF image in the block where the "Subscribe" button was located. And we call the completeInviteForm () function, which we discussed above.

1 2 3 4 5 6 7 8 9 10 11 12

if (! isEmail (emailval)) ( erdiv.html ( "You entered incorrect email address") ; erdiv.css ("display", "block"); } if (isEmail (emailval)) ( erdiv.css ("color", "# 719dc8"); erdiv.html ("processing ..."); (completeInviteForm (), 900); } } ) ; } ) ;

Database

Since I chose the method of saving the entered address to the database, I will briefly talk about creating the database and the table itself, as well as the code of the save.php file promised, which works with the MySql database.

For this we need local server, I am using Denwer. Surely many people use it, so I will not go into details. We pass phpMyAdmin, and create a database email:

To save the addresses of subscribers, we need one table with two fields, let's call it address:

The fields will be as follows:

• id- identifier email address(aka primary key);
• address- directly the email address itself.

Save.php file

Now it's time to talk about last element of the created subscription, about the save.php file. It contains the PHP script for saving the email address to the database.

1 2 3 4 5 6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];) $ db = mysql_connect ("localhost", "root", ""); mysql_select_db ("email", $ db); mysql_query ( "INSERT INTO address (address) VALUES (" $ email ")", $ db); ?>

First, we check if the email variable exists in the global POST array, if so, then we assign its value to the local variable $ email. Next, we establish a connection to the mysql_connect () server, the user is root, there is no password. Choosing a database email and execute a query to the database, insert a new record into the address table, where the value of the $ email variable will be inserted into the address fields. That's all!

This concludes the lesson. I want to remind you that this subscription works only on the server (since we are using the base and).

Hello. In this tutorial we will be making a complete shape. feedback, and it will appear in the 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 "th. The lesson is very interesting, so please do not pass by! Below you can view a demo of the resulting form, as well as download the necessary files for work:

Step 1. general description and how the feedback form works:

First, I'll tell you what files we 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- the file in which the form itself is located. It is this file that will be connected to the modal window;
• send.php- file-handler, which is responsible for sending the letter;
• jquery.js- the main jQuery framework;
• style.css- file with cascading style sheets for our form.

So, let's go further and in order ... The work of the form will be as follows: The user enters 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 text of the message and sends, then it is transferred to the page with a message about the successful or unsuccessful sending of the letter. That's all, now let's start to typeset our form ...

Step 2. Button for calling the form.

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

Sending a Message to the Administration:

*Name:
* E-mail:
Topic:
*Message:

As you can see, walking through the code, even with the naked eye, you can see that for a better display of the form, I used a table layout. This was very useful for me to equalize all the form fields.

Step 4. Handler responsible for sending emails

Here I will quickly introduce you to the master mail handler. I will not present 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 all the code of this handler yourself. If everything is ready, then move on ...

Step 5. Spinning up the main jQuery framework

Now, as with any jQuery tutorial, we have 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. Styling the form

As you can see, the styles for our form are rendered separately, in the file style.css as these styles take up too much space. We just need to bind the code below to our index file:

Step 7. jQuery tweaks

Now for the full work of the modal form window, we must insert the following jQuery code:

Conclusion.

So our interesting feedback form is ready. The path was long and difficult, so if anyone 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 yours jQuery guide - M.K.

We are all used to seeing contacts on separate, specially created pages for user feedback. As a rule, on such pages, in addition to contact forms, they post a lot of other information for interaction and communication. The mechanism is debugged, proven over the years and works perfectly. But in some cases it becomes necessary to display a separate contact form as a pop-up window without redirecting users to other pages.
At one time, we considered working with jQuery. Today, I want to acquaint you with an interesting solution to create a separate, originally designed, pop-up contact form for the site.

In my opinion, a wonderful example of a means of interaction with users.

We looked at an example. Now, let's decompose this shape into its components, from creation general structure in Html, before shaping the look of the layout using CSS.

HTML code of the form

Nothing supernatural, the most simple framework of a regular contact form, placed in a block element div with a specific identifier and class, to further shape the appearance of the form in css and interacting with the little javascript we'll need to activate and close the popup form.

Close Send us a message

Also, we need to create a shading layer for the general background, when activating the pop-up shape. You can accomplish this task in different ways, but we will not be too smart and add one more div by assigning it an identifier: id = "fade" and a class: class = "black-overlay". You can place it next to the form so as not to search for a long time if necessary.

Feedback

You probably noticed that the close button is inscribed in the block of the contact form, immediately before the title, and this is logical, but where else should it be, the button should appear and disappear along with the form. Appearance and the position of the close button, we will further form in CSS

That's all, let's now take a look at the full Html-code of the page containing the pop-up feedback form:

Feedback Close Send us a message Please enter your message here ..

Feedback

Before we get to the fun part, styling our contact form with CSS, I'll step back a bit. The most attentive, probably noticed that the buttons for opening and closing the form are implemented as links with a "jammer" href = "javascript: void (0)". Good or bad, I haven't found an exact answer for myself, I use this method out of habit. Although for elements on which the onclick event is processed by the script, it seems to me that it is more logical and correct to use , or

... If you wish, you can always do this with the buttons from this example.

The magic of CSS

This feedback form is made in the original style, with some design tricks, so the option of layout using exclusively modern CSS3 standards is rather problematic.
The basis of the whole design, the background of the contact form, will be a simple envelope drawing that leaves the user no doubt about what has opened in front of him)))) In the close button, we also use a couple of small pictures so that it changes on hover ... All these pictures, you can easily change to your own, and the buttons in general, if you catch the courage, you can forget about CSS3.

And here is, directly, the CSS code itself, our wonderful form, with small comments, for clarity and in order to avoid unnecessary questions:

/ * set the background shading layer, ** define positions, color and intensity of shading * /.black-overlay (display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha (opacity = 70);) / * set the base drawing, ** determine the size and position on the screen * /.envelope (display: none; position: absolute; width: 600px; height: 340px; background: url (images / envelope.png) center no-repeat; z-index: 1002; position: relative; margin: 10% auto; ) / * form a close button, ** dimensions, position on the form * /.close-btn (width: 31px; height: 31px; display: block; cursor: pointer; / * for use cases other than tags * / background: url (images / close.png); text-indent: -4999px; ) / * close button on hover * /.close-btn: hover (background: url (images / close-hover.png);) / * decorate the form header * /.title (font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size: 22px; font-weight: normal; font-weight: 200; text-align: left; position: absolute; top: 30px; left: 40px; / * can be replaced with another image ** or border-bottom: blah blah blah * / background: url (images / divider.png) no-repeat bottom; color: # 545151; height: 40px; width: 400px; margin: 15px 0; text-shadow: 1px 1px #FFF; / * text shadow * /) / * styles for input fields * / input [type = text] (font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size: 13px; background-color: rgb (255, 255, 255); color: # 787474; padding- left: 10px; width: 208px; height: 33px; border-color: rgb (182, 182, 182); border-width: 1px; border-style: solid; -moz-box-shadow: 0px 1px 0px 0px rgba ( 255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); box-shadow: 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); -ms -filter:; filter: progid: DXImageTransform.Microsoft .dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true); border-radius: 3px; -moz-border-radius: 3px;) / * change the appearance of input fields on focus * / input [type = text]: focus, .your-message: focus (outline: none; background-color: rgb (255, 255, 255); border-color: rgb (126, 139, 153); border: 1px solid ; -moz-box-shadow: 0px 0px 5px 0px rgba (168, 178, 188, 0.75), 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0 , 0.4); -webkit-box-shadow: 0px 0px 5px 0px rgba (168, 178, 188, 0.75), 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.4); box-shadow: 0px 0px 5px 0px rgba (168, 178, 188, 0.75), 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.4); -ms-filter: "progid: DXImageTransform.Microsoft.Glow (Color = # bfa8b2bc, Strength = 5) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true)"; filter: progid: DXImageTransform.Microsoft .Glow (Color = # bfa8b2bc, Strength = 5) progid: DXImageTransform.Microsoft .dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true); ) .your-message (font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size: 13px; background-color: rgb (255, 255, 255); color: # 787474; padding: 10px 0 0 10px; width: 448px; height: 93px; border-color: rgb (182, 182, 182); border-width: 1px; border-style: solid; -moz-box-shadow: 0px 1px 0px 0px rgba ( 255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); box-shadow: 0px 1px 0px 0px rgba (255, 255, 255, 0.5), inset 0px 1px 2px 0px rgba (0, 0, 0, 0.2); -ms -filter: "progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true)"; filter: progid: DXImageTransform.Microsoft .dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true); position: absolute; top: 150px; left: 40px; border-radius: 3px; -moz-border-radius: 3px; ) .your-name (position: absolute; top: 100px; left: 40px;) .email-address (position: absolute; top: 100px; left: 280px;) / * design the submit button * /.send-message (background-color: # 929FAB; background-image: -moz-linear-gradient (49% 0% -90deg, rgb (171, 181, 191) 0%, rgb (124, 138, 152) 100 %); background-image: -webkit-gradient (linear, 49% 0%, 49% 109%, color-stop (0, rgb (171, 181, 191)), color-stop (1, rgb (124, 138, 152))); background-image: -webkit-linear-gradient (-90deg, rgb (171, 181, 191) 0%, rgb (124, 138, 152) 100%); background-image: -o -linear-gradient (-90deg, rgb (171, 181, 191) 0%, rgb (124, 138, 152) 100%); background-image: -ms-linear-gradient (-90deg, rgb (171, 181 , 191) 0%, rgb (124, 138, 152 ) 100% ) ; background-image: linear-gradient (-90deg, rgb(171 , 181 , 191 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; width: 130px; height: 35px; -moz-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; -webkit-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; box-shadow: 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; -ms-filter : "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffabb5bf, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffffY = 1, Positive = true); filter: progid : DXImageTransform .Microsoft.gradient ( startColorstr = # ffabb5bf, endColorstr = # ff7c8a98, GradientType = 0 ) progid : DXImageTransform .Microsoft.dropshadow ( OffX = 0 , OffY = 1 , Color = # 80ffffff, Positive = true ) ; color: #fff; font-family: "Trebuchet MS", Tahoma , Arial , sans-serif; font-size: 13px; text-shadow: 0 1px 0 # 21405D; font-weight: bold; border: none; cursor: pointer; border-radius: 3px; -moz-border-radius : 3px; position: absolute; top: 269px; right: 100px; } / * design the submit button on hover * / .send-message: hover{ background-color: # A0ACB9; background-image: -moz-linear-gradient (49% 0% -90deg, rgb(170 , 181 , 195 ) 0% , rgb(144 , 157 , 169 ) 100% ) ; background-image: -webkit-gradient ( linear , 49% 0% , 49% 109% , color-stop (0 , rgb(170 , 181 , 195 ) ) , color-stop (1 , rgb(144 , 157 , 169 ) ) ) ; background-image: -webkit-linear-gradient (-90deg, rgb(170 , 181 , 195 ) 0% , rgb(144 , 157 , 169 ) 100% ) ; background-image: -o-linear-gradient (-90deg, rgb(170 , 181 , 195 ) 0% , rgb(144 , 157 , 169 ) 100% ) ; background-image: -ms-linear-gradient (-90deg, rgb(170 , 181 , 195 ) 0% , rgb(144 , 157 , 169 ) 100% ) ; background-image: linear-gradient (-90deg, rgb(170 , 181 , 195 ) 0% , rgb(144 , 157 , 169 ) 100% ) ; width: 130px; height: 35px; -moz-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; -webkit-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; box-shadow: 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 3px rgb(97 , 108 , 122 ) ; -ms-filter : "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffaab5c3, endColorstr = # ff909da9, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffff"; filter: progid : DXImageTransform .Microsoft.gradient ( startColorstr = # ffaab5c3, endColorstr = # ff909da9, GradientType = 0 ) progid : DXImageTransform .Microsoft.dropshadow ( OffX = 0 , OffY = 1 , Color = # 80ffffff, Positive = true ) ; } / * draw up the submit button in active mode * / .send-message: active{ background-image: -moz-linear-gradient (49% 0% -90deg, rgb(142 , 154 , 167 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; background-image: -webkit-gradient ( linear , 49% 0% , 49% 109% , color-stop (0 , rgb(142 , 154 , 167 ) ) , color-stop (1 , rgb(124 , 138 , 152 ) ) ) ; background-image: -webkit-linear-gradient (-90deg, rgb(142 , 154 , 167 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; background-image: -o-linear-gradient (-90deg, rgb(142 , 154 , 167 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; background-image: -ms-linear-gradient (-90deg, rgb(142 , 154 , 167 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; background-image: linear-gradient (-90deg, rgb(142 , 154 , 167 ) 0% , rgb(124 , 138 , 152 ) 100% ) ; width: 130px; height: 35px; -moz-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 5px rgb(65 , 73 , 85 ) ; -webkit-box-shadow : 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 5px rgb(65 , 73 , 85 ) ; box-shadow: 0px 1px 0px 0px rgba(255 , 255 , 255 , 0.5 ) , inset 0px 1px 5px rgb(65 , 73 , 85 ) ; -ms-filter : "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ff8e9aa7, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffffY = 1", Positive; filter: progid : DXImageTransform .Microsoft.gradient ( startColorstr = # ff8e9aa7, endColorstr = # ff7c8a98, GradientType = 0 ) progid : DXImageTransform .Microsoft.dropshadow ( OffX = 0 , OffY = 1 , Color = # 80ffffff, Positive = true ) ; }

/ * set the background shading layer, ** define the positions, color and intensity of the shading * / .black-overlay (display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100% ; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha (opacity = 70);) / * set the base image, ** determine the size and position on the screen * / .envelope (display: none; position: absolute; width: 600px; height: 340px; background: url (images / envelope.png) center no-repeat; z-index: 1002; position: relative; margin: 10% auto ;) / * form the close button, ** dimensions, position on the form * / .close-btn (width: 31px; height: 31px; display: block; cursor: pointer; / * for the case of using other than tags * / background: url (images / close.png); text-indent: -4999px; ) / * close button on hover * / .close-btn: hover (background: url (images / close-hover.png);) / * style the form title * / .title (font-family: "Trebuchet MS", Tahoma , Arial, sans-serif; font-size: 22px; font-weight: normal; font-weight: 200; text-align: left; position: absolute; top: 30px; left: 40px; / * can be replaced with another image ** or border-bottom: blah blah blah * / background: url (images / divider.png) no-repeat bottom; color: # 545151; height: 40px; width: 400px; margin: 15px 0; text-shadow: 1px 1px #FFF; / * text shadow * /) / * styles for input fields * / input (font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size: 13px; background-color: rgb ( 255,255,255); color: # 787474; padding-left: 10px; width: 208px; height: 33px; border-color: rgb (182,182,182); border-width: 1px; border-style: solid; -moz-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); -webkit-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); -ms-filter: "progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true)"; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true); border-radius: 3px; -moz-border-radius: 3px; ) / * change the appearance of input fields on focus * / input: focus, .your-message: focus (outline: none; background-color: rgb (255,255,255); border-color: rgb (126,139,153); border: 1px solid; - moz-box-shadow: 0px 0px 5px 0px rgba (168,178,188,0.75), 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.4); -webkit-box-shadow : 0px 0px 5px 0px rgba (168,178,188,0.75), 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.4); box-shadow: 0px 0px 5px 0px rgba (168,178,188 , 0.75), 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.4); -ms-filter: "progid: DXImageTransform.Microsoft.Glow (Color = # bfa8b2bc, Strength = 5) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true) "; filter: progid: DXImageTransform.Microsoft.Glow (Color = # bfa8b2bc, Strength = 5) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true);) .your-message (font-family: "Trebuchet MS", Tahoma , Arial, sans-serif; font-size: 13px; background-color: rgb (255,255,255); color: # 787474; padding: 10px 0 0 10px; width: 448px; height: 93px; border-color: rgb (182,182,182); border-width: 1px; border-style: solid; -moz-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0. 5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); -webkit-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 2px 0px rgba (0,0,0,0.2); -ms-filter: "progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true)"; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true); position: absolute; top: 150px; left: 40px; border-radius: 3px; -moz-border-radius: 3px; ) .your-name (position: absolute; top: 100px; left: 40px;) .email-address (position: absolute; top: 100px; left: 280px;) / * style the send button * / .send-message (background -color: # 929FAB; background-image: -moz-linear-gradient (49% 0% -90deg, rgb (171,181,191) 0%, rgb (124,138,152) 100%); background-image: -webkit-gradient (linear, 49% 0%, 49% 109%, color-stop (0, rgb (171,181,191)), color-stop (1, rgb (124,138,152))); background-image: -webkit-linear-gradient (-90deg, rgb (171,181,191) 0%, rgb (124,138,152) 100%); background-image: -o-linear-gradient (-90deg, rgb (171,181,191) 0%, rgb (124,138,152) 100%); background-image: -ms- linear-gradient (-90deg, rgb (171,181,191) 0%, rgb (124,138,152) 100%); background-image: linear-gradient (-90deg, rgb (171,181,191) 0%, rgb (124,138,152) 100%); width: 130px; height: 35px; -moz-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 3px rgb (97,108,122); -webkit-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5) , inset 0px 1px 3px rgb (97,108,122); box -shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 3px rgb (97,108,122); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffabb5bf, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, # 80 OffY = 1, Positiveff = true) "; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffabb5bf, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1), Positive color: #fff; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size: 13px; text-shadow: 0 1px 0 # 21405D; font-weight: bold; border: none; cursor: pointer; border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 269px; right: 100px; ) / * decorate the send button on hover * / .send-message: hover (background-color: # A0ACB9; background-image: -moz-linear-gradient (49% 0% -90deg, rgb (170,181,195) 0%, rgb (144,157,169) 100%); background-image: -webkit-gradient (linear, 49% 0%, 49% 109%, color-stop (0, rgb (170,181,195)), color-stop (1, rgb (144,157,169) )); background-image: -webkit-linear-gradient (-90deg, rgb (170,181,195) 0%, rgb (144,157,169) 100%); background-image: -o-linear-gradient (-90deg, rgb (170,181,195) 0%, rgb (144,157,169) 100%); background-image: -ms-linear-gradient (-90deg, rgb (170,181,195) 0%, rgb (144,157,169) 100%); background-image: linear-gradient (-90deg , rgb (170,181,195) 0%, rgb (144,157,169) 100%); width: 130px; height: 35px; -moz-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0. 5), inset 0px 1px 3px rgb (97,108,122); -webkit-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 3px rgb (97,108,122); box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 3px rgb (97,108,122); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffaab5c3, endColorstr = # ff909da9, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, # 80Y = 1, Positive Color = true) "; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffaab5c3, endColorstr = # ff909da9, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffYff = 1, Color = # 80ffff) ) / * decorate the send button in active mode * /. send-message: active (background-image: -moz-linear-gradient (49% 0% -90deg, rgb (142,154,167) 0%, rgb (124,138,152) 100%) ; background-image: -webkit-gradient (linear, 49% 0%, 49% 109%, color-stop (0, rgb (142,154,167)), color-stop (1, rgb (124,138,152))); background-image : -webkit-linear-gradient (-90deg, rgb (142,154,167) 0%, rgb (124,138,152) 100%); background-image: -o-linear-gradient (-90deg, rgb (142,154,167) 0%, rgb (124,138,152) ) 100%); background-image: -ms-linear-gradient (-90deg, rgb (142,154,167) 0%, rgb (124,138,152) 100%); background-image: linear-gradient (-90deg, rgb (142,154,167) 0 %, rgb (124,138,152) 100%); width: 130px; height: 35px; -moz-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 5px rgb (65,73,85); - webkit-box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 5px rgb (65,73,85); box-shadow: 0px 1px 0px 0px rgba (255,255,255,0.5), inset 0px 1px 5px rgb (65,73,85); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (s tartColorstr = # ff8e9aa7, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 80ffffff, Positive = true) "; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ff8e9aa7, endColorstr = # ff7c8a98, GradientType = 0) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Positive )

The code turned out to be quite voluminous, well, what can you do, I cannot deny myself the pleasure, where it is permissible and justified, of course, to experiment and apply in practice the new properties and functions of the CSS3 standard. Thanks to this, interesting and fresh layout solutions appear. Not without mistakes and doubts, but this is a real movement and at the same time a useful practice.

Everything! We've just created a great user interaction tool, a pop-up contact form for the site, together with you. You just have to look at a live example, if you want, download the sources and attach your php-handler to the form.

In the archive with the sources, you will find everything you need and a couple more options for background images for the form.

Update from 05/21/2017
Added the folder "mail" to the archive with the sources, in which you will find the simplest php-handler for the form and the configuration file for setting. The handler is attached to this form, a small instruction and comments written directly in the code of the handler files, I hope, will help you figure out what, where and why.

With all respect, Andrew

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

Of course, it will be great if you know a little about HTML / CSS. By analogy, you will have to drag the code onto your page. We will not touch on the PHP language, I will show all the necessary edits that need to be done for myself.

UPDATE: According to the responses of readers, I realized that you need something more beautiful and functional, meet, read and see. Choose which one you like best)

UPDATE2: Version 3.0 Responsive Landing Page + ajax form with passing UTM tags, read and see. You'll like it

I remembered myself when I first tried to make my own feedback form in php, and to be honest, it was laborious, because did not understand what was happening and how. Patience and perseverance are friends and you will succeed.

Php contact form - structure

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

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

• image - all images that are used for the Landing Page itself, buttons, etc.
• js - javascript scripts that provide, for example, a popup modal on the page and other visual effects
• index.html - our one page index file
• index1.php - a handler file into which values ​​from the form are passed, then a letter is formed from the received variables and sent to the specified email address. Also, index1.php will act as an intermediate page for notification of successful data submission with automatic redirection back to index.html (i.e. our one-page page)

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

Take a look at how the interaction of all elements (page, form, handler) works

The source code of the form call and handler

Let's take a look at the operation of one of the buttons, which invokes a modal pop-up window that contains a feedback form. This given source code is more than once, two inserted into the page and it will work, you yourself will have to customize it to your design and needs.

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

Request a call back Request a call back

Request a call back

Request a call back

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

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

"; // from whom $ send = mail ($ address, $ sub, $ mes," Content-type: text / plain; charset = utf-8 \ r \ nFrom: $ email "); ini_set (" short_open_tag ", "On"); header ("Refresh: 3; URL = index.html");?>