Phonegap contact form : How to send contact form message in html using phonegap

665 views Asked by At

Ive a HTML page and converted in phonegap it has a contact.html in contact form i have name mail-id and comments.And i want all the three fields to be mailed into my Mail-id . how to achieve this.

My Php page is in some free webhosting site like http://www.kishorebt.net84.net/contact-form-handler.php so whenever i click send i get the php code in my browser.

My page in not running in server so how to achieve this.

My html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>

<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>
</head> 
</head>

<body>
<h1>Contact us</h1>
<form method="POST" name="contactform" action="http://www.kishorebt.net84.net/contact-form-handler.php"> 
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit"><br>
</form>

<script language="JavaScript">

var frmvalidator  = new Validator("contactform");
frmvalidator.addValidation("name","req","Please provide your name"); 
frmvalidator.addValidation("email","req","Please provide your email"); 
frmvalidator.addValidation("email","email","Please enter a valid email address"); 
</script>
</body>
</html>

and my php page

<?php 
$errors = '';
$myemail = '[email protected]';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
    $to = $myemail; 
    $email_subject = "Contact form submission: $name";
    $email_body = "You have received a new message. ".
    " Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message"; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    header('Location: contact-form-thank-you.html');
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Contact form handler</title>
</head>

<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>


</body>
</html>
1

There are 1 answers

2
AudioBubble On

@kishore, this is a good example CGI to turn into an App. Start by converting your HTML4 to HTML5. You can use my generic boilerplate to get started. There are three (3) big differences to note.

The new opening element for html5 is:

<!DOCTYPE html>

The next most important element is

<meta name="viewport" content="width=device-width">

The third is the listener. Many beginners trip on this part. It is important for this listener to be added. It allows the phonegap library to prepare all the devices on the phone before you call any of the libraries.

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
//
function onDeviceReady() {

If however, you are not going to use the devices, you should at least have a <body onload=loaded()>

I suspect you have more questions. If so, there are two other forums to ask questions in.