Bootstrap modular contact form issues
I am having problems with the modal contact form with the loading module, everything seems to work as planned in all browsers except iPad / safari, can anyone shed some light on where I am going wrong?
-
When viewed on an iPad, the modal shifts to the right and moves down the page, not sitting in the middle where it should be.
-
When the user selects a field on the form, the cursor is not in the field itself; it is outside the modal window, flashing in greyed out.
-
When the user enters text into a field, the text is not displayed in the field until the next field is selected, the text appears.
As I said, everything works fine in IE and Chrome, these problems only occur with safari. Something is breaking my layout when viewed with an Apple device.
The page can be viewed at http://odds-uk.co.uk/abbeystone/contact.php
There are quite a few events on the page with validation, modals, maps and tabs, etc., so I'm wondering if I have a conflict somewhere, I'm pretty new to web programming (2nd year student), so, please forgive any silly mistakes, I hope someone can help as I am currently choking on ideas. Thank you in advance. Roy
<!DOCTYPE HTML>
<html>
<head>
<!-- Include Google map API link -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDe94CcWCoY8mk1niRhZLBNc5bxst5CZNg"></script>
<!--<meta name="description" http-equiv="Content-Type" content="text/html;">-->
<!-- Website Title & Description for Search Engine purposes -->
<title>Contact Property Management</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">-->
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<script>
var Maldon = new google.maps.LatLng(51.731897, 0.677035);
function initializeMaldon()
{
var mapProp1 = {
center:Maldon,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp1);
var marker1=new google.maps.Marker({
position:Maldon,
animation:google.maps.Animation.BOUNCE
});
marker1.setMap(map1);
var infowindow1 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow1.open(map1,marker1);
}
google.maps.event.addDomListener(window, 'load', initializeMaldon);
/*The following map wouldnt show properly within hidden Tab so set a timer on it
www.w3schools.com/js/js_timing.asp
www.stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture*/
var refreshIntervalId;
function showMap() {
document.getElementById('googleMap2').style.display = '';
refreshIntervalId = setInterval(function () { updateMapTimer() }, 10);
}
function updateMapTimer() {
clearInterval(refreshIntervalId);
var Norwich = new google.maps.LatLng(52.627970, 1.298478);
var mapProp2 = {
center:Norwich,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map2=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var marker2=new google.maps.Marker({
position:Norwich,
animation:google.maps.Animation.BOUNCE
});
marker2.setMap(map2);
var infowindow2 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow2.open(map2,marker2);
}
</script>
</head>
<body>
<div class="container fill">
<?php include 'header.php';?>
<div class="carousel slide" id="myCarousel">
<div class='LogoOverlay'>
<div class="">
<div class="LogoImage"><img src="images/homepage/OmbudsmanLogo.png" alt="Ombudsman Service Logo"></div>
<div class="LogoImage"><img src="images/homepage/ARMA-logo.jpg" alt="ARMA Logo"></div>
<div class="LogoImage"><img src="images/homepage/FedOfMastBuildLogo.gif" alt="Fed. of Master Builders Logo"></div>
</div>
</div>
<div class="carousel-inner">
<div class="active item">
<div class="fill" style='background-image: url("images/homepage/home2.jpg");'>
<div class="container">
<div class="row nomargin">
<div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 contFrame">
<div class="row " id="ContactDiv">
<ul class="nav nav-tabs " id="myTab">
<li class="active"><a href="#tab1" data-toggle="tab">Head Office</a></li>
<li><a href="#tab2" onclick="showMap()" data-toggle="tab">Norwich Branch</a></li>
</ul>
<div class="tab-content my-tab">
<div class="tab-pane active" id="tab1">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr />
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b>01621 842711</b></h4>
<hr />
<div class="container">
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<form id="messageMaldon" class="form-horizontal"method="POST" action="send_form_email.php">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control required" name="inputName" id="inputName" placeholder="Name" value="" type="text" title="Please enter your Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control required email" name="inputEmail" id="inputEmail" placeholder="Email" value="" type="text" title="Please enter a valid Email address">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control required number" name="inputPhone" id="inputPhone" placeholder="Phone" value="" type="text" title="Please enter your Phone Number using numbers only">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control required" name="inputMessage" id="inputMessage" placeholder="Message" rows="6"></textarea>
<!--<button class="btn btn-success pull-right" type="submit" value="submit">Send!</button>-->
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" value="Submit" class="btn btn-success pull-right" >Send</button>
</div>
</div>
</form>
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap1"></div>
</div>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr>
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b></b></h4>
<hr>
<div class="container">
<a href="#myModal" role="button" class="btn btn-custom " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<!-- <form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="email">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control" id="inputPhone" placeholder="Phone" type="phone">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="6"></textarea>
<button class="btn btn-success pull-right" type="submit">Send!</button>
</div>
</div>
</form>-->
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap2"></div>
</div>
</div><!-- end tab-pane -->
</div><!-- end tab-content -->
</div><!--end ContactDiv-->
</div>
<!--end col-xs-10 col-xs-offset-1-->
</div><!--end row-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php';?>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="includes/js/jquery-2.1.1.min.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-2.1.1.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<!-- jQuery validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('#messageMaldon').validate();
}); // end ready
</script>
</body>
</html>
PHP:
<?php
if(isset($_POST['inputEmail'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "blah@blahblahblah.net";
$email_subject = "Customer Enquiry";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
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']; // required
$inputPhone = $_POST['inputPhone']; // required
$inputEmail = $_POST['inputEmail']; // required
$inputMessage = $_POST['inputMessage']; // required
$error_message = "";
$string_exp = "/^[A-Za-z\s.'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
$num_exp = "/^[0-9\s.'-]+$/";
if(!preg_match($num_exp,$inputPhone)) {
$error_message .= 'The Number you entered does not appear to be valid.<br />';
}
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
if(strlen($inputMessage) < 2) {
$error_message .= 'The Message you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Message sent via Contact page on Abbeystone Website.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Phone: ".clean_string($inputPhone)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Message: ".clean_string($inputMessage)."\n";
// 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);
//sleep(3);
echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">";
echo "<script>alert('Thankyou your message was sent successfully.'); </script> ";
}
?>
+3
source to share
1 answer
It looks to me like this is positioning within the html markup of the #myModal element causing safari to display the modality as if it were a child element (as is the case with how you positioned it).
From Download Documentation :
Placing modal markup
Always try to place modal HTML at the top-level position in your document so that other components do not affect the look and / or functionality.
Also the way that the modal render in chrome doesn't seem to be perfect, or it appears below the header and footer elements, but rather that it sits on top of all page elements (but since it is centered it is less noticeable).
To fix the problem, change the modal div and its content after the trigger button before the </body>
close tag :
Broken markup (current)
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message
</a>
//reposition as below to fix
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
Fixed layout
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
</body>
+1
source to share