I have added a form on HTML page which sends me an email after submission.
I want to make sure it works on ALL MOBILES, specially on the Facebook and Instagram mobile apps. I have checked it on my phone and I have used the chrome developer tool.
Is this the best way to have a form on HTML page? Or is there a better way?
The test page: https://www.zidan-dxb.com/test.html
HTML Code:
<form id="my_form2" onsubmit="submitForm2(); return false;">
<p><input class="form" id="n2" placeholder="Name" aria-label="Name" required></p>
<p><input class="form" id="e2" placeholder="Email Address" type="email" aria-label="Email"></p>
<p><input class="form" id="t2" placeholder="Phone" type="tel" aria-label="Phone" required></p>
<textarea class="form" id="m2" placeholder="Write your message here" aria-label="Message" rows="4"></textarea>
<p><input class="formbut" id="mybtn2" type="submit" value="Send"> <span id="status2"></span></p>
</form>
Javascript:
<script>
function _(id) {
return document.getElementById(id);
}
function submitForm2() {
_("mybtn2").disabled = true;
_("status2").innerHTML = 'please wait ...';
var formdata = new FormData();
formdata.append("n2", _("n2").value);
formdata.append("e2", _("e2").value);
formdata.append("t2", _("t2").value);
formdata.append("m2", _("m2").value);
var ajax = new XMLHttpRequest();
ajax.open("POST", "https://www.zidan-dxb.com/alfurjan/form2.php");
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
if (ajax.responseText == "success") {
_("my_form2").innerHTML = '<p>Thanks ' + _("n2").value + ', your message has been sent.</p>';
} else {
_("status2").innerHTML = ajax.responseText;
_("mybtn2").disabled = false;
}
}
}
ajax.send(formdata);
}
</script>
PHP:
<?php
if( isset($_POST['n2']) && isset($_POST['e2']) && isset($_POST['t2']) && isset($_POST['m2']) ){
$n2 = $_POST['n2']; // HINT: use preg_replace() to filter the data
$e2 = $_POST['e2'];
$t2 = $_POST['t2'];
$m2 = nl2br($_POST['m2']);
$to = "h@zidan-dxb.com";
$from = "z@zidan-dxb.com";
$subject = 'Contact Form Message alfurjan';
$message = '<b>Name:</b> '.$n2.' <br><b>Email:</b> '.$e2.' <br><b>Tell:</b> '.$t2.' <p>'.$m2.'</p>';
$headers = "From: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if( mail($to, $subject, $message, $headers) ){
echo "success";
} else {
echo "The server failed to send the message. Please try again later.";
}
}
?>