Thread: Contact form
View Single Post
05-02-2013, 07:50 PM
#8
david_of_makurl is offline david_of_makurl
Status: I'm new around here
Join date: May 2013
Location: cleveland, Ohio, America
Expertise: programming/design
Software: notepad,microsoft paint
 
Posts: 14
iTrader: 0 / 0%
 

david_of_makurl is on a distinguished road

  Old  sample script

a contact form with ([input validation]-> check to see if what the user inputs is credible contact information i.e email with @ and .com, or not a blank message) can be implemented in three part using html, javascript/jquery and php will handle the sending of the mail.

requires the jquery library which can be downloaded from the jquery site.


javascript/jquery:
<script> // i usually put in the header of the html document
$(document).ready(function(){ // wait for the DOM to be fully loaded befor executing the function
$('.sendbutton').click(function(){ //when the sendbutton is clicked

var email = document.getElementById('email'); get the value of the element with an id of email
var name = document.getElementById('name'); get the value of the element with an id of name
var message = document.getElementById('message'); get the value of the element with an id of message

var at = email.indexOf("@"); // checks if the symbol @ is in the email string *note returns -1 if the symbol is not found
var dot = email.indexOf("."); // checks if the symbol . is in the email string
*note returns -1 if the symbol is not found
if(email != ' ' && (at != -1) && (dot != -1) ){ // proceede only if it is valid email address i.e contains @ and a . plus given the user entered an email
if(name != ' '){ // if the name is not left black
if(message != ' '){ // if the message is not left black
$.post('phpfile.php', {email:email,name:name,message:message},function(d ata){ //use jquery post to submit the data to the php file
alert(data); // alerts the output of the php file
document.getElementById('email') = ' '; // clear the current email value
document.getElementById('name') = ' '; // clear the current name value
document.getElementById('message') = ' '; //clear the current message value
});
}else alert("enter a message");// if there is a blank message value alert the user to enter a message
}else alert("enter a name"); // if there is a blank name alert the user to enter a name
}else alert("invalid email"); // if there is an invalid email, alert the user to enter an email

});//closing the click event
}); // closing the document.ready (handler?)
</script>

php: //the php section
$email = $_POST['email']; // recieve the email by post
$name = $_POST['name']; // recieve the name by post
$message = $_POST['message']; // recieve the message by post

$headers = "From: ".$contactor; // the php mail function reaquires a header
$subject = "Email: ".$email; // a subject
$message = "MESSAGE HEADER\n"; // and a message *note the \n is user to (idrk allow for concatenation of another message block and the .= completes the concatenation
$message .= $message;

if(mail("youremailaddresshere@emailprovider.com",$ subject,$message,$headers)){ // calls the php mail function to send the message to any email address you specify
echo "success"; // if the message is sent display success
}else{ echo "message not sent"; // if there is an error | display message not sent | note an error may be caused by not having your php mail function enable, ports not being set | lots of things which can be handled by searching on google or more specifically stackoverflow

}
html: // html section
<table><tr><td> // create a table present the form elements nicely
<input type='text' id='email' value='' /> // input element to get the user's email * note the lack of an actual form (element?) because jquery will handle the form submit
</td></tr><tr><td>
<input type='text' id='name' value='' /> // input text element for name
</td></tr><tr><td>
<textarea id='message' rows='20' cols='5'>message...</textarea>// note document.getElementBy id may not work with textarea so you may have to use an input element instead
</td></tr><tr><td>
<button id='sendbutton' type='button'>send</button> // button element to trigger the javascript click event to process the "form"
</td></tr>
</table>

Even though this may seem complicated if you are a beginner, it is
straightforward and if carried out exactly (making sure to download the required jquery library and if your mail function is correctly configured) it will produce a modern contact form * note you can use $('divelement').html("alert message here"); to display error messages to the user through the page instead of using the alert feature, it may integrate better with your page.* If this is not too much to process it would serve your inquiry adequately

Reply With Quote