How to make a simple contact form using php

Overview:

You are going to learn how to  make a simple functional contact form in php; however, I will not be going into detail with the CSS.

HTML Markup

In order to begin you will need a  at least the basic html for the form. For this example we will be using the following markup:

<form>

<label>Name</label>                                                                             <input name=”name” placeholder=”Type Here”>

<label>Email</label>                                                                               <input name=”email” type=”email” placeholder=”Type Here”>

<label>Message</label>                                                                   <textarea name=”message” placeholder=”Type Here”></textarea>

<input id=”submit” name=”submit” type=”submit” value=”Submit”>

</form>

Next we will have to create our php file for this example I will name the file “form_contact.php” before we go any further in the code for this file we need to return to and edit our html.

Now we will need to define the action, method and name for our form. The action attribute specifies where to send the form-data when a form is submitted in this case we would put “form_contact.php” *Make sure that the action is spelt the same exact way as the name of your php file.The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute). The method attribute has two ways to send form-data (get,post), get is the default, appends the form-data to the URL in name/value pairs: (URL?name=value&name=value). Where post sends the form-data as an HTTP post transaction. We need to use post value. And finally we will give it at name of “contact_form”.  When you are done it will look something like this:

<form action="form_process.php"  method="post"name="contact_form">

 

Define PHP Variables

Finally, we can get started working on our php code. Insert the php tag which is we will input our code in place of the ellipsis(…). First we have to set our variables to do so we begin with a $ symbol followed by whatever name fits the input so we (the developer can understand what it is equal to. For example our first input is for the user’s name however you will see separate input boxes for first and last names so here are some of the possible variations you may or may not use:

  • $first_name
  • $last_name
  • $full_name
  • $name
  • $from

For my website I went for the $from variable name for the users full name. Now what you would do is set the variable equal to a $_POST array. $_POST is an array of variables passed to the current script via the HTTP POST method.  The array is the value we are giving the variable and that is the name we gave each input. Our first three variables should look like this:

$from = $_POST[‘name’];
$email = $_POST[’email’];

 

Required Variables

“$message” Defines the message to be sent but unlike “$to” and “$subject” we have to post it and use the name we gave the input within brackets and surrounded by single quotes (‘)

$message = $_POST[‘message’];


Also, we have to define what email we want the contact form to send to. Same as before we have to begin with $ but we call it “to” this time and make it equal to the email you want to access the form at – “$to”.

$to = “youremail@email.com”;


Add a “$subject” variable so you can know what the message is about or to know where or which contact form it came from

$subject = “New Message”;


 

Create a mail() Function

The mail() function allows you to send emails directly from a script. Mail function syntax: mail(to,subject,message,headers,parameters);

to: Required. Specifies the receiver / receivers of the email.                       subject: Required. Specifies the subject of the email.                                       message: Required. Defines the message to be sent.                                       headers: Optional. Specifies additional headers, like From, Cc, and Bcc.       parameters: Optional. Specifies an additional parameter to the sendmail program.

Instead of using the headers and parameters in our syntax we will use a concatenation to define the header of our message. we do this by writing a string “From: ” (be sure to include a space after the 🙂 and then adding a period to add our $from variable to the concatenation.  Our function should look like this:

mail ($to, $subject, $message, “From: ” . $from);

After the mail function you can add an echo to display whatever you want but I went with “Your Message has been Sent”.

Your php should look somewhat like this:

<?php
$from = $_POST[‘name’];
$email = $_POST[’email’];
$message = $_POST[‘message’];
$to = “youremail@email.com”;
$subject = “New Message”;

mail ($to, $subject, $message, “From: ” . $from);
echo “Your Message has been Sent.”;

Congratulations you have completed your php form.

Here is a helpful video that goes over what we covered – How to Make a HTML Contact Form with PHP courtesy of our very own Leslie Smith. For more information on php forms and php validation I encourage you to read up more on it at tangledindesign.com , and 1stwebdesigner.com. If you want to read up on forms that use javascript check out these links: formget.com, and onextrapixel.com.

P.S.                                                                                                                                                                                           The PHP we just completed will open a new page with our echo message I really don’t like how that looks, so when I find out how to make a pop out window I will update this post with that how to.

Advertisements

Presentation on JavaScript lesson 1

The Code Cabinet

Click on the Image to view

Click Link to visit Google Docs Power-Point on JavaScript

 Majority of the things that I have gone through are in this video! Practice Makes permanent ! The more you get into JavaScript , the easier it will be to learn other languages

Screenshot 2015-10-28 at 6.03.44 PM

Extra: If you had any difficulties with anything , check out the videos below

Based on the Titles of the Video , click the image to watch the video you would like to
watch

Screenshot 2015-10-28 at 6.14.40 PM

Screenshot 2015-10-28 at 6.14.16 PM

Screenshot 2015-10-28 at 6.15.16 PM

Screenshot 2015-10-28 at 6.15.41 PM

Screenshot 2015-10-28 at 6.15.58 PM

                                     Quiz

 thinkingcapwhoa_color

Put your thinking caps on , cause its quiz time! Before you take the quiz , review the Google Slides Presentation. If you feel confident then you’re ready to go !

pop-quiz

Click the image of the Girl to take your quiz , GOOD LUCK 😀

View original post

Learning HTML

The Code Cabinet

Hello World!

Today I decided to post about HTML which stands for Hyper Text Markup Language.

What is this language used for?                                                                                                                                                  Basically , HTML is a language used to create web pages. The web browser can read the HTML files and transfer them to visible web pages. It describes the structure of the website , along with presentation. The language consists of tags which is written in the form of HTML Elements 

View original post 1,218 more words

Web 2.0/ 3.0 Exploring the Web

Who first used the phrase “Web 2.0” in the first place?

The term was popularized by Tim O’Reilly and Dale Dougherty at the O’Reilly Media Web 2.0 Conference in late 2004, though it was first coined by Darcy DiNucci in 1999.

What is the difference between Web 1.0, 2.0, 3.0?

 Web 1.0 can be described as the “Limited” phase of the Web. There was only limited interaction between sites and web users via  flat data such as links (to find related content) and email. It served as an information portal where users passively receive information without being given the opportunity to post reviews, comments, and feedback.

Web 2.0 was the “Social” phase of the Web with interactive data. Web 2.0 facilitates interaction between web users and sites, so it allows users to interact more freely with each other encouraging participation, collaboration, and information sharing

Web 3.0 is the “Semantic” phase of Word Wide Web with dynamic applications, interactive services, and “machine-to-machine” interaction. In Web 3.0, computers can interpret information like humans and intelligently generate and distribute useful content tailored to the needs of users.

Elements of Web 2.0

  • Wikis: Websites that enable users to contribute, collaborate and edit site content. Wikipedia is one of the oldest and best-known wiki-based sites.
  • Nomadicity:  or mobile computing, is the trend of users connecting from wherever they may be. That trend is enabled by the proliferation of smartphones, tablets and other mobile devices in conjunction with readily accessible Wi-Fi networks.
  • Mash-ups: Web pages or applications that integrate complementary elements from two or more sources.

Web 2.0 controversy

Critics of Web 2.0 maintain that it makes it too easy for the average person to affect online content i.e. Wikipedia, which can impact the credibility, ethics and even legality of web content. The extent of data sharing and gathering also raises concerns about privacy and security. Defenders of Web 2.0 point out that these problems have existed ever since the infancy of the medium and that the alternative — widespread censorship based on ill-defined elitism — would be far worse. The final judgment concerning any web content, say the defenders, should be made by end users alone. Web 2.0 reflects evolution in that direction.

The most recent dispute revolving around these issues came about in the form known as the Stop Online Piracy Act  or (SOPA) was a United States bill introduced by U.S. Representative Lamar S. Smith (R-TX) to expand the ability of U.S. law enforcement to combat online copyright infringement and online trafficking in counterfeit goods.

The proposed SOPA law would have targeted websites that let you share stuff—Twitter lets you share links, Facebook photos, YouTube videos, Tumblr cute cat pictures, WordPress anything you want. The copyright folks, led by their lobbyists at MPAA and Comcast NBC, wanted to impose obligations on all these companies that forced them to monitor, edit, and filter content, really screwing up or killing many sites that have acted as platforms for the free expression for the average person.

Protest Against SOPA, PIPA

On January 18, 2012, a series of coordinated protests occurred against two proposed laws in the United States Congress—the Stop Online Piracy Act (SOPA) and the PROTECT IP Act (PIPA). Protests were based on concerns that the bills, intended to provide more robust responses to copyright infringement (colloquially known as piracy) arising outside the United States, contained measures that could cause great harm to online freedom of speech, websites, and Internet communities. Protesters also argued that there were insufficient safeguards in place to protect sites based upon user-generated content.

The move to a formal protest was initiated when some websites, including Reddit and the English Wikipedia, considered temporarily closing their content and redirecting users to a message opposing the proposed legislation. Others, such as Google, Mozilla, and Flickr, soon featured protests against the acts. Some shut completely, while others kept some or all of their content accessible. According to protest organizer Fight for the Future, over 115,000 websites joined the internet protest.In addition to the online protests, there were simultaneous physical demonstrations in several U.S. cities, including New York City, San Francisco and Seattle, and separately during December 2011 a mass boycott of then–supporter Go Daddy. The protests were reported globally.

1422921483066444

By January 20, 2012, the political environment regarding both bills had shifted significantly. The bills were removed from further voting, likely to be revised to take into consideration the issues raised. Opposers noted the bills had been “indefinitely postponed” but cautioned they were “not dead” and “would return”.

An unfortunate possibility.

images-1

Wikipedia.org

Sources:

Forbes: On Net Nutrality

Forbes: Ten Reasons The Net Neutrality Victory Is Bigger Than The SOPA Win

Wikipedia: Protests against SOPA and PIPA

Techfreedom.org

Wired.com