Modal forms have become the way that Web developers often use to transmit data when designing an interface. through the modal window, you can improve the usability of the website. Just the needs of the project, there is a customer want modal pop-up form to submit the feedback of the site, after a test implementation, I use the jquery FancyBox plug-in to create a beautiful modal form, The data submitted to the form is implemented on the server side with Ajax calls. You can receive feedback messages from users in your email
HTML code
Header part of the main JS file as follows the introduction of jquery code and FancyBox code
Copy Code code as follows:
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" >< /script>
<script type= "Text/javascript" src= "fancybox/jquery.fancybox.js?v=2.0.6" ></script>
Demo
First, from the official websiteDownload the latest FancyBox,and unzip it.The core HTML page code is very simple, here is a hidden div,Opens a modal window when the user clicks the href link.
Copy Code code as follows:
<div id= "wrapper" >
Send us feedback from the modal window.
<a class= "Modalbox" href= "#inline" > have the skill you dot me </a></div>
<!--hidden inline form-->
<div id= "inline" >
<form id= "Contact" action= "#" method= "POST" name= "Contacts" ><label for= "email" > Your email </label>
<input id= "Email" class= "txt" type= "email" name= "email"/>
<label for= "MSG" > You want to tell us </label>
<textarea id= "msg" class= "Txtarea" name= "MSG" ></textarea>
<button id= "Send" > Send now </button></form></div>
CSS style sheet
Sets the color of the text box, the size, the style under focus, and so on, using : hover and : Active to display the status.
Copy Code code as follows:
txt
Display:inline-block;
Color: #676767;
width:420px;
Font-family:arial, Tahoma, Sans-serif;
margin-bottom:10px;
border:1px dotted #ccc;
padding:5px 9px;
Font-size:1.2em;
Line-height:1.4em;
}
. txtarea {
Display:block;
Resize:none;
Color: #676767;
Font-family:arial, Tahoma, Sans-serif;
margin-bottom:10px;
width:500px;
height:150px;
border:1px dotted #ccc;
padding:5px 9px;
Font-size:1.2em;
Line-height:1.4em;
}
. Txt:focus,
. txtarea:focus {
Border-style:solid;
Border-color: #bababa;
Color: #444;
}
Input.error,
Textarea.error {
Border-color: #973d3d;
Border-style:solid;
Background: #f0bebe;
Color: #a35959;
}
Input.error:focus,
Textarea.error:focus {
Border-color: #973d3d;
Color: #a35959;
}
I've defined a wrong CSS class, combined with jquery to detect whether the data entered by the user is correct, entering error data causes the fieldText, borders, and backgrounds become darker. Until the userEnter a valid data field color to return to normal.
Copy Code code as follows:
#send {
Color: #dee5f0;
Display:block;
Cursor:pointer;
padding:5px 11px;
Font-size:1.2em;
Border:solid 1px #224983;
border-radius:5px;
Background: #1e4c99;
Background:-webkit-gradient (linear, left top, left bottom, from (#2f52b7), to (#0e3a7d));
Background:-moz-linear-gradient (top, #2f52b7, #0e3a7d);
Background:-webkit-linear-gradient (top, #2f52b7, #0e3a7d);
Background:-o-linear-gradient (top, #2f52b7, #0e3a7d);
Background:-ms-linear-gradient (top, #2f52b7, #0e3a7d);
Background:linear-gradient (Top, #2f52b7, #0e3a7d);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #2f52b7 ', endcolorstr= ' #0e3a7d ');
}
#send: hover {
Background: #183d80;
Background:-webkit-gradient (linear, left top, left bottom, from (#284f9d), to (#0c2b6b));
Background:-moz-linear-gradient (top, #284f9d, #0c2b6b);
Background:-webkit-linear-gradient (top, #284f9d, #0c2b6b);
Background:-o-linear-gradient (top, #284f9d, #0c2b6b);
Background:-ms-linear-gradient (top, #284f9d, #0c2b6b);
Background:linear-gradient (Top, #284f9d, #0c2b6b);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #284f9d ', endcolorstr= ' #0c2b6b ');
}
#send: Active {
Color: #8c9dc0;
Background:-webkit-gradient (linear, left top, left bottom, from (#0e387d), to (#2f55b7));
Background:-moz-linear-gradient (top, #0e387d, #2f55b7);
Background:-webkit-linear-gradient (top, #0e387d, #2f55b7);
Background:-o-linear-gradient (top, #0e387d, #2f55b7);
Background:-ms-linear-gradient (top, #0e387d, #2f55b7);
Background:linear-gradient (Top, #0e387d, #2f55b7);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #0e387d ', endcolorstr= ' #2f55b7 ');
}
CSS button I use CSS3 to create a linear gradient, the code above
using FancyBox
When the page load element completes, the FancyBox default code is invoked
Copy Code code as follows:
$ (document). Ready (function () {
$ (". Modalbox"). FancyBox ();
$ ("#contact"). Submit (function () {return false;}); /disable default form submission
The second line of code disables the default contact form submission action. Why, then? So thisWe can handle our own click events and pass the data through Ajax.After the user submits the form, we need to get the current value of two fields (email and message).We also want to check that the email address is valid and that the message length exceeds the specified length value
Copy Code code as follows:
$ ("#send"). On ("click", Function () {
var emailval = $ ("#email"). Val ();
var msgval = $ ("#msg"). Val ();
var msglen = msgval.length;
var mailvalid = Validateemail (emailval);
if (Mailvalid = = False) {
$ ("#email"). AddClass ("error");
}
else if (Mailvalid = = True) {
$ ("#email"). Removeclass ("error");
}
if (Msglen < 4) {
$ ("#msg"). AddClass ("error");
}
else if (Msglen >= 4) {
$ ("#msg"). Removeclass ("error");
}
The jquery code above uses some logical statements.The form will not be submitted until the e-mail is valid and the message is longer than 4 letters in length.
send an AJAX request
Through the onclick event above, you need to send the form data to PHP. , we will receive an email in our inbox.
Copy Code code as follows:
If two field validation sends a message next
After clicking on the Send button, the button is replaced with a text prompt such as "Send in", which is designed to prevent users from clicking on the submission and prompting more humane
$ ("#send"). ReplaceWith ("<em> sent in ...</em>");
$.ajax ({
Type: ' POST ',
URL: ' sendmessage.php ',
Data: $ ("#contact"). Serialize (),
Success:function (data) {
if (data = = "true") {
$ ("#contact"). Fadeout ("Fast", function () {
$ (this). Before ("<p><strong> submitted successfully!") Your message has been sent, thank you:) </strong></p> ");
SetTimeout ("$.fancybox.close ()", 1000);
});
}
}
});
}
});
This uses the Serialize () method to serialize the submitted Ajax data so that the standard URL encoding is generated
after the server responds successfully, it hides the pop-up form and displays a success message. I use the settimeout () method to close the FancyBox, where I set a second to hide the form. the JS code to perform this operation is $.fancybox.close ().
send mail using PHP
Sendmessage.php accepts variables entered by the user.Then call Mail to try to send it, send a successful return "true" otherwise return false
Copy Code code as follows:
$sendto = "2495371937@qq.com";//define the recipient of the message
$usermail = $_post[' email '];//get email
$content = nl2br ($_post[' msg ');/Get Message
$subject = "You have new news";
$headers = "From:". Strip_tags ($usermail). "\ r \ n";
$headers. = "Reply-to:". Strip_tags ($usermail). "\ r \ n";
$headers. = "Mime-version:1.0\r\aan";
$headers. = "content-type:text/html;charset=utf-8 \ r \ n";
$msg = "";
$msg. = "
$msg. = "<strong> from:</strong>". $usermail. " \ r \ n ";
$msg. = "<strong> content:</strong>". $content. " \ r \ n ";
$msg. = "";
if (@mail ($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
Demo
