I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong?
On iPad, the modal is positioned to the right and down the page instead of in the center.
When a user selects a form field, the cursor appears outside the modal window.
Text input in a field is not visible until the next field is selected.
The layout breaks only on Safari when viewed on Apple devices, everything else seems to be working well on other browsers like IE and Chrome.
You can view the page here:
There are various elements on the page such as validation, modals, maps, and tabs. I suspect there might be a conflict somewhere due to my limited experience in web programming (2nd year degree student). Any assistance would be greatly appreciated. Thank you. Roy
<!DOCTYPE HTML>
<html>
...
<body>
<div class="container fill">
...
</div>
...
</body>
</html>
PHP:
<?php
if(isset($_POST['inputEmail'])) {
$email_to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7f9f4fdd5f7f9f4fdf7f9f4fdf7f9f4fdbbfbf0e1">[email protected]</a>";
$email_subject = "Customer Enquiry";
function died($error) {
...
}
if(!isset($_POST['inputName']) ||
!isset($_POST['inputPhone']) ||
!isset($_POST['inputEmail']) ||
!isset($_POST['inputMessage'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['inputName'];
...
// create email headers
$headers = 'From: '.$inputEmail."\r\n".
'Reply-To: '.$inputEmail."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">";
echo "<script>alert('Thankyou your message was sent successfully.'); </script> ";
}
?>