{"id":11654,"date":"2011-04-05T17:58:00","date_gmt":"2011-04-05T16:58:00","guid":{"rendered":"http:\/\/rinf.com\/alt-news\/?p=11654"},"modified":"2014-02-25T12:47:35","modified_gmt":"2014-02-25T12:47:35","slug":"learn-beast-contact-form-building-skills","status":"publish","type":"post","link":"http:\/\/rinf.com\/alt-news\/webmasters\/learn-beast-contact-form-building-skills\/","title":{"rendered":"Uber Contact Form Building Skills"},"content":{"rendered":"

by Joe Burnett<\/a><\/p>\n

\"\"<\/a>I\u2019ve learned about blogs and websites and found that all successful ones have a simple way to contact the owner, creator, programmer, or writer. Doesn\u2019t that mean that you need to start a contact page too? When I first started programming I did know all of the rules and functions, but I didn\u2019t understand how to pull it all together and make a nice tasty script. That is exactly where almost everyone goes wrong!<\/p>\n

            The first step in creating a contact form is the actual form. The form is of course going to be all html. Before you start you need to open the form tag and then close the form tag.<\/p>\n

\n

<form action=\u201dmail.php\u201d method=\u201dPOST\u201d><\/p>\n

<\/form>\n<\/p><\/blockquote>\n

Alright, simple but I\u2019ll go over it. When you open a form tag it can contain different attributes that describe the form and instruct it what to do. We added two attributes. Our two attributes are action and method. Action: The page the form will send the information to. Method: The type of process the form uses to send information to the action page. Either POST or GET. GET shows up in the url while POST doesn\u2019t show up the url. Last we added the closing tag of the form. It is basic and contains no attributes.<\/p>\n

Not done yet, we still need to provide the input fields which will allow the user to insert information such as name, email, website, message, etc. With the name input field what do you think the html tag name will be? Input! I\u2019m going to build a form with the options to put a name, email, and message; perfect for the average contact form!<\/p>\n

\n

<form action=\u201dmail.php\u201d method=\u201dPOST\u201d><\/p>\n

Name: <input type=\u201dtext\u201d name=\u201dname\u201d> <\/br><\/p>\n

Email: <input type=\u201dtext\u201d name=\u201demail\u201d> <\/br><\/p>\n

Message: <textarea cols=\u201d45\u201d rows=\u201d3\u201d name=\u201dmessage\u201d><\/textarea> <\/br><\/p>\n

<\/form>\n<\/p><\/blockquote>\n

Looks like a lot, so I\u2019ll go easy. Alright, I color-coded the html for you so you can understand this without any confusion. Seriously. Yellow is what we already had down (The form tag). Red are the input tags I added. Purple is the huge textarea box I added for the message. Last Green is the basic br tag that forces the html page to move to the next line before outputting anything else.<\/p>\n

The first input tag is going to be the name text box. Before the actual input tag is the text, \u201cName:\u201d; Name: gets outputted before the text box.  After that we have some basic attributes inside the input tag. These attributes are type and name. Type: This is the type of user input data; it can be a text box, check box, radio box, file browse, and more. Name: Identifies the data that the user gave. Both name and email text boxes have the same type, but different names.<\/p>\n

I thought we were doing input tags not textarea tags. A textarea tag is a special type of input. It can be called a text box. What\u2019s the difference? A text box contains rows of available input data instead of one basic line. The text area adds a scroll bar to the edge of the text box for more user control.<\/p>\n

The message again is a textarea text box. Its attributes are cols otherwise known as columns, rows, and name. Cols: exact amount of characters that can fit in the text boxes width. We gave columns a value of 45, rows a value of 3, and name a value of message. Hurray we are complete with the entire html form. Now let\u2019s get down and dirty to work on some PHP code.<\/p>\n

Before you do this I\u2019d check to make sure your web host supports PHP. Some web hosts don\u2019t allow any of their web sites to use PHP. After you check to see if you have PHP check and see if you have a good supply of SMTP. SMTP: Simple Mail Transfer Protocol This will send emails to you alerting someone has contacted you. Ready to begin?<\/p>\n

\n

<?php<\/p>\n

$Name = $_POST[\u2018name\u2019];<\/p>\n

$Email = $_POST[\u2018email\u2019];<\/p>\n

$Message = $_POST[\u2018message\u2019];<\/p>\n

?>\n<\/p><\/blockquote>\n

Code, Code, Code you\u2019ll see a lot of it. I hope this registers your brain. Remember our action attribute in the form tag? This PHP page, send.php is where you will add this code. If you haven\u2019t learned any PHP <?php and ?> are the opening and closing tags. I hope you remember the name attribute in each of our input values name, email, and message. Here we are creating shorter PHP variables to hold the information the user gave us. If it doesn\u2019t register in your head just bare with us.<\/p>\n

\n

<?php<\/p>\n

If(isset($_POST[\u2018name\u2019]) && isset($_POST[\u2018email\u2019]) && isset($_POST[\u2018message\u2019]))<\/p>\n

{<\/p>\n

$Name = $_POST[\u2018name\u2019];<\/p>\n

$Email = $_POST[\u2018email\u2019];<\/p>\n

$Message = $_POST[\u2018message\u2019];<\/p>\n

}<\/p>\n

?>\n<\/p><\/blockquote>\n

I added an if statement. The if statement involves using the PHP function isset() and PHP\u2019s && sign. The isset() function is pretty simple it does what it says. Isset() tells me and you if something exists. The && is just a way of telling PHP and. So in English our if statement really says, \u201cif name and email and message exist then do this below.\u201d Neat, huh?<\/p>\n

\n

<?php<\/p>\n

If(isset($_POST[\u2018name\u2019]) && isset($_POST[\u2018email\u2019]) && isset($_POST[\u2018message\u2019]))<\/p>\n

{<\/p>\n

$Name = $_POST[\u2018name\u2019];<\/p>\n

$Email = $_POST[\u2018email\u2019];<\/p>\n

$Message = $_POST[\u2018message\u2019];<\/p>\n

Mail(\u201cyouremail@email.com\u201d,\u201dContact Form Submission\u201d,\u201dName: $Name Email: $Email Message: $Message\u201d,\u201dFrom: Your Name Or Email\u201d);<\/p>\n

}<\/p>\n

?>\n<\/p><\/blockquote>\n

Finally we are done! Your PHP script will work successfully! But what did I add? To alert you that somebody contacted you through your contact form we need to email you. One way to email you would be to use the PHP mail function. The PHP mail function has four availabilities for you to add data. The first is your email so replace youremail@email.com with your actual email ie: john34@gmail.com. Next is the subject. The current subject is Contact Form Submission. After that is the message which will tell you everything you need to know about the person trying to contact you. Last is who it\u2019s from. Just put your email or your name.<\/p>\n

What happens next? He clicks submit and bang a blank white page shows up. What happened? Was it a success? When will they contact me back? Now let\u2019s do something that will help the user understand what happened. Let\u2019s make PHP say something if it works, and say something bad if it fails.<\/p>\n

\n

<?php<\/p>\n

If(isset($_POST[\u2018name\u2019]) && isset($_POST[\u2018email\u2019]) && isset($_POST[\u2018message\u2019]))<\/p>\n

{<\/p>\n

$Name = $_POST[\u2018name\u2019];<\/p>\n

$Email = $_POST[\u2018email\u2019];<\/p>\n

$Message = $_POST[\u2018message\u2019];<\/p>\n

If(Mail(\u201cyouremail@email.com\u201d,\u201dContact Form Submission\u201d,\u201dName: $Name Email: $Email Message: $Message\u201d,\u201dFrom: Your Name Or Email\u201d))<\/p>\n

{<\/p>\n

Echo \u201cYour message has been sent I will respond within twenty four hours.\u201d;<\/p>\n

}<\/p>\n

}<\/p>\n

Else<\/p>\n

{<\/p>\n

Die(\u201cError! You missed one of the required fields. Try again.\u201d);<\/p>\n

}<\/p>\n

?>\n<\/p><\/blockquote>\n

Now with that programmed PHP will say, \u201cError! You missed one of the required fields. Try again.\u201d Only if the mail function was a complete fail, or the user didn\u2019t fill in one of the required fields. If PHP did have success sending the e-mail, PHP will say, \u201cYour message has been sent. I will respond within twenty four hours.\u201d Good luck!<\/p>\n

Q: <\/b>What if I don\u2019t have PHP or SMTP. A:<\/b> You can switch web hosts that allow both, or just go to another web host, probably free and build a random site. After that, create the PHP page. Once the PHP page is complete, change your html form\u2019s action attribute to point to that exact page. <\/p>\n

Web Programming 101<\/a> is my blog all about web design and web development. I can teach you anything and will help you enjoy learning. I hope you liked my article, and I would love to connect with you on Twitter @WebProgramming1<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

by Joe Burnett<\/a>
\nI\u00e2\u20ac\u2122ve learned about blogs and websites and found that all successful ones have a simple way to contact the owner, creator, programmer, or writer. Doesn\u00e2\u20ac\u2122t that mean that you need to…<\/p>\n","protected":false},"author":1213,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[518],"tags":[460],"class_list":{"0":"post-11654","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-webmasters","7":"tag-design-development"},"_links":{"self":[{"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/posts\/11654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/users\/1213"}],"replies":[{"embeddable":true,"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/comments?post=11654"}],"version-history":[{"count":0,"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/posts\/11654\/revisions"}],"wp:attachment":[{"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/media?parent=11654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/categories?post=11654"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rinf.com\/alt-news\/wp-json\/wp\/v2\/tags?post=11654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}