Hello everyone, Today in this blog we are going to learn how we can send email using PHP. Keep in mind when sending e-mails through PHP is a relatively simple task, but set all the configuration and authentication and to make sure you are sending correctly is where it becomes challenging.
To actually send emails (in a relatively easy manner), an important part of the code you might want to focus on is what SMTP server you are using, for a quick setup you could easily use gmails SMTP with your Gmail account credentials and utilize a mail library such as PHPMailer.
Let’s start with create a form page and when you submit your page then back end you have to write you code for send your email I demonstrate here some step, where the edit is required replace it with your own post input value.
Send mail using PHP is a very essential part of a web application for doing this in PHP we have to do something right three-step which I discuss here. For sending an email in PHP we use phpmailer library and SMTP server of Gmail smtp.gmail.com believe me it very easy if you follow all these steps
- download phpmailer library and install it
- write code for send email
- fix an error that occurs when we send an email
You May Also Like:
- Strong Random Password Generator Using Javascript
- Take Image Snapshot from a webcam with Jquery and HTML
- How to decode JSON data and accessing the results in PHP
- Difference Between search() and indexOf() in Javascript
- Limit number of login attempt using PHP & MySQL
First of all, we create an HTML file
The HTML
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%0D%0A%20%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%20%20%20%20%3Ctitle%3EEmail%20Form%3C%2Ftitle%3E%0D%0A%20%20%20%20%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.1.1%2Fcss%2Fbootstrap.min.css’%3E%0D%0A%20%20%20%20%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Ffont-awesome%2F4.1.0%2Fcss%2Ffont-awesome.min.css’%3E%0D%0A%20%20%20%20%3Clink%20rel%3D’stylesheet’%20href%3D’style.css’%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%3E%0D%0A%20%20%3C!–%20Image%20loader%20–%3E%0D%0A%20%20%20%20%3Cdiv%20id%3D%22loading%22%20style%3D%22display%3A%20none%22%3E%0D%0A%20%20%20%20%20%20%3Cdiv%20id%3D%22loading-center%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22loading-center-absolute%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22object%22%20id%3D%22object_one%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22object%22%20id%3D%22object_two%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22object%22%20id%3D%22object_three%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C!–%20Image%20loader%20–%3E%0D%0A%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22container-inner%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22text-center%22%3ESend%20E-Mail%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cform%20class%3D%22form-email%22%20method%3D%22POST%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22form-group%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22input-group%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22email%22%20name%3D%22toemail%22%20id%3D%22toemail%22%20class%3D%22form-control%22%20placeholder%3D%22To%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22input-group-btn%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20type%3D%22button%22%20class%3D%22btn%20btn-default%20dropdown-toggle%22%20data-toggle%3D%22dropdown%22%3E%3Ci%20class%3D%22fa%20fa-cog%22%3E%3C%2Fi%3E%20%3Cspan%20class%3D%22caret%22%3E%3C%2Fspan%3E%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22dropdown-menu%20pull-right%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20data-toggle%3D%22address%22%20data-target%3D%22%23cc%22%20href%3D%22%23%22%3EAdd%20Cc%3C%2Fa%3E%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20data-toggle%3D%22address%22%20data-target%3D%22%23bcc%22%20href%3D%22%23%22%3EAdd%20Bcc%3C%2Fa%3E%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csmall%20class%3D%22help-block%20text-muted%22%3EYou%20may%20add%20multiple%20email%20addresses%20and%20separate%20them%20with%20a%20comma.%3C%2Fsmall%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22form-group%22%20id%3D%22cc%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20class%3D%22form-control%22%20placeholder%3D%22Cc%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20data-toggle%3D%22remove%22%20class%3D%22remove%22%3E%26times%3B%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22form-group%22%20id%3D%22bcc%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20class%3D%22form-control%22%20placeholder%3D%22Bcc%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20data-toggle%3D%22remove%22%20class%3D%22remove%22%3E%26times%3B%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22form-group%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20name%3D%22subject%22%20id%3D%22subject%22%20class%3D%22form-control%22%20placeholder%3D%22Subject%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22nav%20nav-tabs%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20class%3D%22active%22%3E%3Ca%20data-toggle%3D%22tab%22%20href%3D%22%23write%22%3EWrite%3C%2Fa%3E%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22tab-content%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22tab-pane%20active%22%20id%3D%22write%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctextarea%20class%3D%22form-control%22%20name%3D%22message%22%20id%3D%22message%22%20rows%3D%2210%22%3E%3C%2Ftextarea%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22text-right%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-success%22%20type%3D%22button%22%20id%3D%22sendemail%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ci%20class%3D%22fa%20fa-send%22%3E%3C%2Fi%3E%20%26nbsp%3B%20Send%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%0D%0A%20%20%20%20%3Cscript%20src%3D’https%3A%2F%2Fcode.jquery.com%2Fjquery-2.2.4.min.js’%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%3Cscript%20src%3D’https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.1.1%2Fjs%2Fbootstrap.min.js’%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fsweetalert%2Fdist%2Fsweetalert.min.js%22%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%3Cscript%20src%3D’main.js’%3E%3C%2Fscript%3E%0D%0A%3C%2Fbody%3E%0D%0A%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
The CSS
[pastacode manual=”html%2C%20body%20%7B%0D%0A%20%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20%20background-color%3A%20%23fcfcfc%3B%0D%0A%7D%0D%0A%20body%20%3E%20.container%2C%20body%20%3E%20.container%20%3E%20.container-inner%20%7B%0D%0A%20%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20%20width%3A%20600px%3B%0D%0A%7D%0D%0A%20body%20%3E%20.container%20%7B%0D%0A%20%20%20%20%20display%3A%20table%3B%0D%0A%20%20%20%20%20padding-top%3A%2020px%3B%0D%0A%7D%0D%0A%20body%20%3E%20.container%20%3E%20.container-inner%20%7B%0D%0A%20%20%20%20%20display%3A%20table-cell%3B%0D%0A%7D%0D%0A%20.form-email%20%7B%0D%0A%20%20%20%20%20padding%3A%2015px%3B%0D%0A%20%20%20%20%20border%3A%201px%20solid%20%23cccccc%3B%0D%0A%20%20%20%20%20border-radius%3A%204px%3B%0D%0A%20%20%20%20%20box-shadow%3A%200%204px%206px%20-2px%20%23eeeeee%3B%0D%0A%7D%0D%0A%20.form-email%20.nav-tabs%20%7B%0D%0A%20%20%20%20%20margin-left%3A%20-15px%3B%0D%0A%20%20%20%20%20margin-right%3A%20-15px%3B%0D%0A%20%20%20%20%20padding-left%3A%2015px%3B%0D%0A%20%20%20%20%20padding-right%3A%2015px%3B%0D%0A%7D%0D%0A%20.form-email%20.nav-tabs%20%3E%20.pull-right%20%7B%0D%0A%20%20%20%20%20margin-right%3A%20-15px%3B%0D%0A%7D%0D%0A%20.form-email%20.nav-tabs%20%3E%20.pull-right%20%3E%20a%20%7B%0D%0A%20%20%20%20%20color%3A%20%23555555%3B%0D%0A%20%20%20%20%20font-weight%3A%20bold%3B%0D%0A%7D%0D%0A%20.form-email%20.nav-tabs%20%3E%20.pull-right%20%3E%20a%3Ahover%20%7B%0D%0A%20%20%20%20%20color%3A%20%23428bca%3B%0D%0A%20%20%20%20%20border-color%3A%20transparent%3B%0D%0A%20%20%20%20%20background-color%3A%20transparent%3B%0D%0A%7D%0D%0A%20.form-email%20.tab-content%20%7B%0D%0A%20%20%20%20%20padding-top%3A%2020px%3B%0D%0A%20%20%20%20%20padding-bottom%3A%2015px%3B%0D%0A%7D%0D%0A%20.form-email%20.form-group%20%7B%0D%0A%20%20%20%20%20position%3A%20relative%3B%0D%0A%7D%0D%0A%20.form-email%20.form-group%20%3E%20.remove%20%7B%0D%0A%20%20%20%20%20-webkit-transition%3A%20opacity%200.2s%20ease%3B%0D%0A%20%20%20%20%20-moz-transition%3A%20opacity%200.2s%20ease%3B%0D%0A%20%20%20%20%20-o-transition%3A%20opacity%200.2s%20ease%3B%0D%0A%20%20%20%20%20transition%3A%20opacity%200.2s%20ease%3B%0D%0A%20%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20%20top%3A%201px%3B%0D%0A%20%20%20%20%20right%3A%201px%3B%0D%0A%20%20%20%20%20display%3A%20inline-block%3B%0D%0A%20%20%20%20%20height%3A%2036px%3B%0D%0A%20%20%20%20%20margin-bottom%3A%200%3B%0D%0A%20%20%20%20%20padding-left%3A%20px%3B%0D%0A%20%20%20%20%20padding-right%3A%2010px%3B%0D%0A%20%20%20%20%20font-weight%3A%20bold%3B%0D%0A%20%20%20%20%20font-size%3A%2018px%3B%0D%0A%20%20%20%20%20text-align%3A%20center%3B%0D%0A%20%20%20%20%20vertical-align%3A%20middle%3B%0D%0A%20%20%20%20%20cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20border%3A%200%20none%3B%0D%0A%20%20%20%20%20border-top-right-radius%3A%204px%3B%0D%0A%20%20%20%20%20border-bottom-right-radius%3A%204px%3B%0D%0A%20%20%20%20%20background-color%3A%20rgba(255%2C%20255%2C%20255%2C%200.95)%3B%0D%0A%20%20%20%20%20opacity%3A%200.5%3B%0D%0A%7D%0D%0A%20.form-email%20.form-group%20%3E%20.remove%3Ahover%20%7B%0D%0A%20%20%20%20%20opacity%3A%201%3B%0D%0A%7D%0D%0A%20.form-email%20input%5Btype%3D%22text%22%5D.form-control%2C%20.form-email%20input%5Btype%3D%22email%22%5D.form-control%20%7B%0D%0A%20%20%20%20%20height%3A%2038px%3B%0D%0A%7D%0D%0A%20.form-email%20.input-group%20%7B%0D%0A%20%20%20%20%20width%3A%20100%25%3B%0D%0A%7D%0D%0A%20.form-email%20.btn%20%7B%0D%0A%20%20%20%20%20height%3A%2038px%3B%0D%0A%7D%0D%0A%20.form-email%20textarea.form-control%20%7B%0D%0A%20%20%20%20%20resize%3A%20vertical%3B%0D%0A%20%20%20%20%20border-bottom-color%3A%20transparent%3B%0D%0A%20%20%20%20%20background-color%3A%20%23fbfbfb%3B%0D%0A%20%20%20%20%20border-bottom-left-radius%3A%200%3B%0D%0A%20%20%20%20%20border-bottom-right-radius%3A%200%3B%0D%0A%7D%0D%0A%20.form-email%20textarea.form-control%3Afocus%20%7B%0D%0A%20%20%20%20%20background-color%3A%20%23ffffff%3B%0D%0A%7D%0D%0A%20%23bcc%2C%20%23cc%20%7B%0D%0A%20%20%20%20%20-webkit-transition%3A%20all%200.3s%20ease%200.5s%3B%0D%0A%20%20%20%20%20-moz-transition%3A%20all%200.3s%20ease%200.5s%3B%0D%0A%20%20%20%20%20-o-transition%3A%20all%200.3s%20ease%200.5s%3B%0D%0A%20%20%20%20%20transition%3A%20all%200.3s%20ease%200.5s%3B%0D%0A%20%20%20%20%20display%3A%20none%3B%0D%0A%20%20%20%20%20opacity%3A%200%3B%0D%0A%7D%0D%0A%20%23bcc.active%2C%20%23cc.active%20%7B%0D%0A%20%20%20%20%20-webkit-transition%3A%20all%200.2s%20ease%200s%3B%0D%0A%20%20%20%20%20-moz-transition%3A%20all%200.2s%20ease%200s%3B%0D%0A%20%20%20%20%20-o-transition%3A%20all%200.2s%20ease%200s%3B%0D%0A%20%20%20%20%20transition%3A%20all%200.2s%20ease%200s%3B%0D%0A%20%20%20%20%20display%3A%20block%3B%0D%0A%20%20%20%20%20opacity%3A%201%3B%0D%0A%7D%0D%0A%2F*Loader%20Css*%2F%0D%0A%20%23loading%7B%0D%0A%20%20%20%20%20background-color%3A%20rgba(55%2C55%2C55%2C0.7)%3B%0D%0A%20%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20%20position%3A%20fixed%3B%0D%0A%20%20%20%20%20z-index%3A%2099999%3B%0D%0A%20%20%20%20%20margin-top%3A%200px%3B%0D%0A%20%20%20%20%20top%3A%200px%3B%0D%0A%7D%0D%0A%20%23loading-center%7B%0D%0A%20%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20%20position%3A%20relative%3B%0D%0A%7D%0D%0A%20%23loading-center-absolute%20%7B%0D%0A%20%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20%20left%3A%2050%25%3B%0D%0A%20%20%20%20%20top%3A%2050%25%3B%0D%0A%20%20%20%20%20height%3A%20150px%3B%0D%0A%20%20%20%20%20width%3A%20150px%3B%0D%0A%20%20%20%20%20margin-top%3A%20-75px%3B%0D%0A%20%20%20%20%20margin-left%3A%20-75px%3B%0D%0A%7D%0D%0A%20.object%7B%0D%0A%20%20%20%20%20width%3A%2020px%3B%0D%0A%20%20%20%20%20height%3A%2020px%3B%0D%0A%20%20%20%20%20background-color%3A%20%23FFF%3B%0D%0A%20%20%20%20%20float%3A%20left%3B%0D%0A%20%20%20%20%20margin-right%3A%2020px%3B%0D%0A%20%20%20%20%20margin-top%3A%2065px%3B%0D%0A%20%20%20%20%20-moz-border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0D%0A%20%20%20%20%20-webkit-border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0D%0A%20%20%20%20%20border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0D%0A%7D%0D%0A%20%23object_one%20%7B%0D%0A%20%20%20%20%20-webkit-animation%3A%20object_one%201.5s%20infinite%3B%0D%0A%20%20%20%20%20animation%3A%20object_one%201.5s%20infinite%3B%0D%0A%7D%0D%0A%20%23object_two%20%7B%0D%0A%20%20%20%20%20-webkit-animation%3A%20object_two%201.5s%20infinite%3B%0D%0A%20%20%20%20%20animation%3A%20object_two%201.5s%20infinite%3B%0D%0A%20%20%20%20%20-webkit-animation-delay%3A%200.25s%3B%0D%0A%20%20%20%20%20animation-delay%3A%200.25s%3B%0D%0A%7D%0D%0A%20%23object_three%20%7B%0D%0A%20%20%20%20%20-webkit-animation%3A%20object_three%201.5s%20infinite%3B%0D%0A%20%20%20%20%20animation%3A%20object_three%201.5s%20infinite%3B%0D%0A%20%20%20%20%20-webkit-animation-delay%3A%200.5s%3B%0D%0A%20%20%20%20%20animation-delay%3A%200.5s%3B%0D%0A%7D%0D%0A%20%40-webkit-keyframes%20object_one%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%40keyframes%20object_one%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%40-webkit-keyframes%20object_two%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%40keyframes%20object_two%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%40-webkit-keyframes%20object_three%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%40keyframes%20object_three%20%7B%0D%0A%20%20%20%20%2075%25%20%7B%0D%0A%20%20%20%20%20%20%20%20%20transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%20%20%20%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A” provider=”manual” lang=”default”/]
The JavaScript
[pastacode manual=”%20%2Bfunction%20(%24)%20%7B’use%20strict’%3B%0D%0A%20%20%20%20%20%20var%20togglr%20%3D%20’%5Bdata-toggle%3Daddress%5D’%2C%0D%0A%20%20%20%20%20%20remove%20%3D%20’%5Bdata-toggle%3D%22remove%22%5D’%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%24(togglr).on(‘click’%2C%20function%20(e)%20%7B%0D%0A%20%20%20%20%20%20%20%20var%20target%20%3D%20%24(this).data(‘target’)%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24(target).toggleClass(‘active’)%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20e.preventDefault()%3B%0D%0A%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%24(remove).on(‘click’%2C%20function%20(e)%20%7B%0D%0A%20%20%20%20%20%20%20%20var%20parent%20%3D%20%24(this).parent()%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20if%20(%24(parent).hasClass(‘active’))%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%24(parent).removeClass(‘active’)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%24(parent%2C%20’input’).val(”)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20e.preventDefault()%3B%0D%0A%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%7D(window.jQuery)%3B%0D%0A%0D%0A%2F%2Fvalidating%20user%20input%0D%0A%20%20%20%20function%20ValidateEmailForm()%7B%0D%0A%20%20%20%20%20%20%20%20if(%20document.getElementById(‘toemail’).value%20%3D%3D%20%22%22)%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20swal(%22Error%22%2C%22Please%20Enter%20To%20Email%20ID%22%2C%20%7Bicon%3A%20%22error%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20document.getElementById(‘toemail’).focus()%20%3B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20false%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20if(%20document.getElementById(‘subject’).value%20%3D%3D%20%22%22%20)%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20swal(%22Error%22%2C%22Please%20Enter%20Your%20Subject%22%2C%20%7Bicon%3A%20%22error%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20document.getElementById(‘subject’).focus()%20%3B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20false%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20if(%20document.getElementById(‘message’).value%20%3D%3D%20%22%22%20)%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20swal(%22Error%22%2C%22Please%20Enter%20Your%20Message%22%2C%20%7Bicon%3A%20%22error%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20document.getElementById(‘message’).focus()%20%3B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20false%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%2F%2Fonclick%20event%20to%20submit%20a%20form%0D%0A%20%20%20%20%20%20%24(‘%23sendemail’).on(%22click%22%2C%20function()%7B%0D%0A%20%20%20%20%20%20%20%20%20%20var%20validateform%20%3D%20ValidateEmailForm()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20if(validateform%20%3D%3D%3D%20true)%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20toemail%20%3D%20%24(‘%23toemail’).val()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20subject%20%3D%20%24(‘%23subject’).val()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20message%20%3D%20%24(‘%23message’).val()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%22sendEmail.php%22%2C%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20method%3A%22post%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7Btoemail%3Atoemail%2Csubject%3Asubject%2Cmessage%3Amessage%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20beforeSend%3A%20function()%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Show%20image%20container%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23loading%22).show()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3Afunction(result)%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(result)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(result.code%3D%3D1)%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20swal(%22Success%22%2Cresult.message%2C%20%7Bicon%3A%20%22success%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.setTimeout(function()%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.location.href%20%3D%20%22email.php%22%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%201000)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20swal(%22Error%22%2Cresult.message%2C%20%7Bicon%3A%20%22error%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20complete%3Afunction(html)%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Hide%20image%20container%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23loading%22).hide()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20return%20false%3B%0D%0A%20%20%20%20%20%20%7D)%3B” provider=”manual” lang=”default”/]
The PHP Script
[pastacode manual=”%3C%3Fphp%0D%0Ause%20PHPMailer%5CPHPMailer%5CPHPMailer%3B%0D%0Ause%20PHPMailer%5CPHPMailer%5CException%3B%0D%0A%2F%2FLoad%20Composer’s%20autoloader%0D%0Arequire%20(‘mail%2Fvendor%2Fautoload.php’)%3B%0D%0Aheader(‘Content-Type%3A%20application%2Fjson’)%3B%0D%0A%0D%0A%09if%20(!empty(%24_POST%5B’toemail’%5D)%20%26%26%20!empty(%24_POST%5B’subject’%5D)%20%26%26%20!empty(%24_POST%5B’message’%5D))%20%7B%0D%0A%09%20%20%20%20try%7B%0D%0A%09%09%20%20%20%20%24result%20%3D%20array()%3B%0D%0A%09%09%20%20%20%20%24toemail%3D%24_POST%5B’toemail’%5D%3B%0D%0A%09%09%20%20%20%20%24subject%3D%24_POST%5B’subject’%5D%3B%0D%0A%09%09%20%20%20%20%24messages%3D%24_POST%5B’message’%5D%3B%0D%0A%09%09%20%20%20%20%24mail%20%3D%20new%20PHPMailer(true)%3B%0D%0A%09%09%20%20%20%20%24mail-%3EisSMTP()%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%20%20%20%2F%2F%20Set%20mailer%20to%20use%20SMTP%0D%0A%09%09%09%24mail-%3EHost%20%3D%20’smtp.gmail.com’%3B%20%09%09%09%09%09%09%20%20%2F%2F%20Specify%20main%20and%20backup%20SMTP%20servers%0D%0A%09%09%09%24mail-%3ESMTPAuth%20%3D%20true%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%20%09%20%2F%2F%20Enable%20SMTP%20authentication%0D%0A%09%09%09%24mail-%3EUsername%20%3D%20’username’%3B%20%20%20%20%20%20%20%20%20%20%2F%2F%20SMTP%20username%0D%0A%09%09%09%24mail-%3EPassword%20%3D%20’password’%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20SMTP%20password%0D%0A%09%09%09%24mail-%3ESMTPSecure%20%3D%20’ssl’%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Enable%20TLS%20encryption%2C%20%60ssl%60%20also%20accepted%0D%0A%09%09%09%24mail-%3EPort%20%3D%20465%3B%20%20%20%20%0D%0A%0D%0A%09%09%09%2F%2FRecipients%0D%0A%09%09%09%24mail-%3EsetFrom(‘sentfromemail’%2C%20’Eamil%20Heading’)%3B%0D%0A%09%09%09%24mail-%3EaddAddress(%24toemail)%3B%20%20%20%20%20%2F%2F%20Add%20a%20recipient%0D%0A%0D%0A%09%09%09%2F%2FContent%0D%0A%09%09%09%24mail-%3EisHTML(true)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%20%2F%2F%20Set%20email%20format%20to%20HTML%0D%0A%09%09%09%24mail-%3ESubject%20%3D%20%24subject%3B%0D%0A%09%09%09%24mail-%3EBody%20%20%20%20%3D%20%24messages%3B%0D%0A%09%09%09if(%24mail-%3Esend())%7B%0D%0A%09%09%09%09%24result%5B’message’%5D%20%3D%20%22Email%20Send%20Successfully%22%3B%0D%0A%09%09%09%09%24result%5B’code’%5D%3D1%3B%0D%0A%09%09%09%7D%0D%0A%09%09%09else%7B%0D%0A%09%09%09%09%24result%5B’message’%5D%20%3D%20%22Message%20could%20not%20be%20sent.%20Mailer%20Error%22%3B%0D%0A%09%09%09%09%24result%5B’code’%5D%3D0%3B%0D%0A%09%09%09%7D%0D%0A%09%09%7D%0D%0A%09%09catch(PDOException%20%24e)%7B%0D%0A%09%09%09%24result%5B’message’%5D%20%3D%20%22There%20is%20some%20problem%22%20.%20%24e-%3EgetMessage()%3B%0D%0A%09%09%20%20%20%20%24result%5B’code’%5D%3D0%3B%0D%0A%09%09%7D%0D%0A%09%09echo%20json_encode(%24result)%3B%0D%0A%09%7D” provider=”manual” lang=”default”/]
Output:
View Demo Download Source Code
Thank you for reading this blog, share this blog as much as possible and also show it to your friends. If you have any questions, feel free to comment.