How to Make HTML Form Work and Send Mail

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.