1 / 49

How to Make HTML Form Work and Send Mail

Make HTML Form work and send mail or submission to your email and another copy for sender. Step by step hardcore coding tutorial for next project.<br>[ https://rainastudio.com/make-html-form-work-and-send-mail/ ]

margiermann
Download Presentation

How to Make HTML Form Work and Send Mail

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. How to Make HTML Form Work and Send Mail RainaStudio

  2. How to Make HTML Form Work and Send Mail 3 Most Secure WordPress Hosting for Business Website Alright! Another sleepless night is going. Love becoming deep and dream gets bigger! Howdy, my reader does your HTML Form work expected. If not here I am not to fix up but show you how to make HTML Form work and send mail. Well in this article or tutorial we are going to cover the following: RainaStudio ●HTML stuff for making the Form ●CSS stuff to style the Form ●JavaScript/jQuery for making attitude for the Form ●PHPMailer integration for sending the submission ●Ajax for doing some back and forth

  3. Tutorial to Make HTML Form Work and Send Mail So, I am not alone who love to go back and forth for getting things done. During the process of making the HTML Form work expectedly, I had to go back and forth but learned more. Learning is always cool & sexy! Do not waste time anymore for making the second introduction cool. On this project, I had to use bootstrap because the parent project was using the bootstrap. Actually it makes our work easy. So, please don’t forget to link bootstrap in your project head. Let’s get the ball rolling.

  4. HTML Form

  5. HTML Form

  6. HTML Form

  7. HTML Form

  8. HTML Form So, in the above HTML snippet of Form, there are four input text fields. And they are for collecting information on 1) Full Name 2)City 3)Telephone Number 4)Email Address 5)and Message And there is an input range slider for collecting area length. In our previous tutorial article was about creating an awesome input slider which was actually part of this project. On W3Schools.com you will find a solid tutorial of creating range sliders. After Input Range Slider there is another element in this form for selecting an option. One of the options required attachment. So there is an input field too for attaching files. Last but not least there are more additional input checkboxes for plying around.

  9. Bonus HTML for Modals

  10. Bonus HTML for Modals In the bonus HTML for modals; the first modal described privacy policy and in the second tells the form submitter to sit tight and have patience while information being sent.

  11. CSS Stuff for Styling HTML

  12. CSS Stuff for Styling HTML

  13. CSS Stuff for Styling HTML

  14. CSS Stuff for Styling HTML

  15. CSS Stuff for Styling HTML

  16. CSS Stuff for Styling HTML

  17. CSS Stuff for Styling HTML

  18. CSS Stuff for Styling HTML

  19. CSS Stuff for Styling HTML

  20. CSS Stuff for Styling HTML

  21. CSS Stuff for Styling HTML

  22. CSS Stuff for Styling HTML

  23. CSS Stuff for Styling HTML

  24. CSS Stuff for Styling HTML

  25. CSS Stuff for Styling HTML

  26. CSS Stuff for Styling HTML

  27. CSS Stuff for Styling HTML

  28. CSS Stuff for Styling HTML

  29. CSS Stuff for Styling HTML

  30. CSS Stuff for Styling HTML

  31. CSS Stuff for Styling HTML

  32. CSS Stuff for Styling HTML

  33. CSS Stuff for Styling HTML

  34. CSS Stuff for Styling HTML

  35. JavaScript/jQuery for making attitude for the Form It is jQuery though a library of JavaScript. So to make it function add the following snippet at your project footer. [thrive_text_block color=”note” headline=””]Note that: we have to add our JaveScript/jQuery code after or beneath adding jQuery library to ensure our script run or function properly. [/thrive_text_block] Here is our jQuery code.

  36. JavaScript/jQuery for making attitude for the Form

  37. JavaScript/jQuery for making attitude for the Form

  38. JavaScript/jQuery for making attitude for the Form

  39. JavaScript/jQuery for making attitude for the Form

  40. JavaScript/jQuery for making attitude for the Form Oh, Baby! It is not something called hell a lot but it is something so mean. However, if you do not understand code then the comment above each block will help, I hope.

  41. PHPMailer Integration for Sending the Submission In this step, we need to install the PHPMailer library or mail sending from Github. So, sir, do not forget to download only the LATEST stable version. So, when the download is done extract ZIP file and copy 1.class.phpmailer.php 2.class.smtp.php 3.PHPMailerAutoload.php files into a directory or folder named PHPMailer in your project folder. Now, we are going to create a file name as mail-send.php. Into the file, we are going to write the following PHP.

  42. PHPMailer Integration for Sending the Submission

  43. PHPMailer Integration for Sending the Submission

  44. PHPMailer Integration for Sending the Submission

  45. PHPMailer Integration for Sending the Submission

  46. PHPMailer Integration for Sending the Submission So, you know, it might look a bit complex at first place but it is not! Read close with an open eye & heart. Okay, I am here so do not worry. At the first attempt, you will have to change actually replace the following value of: ●$mail->Host = ’email.example.com’; // replace email.example.com with yours host ●$mail->Username = ’email@example.com’; // replace email@example.com with your address ●$mail->Password = ‘myPassword’; // replace myPassword with yours ●$mail->addAddress(‘mail@example.com’); // replace with where you want to receive So far we are set to go down! At this point, we need to add a block of AJAX. Do not mind to add it at the end but before ending of the body tag.

  47. Ajax for Pulling Input Data to PHP Yes, we will use AJAX for pulling input data to the mail- send.php file so that it takes care of submission and helps to dispatch as an email into your inbox.

  48. Ajax for Pulling Input Data to PHP

  49. GET MORE OUT OF RAINASTUDIO So, are we done? Yeah almost! It is good night and pleasure having you with this tutorial. Now if you want to download the full project then unlock the download button by yourself. [thrive_lead_lock id=’5263′][thrive_link color=’orange’ link=’https://rainastudio.com/demo/form.zip’ target=’_blank’ size=’medium’ align=’aligncenter’]Donwload ZIP![/thrive_link][/thrive_lead_lock] So, have a great day and happy web development! Do not feel presure to leave your feedback if you stuck somewhere.

More Related