How to check if the form on my HTML landing page is working properly on Facebook & Instagram mobile apps?

Viewed 43

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.";
    }
}
?>
1 Answers

You can test that in Developer Mode present in google chrome.

Ctrl + Shift + I will open up developers tools then press Ctrl + Shift + M and this will open Device Toolbar where you can check your website for different resolutions and devices

Related