I have an onepage website with a form that submits user data by mail using PHP. When the user click on Submit, I need to open an overlay that contains a success message. The problem is that, when the form is submitted and the page refreshed, my overlay automatically desappear and the user does not have the necessary time to close it by himself. Could you help me with this topic?
Thank you!
Here is my form:
<form id="contact-us" method="post" action="#" >
<div class="col-xs-6 wow animated slideInLeft" data-wow-delay=".5s">
<!-- Name -->
<input type="text" name="name" id="name" required class="form" placeholder="Nombre" />
<!-- Email -->
<input type="email" name="mail" id="mail" required class="form" placeholder="E-mail" />
<!-- Subject -->
<input type="text" name="subject" id="subject" required class="form" placeholder="Asunto" />
</div><!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-xs-6 wow animated slideInRight" data-wow-delay=".5s">
<!-- Message -->
<textarea name="message" id="message" class="form textarea" required placeholder="Mensaje"></textarea>
</div><!-- End Right Inputs -->
<!-- Bottom Submit -->
<div class="relative fullwidth col-xs-12">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold" onclick="openNav14()">Enviar</button>
</div><!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
Here are my functions:
function openNav14() {
document.getElementById("myNav14").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav14() {
document.getElementById("myNav14").style.width = "0%";
}
Related
I'm trying to send a mail from a html page using the below:
<script>
function sendMail() {
var link = "mailto:email#live.co.uk &subject=" + encodeURIComponent(document.getElementById('myText').value)
+ "&body=" + encodeURIComponent(document.getElementById('myText2').value)
;
window.location.href = link;
}
</script>
<!-- Contact Form -->
<div class="col-md-6 contact">
<form role="form">
<!-- Name -->
<div class="row">
<div class="col-md-6">
<!-- E-Mail -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Your name" id="myText">
</div>
</div>
<div class="col-md-6">
<!-- Phone Number -->
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<!-- Message Area -->
<div class="form-group">
<textarea class="form-control" placeholder="Write you message here..." style="height:232px;" id="myText2"></textarea>
</div>
<!-- Subtmit Button -->
<button type="submit" class="btn btn-send" onclick="sendMail(); return false">
Send message
</button>
</form>
</div>
When I press button to click all of the data ends up in the default mail apps "To:" Text input area. Can anyone tell me how to split out the subject and body correctly?? I'd like these to go into the subject and body sections of the email by default.
Your query string variables should start with "?", not "&".
var link = "mailto:email#live.co.uk?subject=" + encodeURIComponent(document.getElementById('myText').value)
+ "&body=" + encodeURIComponent(document.getElementById('myText2').value)
;
I am using the bootstrap version 4. Index.php includes the below contact form. I want users to see the validation messages when they click submit to draw their attention to the required fields they have missed. For example, when a user hits submit without filling any field, the user sees the below, which is the behavior I want to achieve, and I currently have:
[please note that to save space in this post, all images can be shown by clicking on run code snippet]
<img src="https://i.stack.imgur.com/h1KwJ.png" width="50%" height="50%" />
The contact form: Index.php
<!DOCTYPE HTML>
<html>
<head>
<title>Contact form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class ="container">
<div class="col-lg-6 push-lg-3">
<h1> Contact us</h1>
<p>Fill out the below form to contact us</p>
<form id="contactForm" class="contact-form needs-validation" action="form.php" method="POST" novalidate>
<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
<strong>Success!</strong> Your message has been sent to us.
</div>
<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
<strong>Error!</strong> There was an error sending your message.
<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="name" class="required font-weight-bold text-dark">Full Name</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
</div>
<div class="form-group col-lg-6">
<label class="required font-weight-bold text-dark">Email Address</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="font-weight-bold text-dark">Phone</label>
<input type="text" value="" data-msg-required="Please enter the phone number." maxlength="100" class="form-control" name="phone" id="phone" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="required font-weight-bold text-dark">Message</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<div class="g-recaptcha" data-sitekey="Your_Public_Key"></div>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/view.contact.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else {
$("#submit-btn .text").text("Enviado");
$("#submit-btn").addClass("active");
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
$("#contactForm").validate();
</script>
</body>
</html>
The issue
I have the issue that when the user hits submits, everything goes as planned, and the form refreshes, and the success message appears, but the form refreshes with validation showing red boxes, which is the problem I want to solve. This is how a successful form submission currently looks like and this is incorrect:
<img src="https://i.stack.imgur.com/eV7A6.png" width="50%" height="50%" />
When the user hits submit, I want the user to see the success message; I want the form to refresh without green or red boxes to the input fields. To better understand this, please have a look at the below behavior I want to achieve:
<img src="https://i.stack.imgur.com/0Yf01.png" width="50%" height="50%" />
I know that the issue is in the JavaScript for disabling form submissions (above) or in the view.contact.js:
I appreciate any insights or guidance about how I can fix this.
One more question I have is this: Will I need the below code?
<script>
$("#contactForm").validate();
</script>
Any comment on how to make this code better is highly appreciated.
From the official documentacion:
To reset the appearance of the form (for instance, in the case of
dynamic form submissions using AJAX), remove the .was-validated class
from the again after submission.
Bootstrap > Form > Validation > How it Works
In your case, you need to add the following line:
$form.removeClass('was-validated');
Inside:
$.ajax({...})
.done(function() {
//HERE
),
.always({...});
I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.
You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.
I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!
I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?
I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!