[{"data":1,"prerenderedAt":18},["ShallowReactive",2],{"\u002F2014\u002F10\u002Fresponsive-contact-form-for-web-sites-using-bootstrap-php-and-mysql":3},{"html":4,"toc":5},"\u003Cp>A Contact Form is one of the most basic elements of a website. A contact form acts as a basic medium between you and your user. In this article I wish to describe on how to create a simple contact form for your website.\u003C\u002Fp>\n\u003Ch2 id=\"view-source-https-github-com-amreddys-simple-contactus-tree-master\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Famreddys\u002FSimple-ContactUs\u002Ftree\u002Fmaster\">\u003Cstrong>View Source\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ch2 id=\"form-preview-wp-content-uploads-2014-10-contactus-png-webp\">\u003Ca href=\"\u002Fwp-content\u002Fuploads\u002F2014\u002F10\u002Fcontactus.png.webp\">\u003Cstrong>Form preview\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ch3 id=\"the-mark-up\">\u003Cstrong>The Mark Up\u003C\u002Fstrong>\u003C\u002Fh3>\n\u003Cp>First impression is the best impression. With that being said, looks are the first things that build an impression about something, So inorder to make form look best in any browser, we are using the bootstrap framework from the official CDN but not mentioning everything here. Go to the source for a full view of linking bootstrap libraries.\u003C\u002Fp>\n\u003Cpre class=\"shiki github-light\" style=\"background-color:#fff;color:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan><h2 class=\"page-heading\">Get in <span class=\"text-muted\">touch<\u002Fspan><\u002Fh2> \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>        <br>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>     <form name=\"contact\" action=\"process.php\" method=\"post\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t<div class=\"input-group input-group-lg\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t\t<span class=\"input-group-addon glyphicon glyphicon-user\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t\t<input type=\"text\" name=\"name\" class=\"form-control\" placeholder=\"Your Name\" required>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t<\u002Fdiv> \t\t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>        <br>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<div class=\"input-group input-group-lg\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t\t<span class=\"input-group-addon glyphicon glyphicon-earphone\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan> \t\t<input type=\"text\" name=\"number\" class=\"form-control\" placeholder=\"Your Mobile\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>         <br>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<div class=\"input-group input-group-lg\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t\t<span class=\"input-group-addon\">@<\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t\t<input type=\"email\" name=\"email\" class=\"form-control\" placeholder=\"Your Email\" required>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<\u002Fdiv> \t\t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>          <br>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<div class=\"input-group input-group-lg\"> \t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t\t<span class=\"input-group-addon glyphicon glyphicon-question-sign\"><\u002Fspan> \t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t\t<textarea class=\"form-control\" name=\"query\" style=\"height: 100px;\" placeHolder=\"Your queries here\" required><\u002Ftextarea> \t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\t<\u002Fdiv> \t\t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>           <br> \t\t\t\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>         <button type=\"submit\" class=\"pull-right btn-lg btn-primary\">Submit Query<\u002Fbutton> \t\t\t\t \t\t  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>       <\u002Fform>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3 id=\"the-coding-part\">\u003Cstrong>The Coding Part\u003C\u002Fstrong>\u003C\u002Fh3>\n\u003Cp>To put it simple I am using another file process.php but I suggest you have them all in single file because it will be easy to maintain and display errors.\u003C\u002Fp>\n\u003Cpre class=\"shiki github-light\" style=\"background-color:#fff;color:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">php\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\"> $mail\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">\"contactus@amreddys.com\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">;\t\t\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002FMail through which you wish to be notified. \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E\">$subject\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">\"A new entry to the contact us\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">; \t\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F This is the subject of the mail you are going to receive when a user submits a query.   \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E\">$name\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">filter_input\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">(\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">INPUT_POST\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">'name'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">FILTER_SANITIZE_SPECIAL_CHARS\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">); $email\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">filter_input\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">(\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">INPUT_POST\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">'email'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">FILTER_SANITIZE_SPECIAL_CHARS\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">); \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E\">$number\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">filter_input\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">(\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">INPUT_POST\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">'number'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">FILTER_SANITIZE_SPECIAL_CHARS\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">); $query\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">filter_input\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">(\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">INPUT_POST\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">'query'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">, \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">FILTER_SANITIZE_SPECIAL_CHARS\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">); \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E\">$msg\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">\"A new contact query  Name : {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">$name\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">} Email : {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">$email\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">} Mobile : {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">$number\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">} Query : {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">$query\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">}  Please respond at the earliest.  \"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">; \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5\">mail\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">($mail, $subject, $msg); \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49\">?>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\"> \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49\"><\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">script\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\"> \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6F42C1\">alert\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">\"Entry submitted successfully.\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">); \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5\">window\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">.\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">location\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62\">\".\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E\">; \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5\">script\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Only one thing that needs an explanation is the filter_input. I am just using it to sanitize special characters from user data.\u003C\u002Fp>\n\u003Cp>Look at the form preview, use the source and if you still feel something not in place. Please share your feedback through comments.\u003C\u002Fp>\n",[6,9,12,15],{"id":7,"text":8},"view-source-https-github-com-amreddys-simple-contactus-tree-master","[**View Source**](https:\u002F\u002Fgithub.com\u002Famreddys\u002FSimple-ContactUs\u002Ftree\u002Fmaster)",{"id":10,"text":11},"form-preview-wp-content-uploads-2014-10-contactus-png-webp","[**Form preview**](\u002Fwp-content\u002Fuploads\u002F2014\u002F10\u002Fcontactus.png.webp)",{"id":13,"text":14},"the-mark-up","**The Mark Up**",{"id":16,"text":17},"the-coding-part","**The Coding Part**",1791316328265]