Use jquery to create a practical data transmission mode pop-up form use jquery to create a practical data transmission mode pop-up form

ArticleDirectory

• Use fancybox
• Send Ajax request
• Use PHP to send emails

Modal forms have become a frequently used data transmission method for Web developers to design interfaces.PassThe modal window can improve the website availability. A customer wants a form popped up in a mode to submit website feedback. After some tests, IUse jqueryFancybox pluginCreate a beautiful modal form,The data in the submitted form is called by Ajax on the server side. You can receive feedback from users in your email.During the test, do not send the email to my mailbox. Click the link sent to your own mailbox. I have received your email. Someone left a message and wanted the source code, I will share the source code as a response. Please recommend this article for more help.

You may also like these articles.

Parallax scrolling tutorial implemented by jquery (large background Effect of parallax)
Create a friendly page index in alphabetical order using jquery
Experience Sharing using jquery to create a dynamic preview product color effect-delaying JavaScript Execution and improving webpage loading speed cutting-edge design recommendations-flying your 404 page-using jquery to create a flying 404 page to share 5 practical cutting-edge design recommendations for JavaScript dynamic update icon plug-ins-use jquery to create a dynamic floating Web InterfaceHtmlCode

The main JS files in the header Section are as follows: Introduce jquery code and fancybox code.

 
<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, go to the official websiteDownload the latest fancybox,Decompress the package.The core HTML page code is very simple. Here is a hidden Div,When you click the href link, a modal window is displayed.

 <  Div  ID  = "Wrapper"  >  Send us feedback from the modal window. <  A  Class  = "Modalbox"  Href  = "# Inline"  > Click me </  A  > </  Div  >  <! --  Hidden inline form  -->  <  Div ID  = "Inline"  >  <  H2  > Send message to us </  H2  >  <  Form  ID  = "Contact"  Action  = "#"  Method  = "Post" Name  = "Contact"  > <  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 sheets

Set the color, size, and style of the text box to get the focus. Use: HoverAnd: ActiveTo displayStatus.

 . 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,.txt area: 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 defined an incorrect CSS class.Used with jquery to check whether the user's input data is correct. Inputting incorrect data will make the fieldThe text, border, and background are dimmed. Until the userThe color of valid data fields will be restored.

 

 

 # 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 is as follows:

Use fancybox

Call the fancybox Default Code after the page is loaded.

 
$ (Document ). ready (function () {$ (". modalbox "). fancybox (); $ ("# contact "). submit (function () {return false ;}); // disable default form submission
 

The second line of the Code disables the default contact form submission action. Why? ThereforeWe can process our own click events and pass data through Ajax.After the user submits the form, we need to get the current value of the fields (email and message.We also want to check whether the email address is valid and the message length exceeds the specified length value.

$ ("# 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& Lt;4) {$ ("# MSG"). addclass ("error");} else if (msglen& Gt;= 4) {$ ("# MSG"). removeclass ("error ");}
 

The above jquery Code uses some logical statements.The form will not be submitted until the email is valid and the message length exceeds 4 letters.

Send Ajax request Through the onclick event above, you need to send form data to PhP., We will receive an email in our inbox.

  // if the two fields are verified, send the message 
 // after clicking the send button, the button is replaced with a text prompt such as "sending" to prevent users from clicking and submitting, and the prompt is more user-friendly 
 $ (" # Send "). replacewith (" sending...  ");  $. ajax ({type: 'post', URL: 'sendmessage. php', data: $ ("# contact "). serialize (), success: function (data) {If (Data = "true") {$ ("# Contact "). fadeout ("fast", function () {$ (this ). before ("
  submitted successfully! Your message has been sent. Thank you.  
 ");   
 setTimeout (" $. fancybox. close () ", 1000) ;}}}) ;}});  

The serialize () method is used to serialize submitted Ajax data so that standard URL encoding is generated.
After the server responds successfully, the pop-up form is hidden and a success message is displayed.I used the setTimeout () method to close fancybox. Here I set a second to hide the form.The JS Code to perform this operation is $. fancybox. Close ().

 

Use PHP to send emails Sendmessage. php accepts user input variables.Then call mail to try to send it. If the message is sent successfully, "true" is returned; otherwise, "false" is returned.

 $ Sendto = "2495371937@qq.com" ; // Define the recipient of the email  $ Usermail = $ _ Post ['Email' ]; // Get email  $ Content = Nl2br ( $ _ Post ['Msg' ]); // Get the message  $ Subject = "You have new messages" ;  $ Headers = "From :". Strip_tags ( $ Usermail ). "\ R \ n" ;  $ Headers . = "Reply-:". Strip_tags ( $ Usermail ). "\ R \ n" ; $ Headers . = "Mime-version: 1.0 \ r \ AAN" ;  $ Headers . = "Content-Type: text/html; charset = UTF-8 \ r \ n" ;  $ Msg = "" ;  $ Msg . = "<H2 style =" font-weight: bold; border-bottom: 1px dotted #  CCC; "> you have a new message </H2> \ r \ n ";      $ 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 ";
} 

All the codes have ended so far. In the above demonstration, all messages will be sent$ SendtoIn the variable for receiving emails, I receive messages from others, such,

 

Now, let's modify the code and send it to your own mailbox. We just need to set$ SendtoVariable is$ Sendto="$ _ Post['Email']"In this way, the email will be sent to the email address you entered,If you like this effect, please recommend more,

 Download source code

Link to this article: create a practical data transmission mode pop-up form using jquery

 

Hide