Pop-up Form Success Message
Question
We have a salesforce form built into a very basic pop up, we want to display a success message upon the submission. Right now it closes the pop up and refreshes the page. Please be patient with me and any help would be great.
EDIT: I am not looking to just use an alert. I would like the success message to appear in the original popup that the form is located.
This is what I have:
<?php
$firstname_status = '';
$lastname_status = '';
$email_status = '';
$phone_status = '';
// If form submits then check form post values.
// Based on proper field validation do curl post to specific location or display proper message
echo $_POST['post_url'];
if($_POST && isset($_POST['post_url']{0}))
{
if (
isset($_POST['email']{0}) &&
filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) &&
isset($_POST['first_name']{0}) &&
trim($_POST['first_name']) != '' &&
isset($_POST['last_name']{0}) &&
trim($_POST['last_name']) != '' &&
(trim($_POST['phone']) == '' || (is_numeric($_POST['phone']) && in_array(strlen($_POST['phone']), array(9,10,12,14))) || preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true || preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true)
)
{
// Remove all characters from phone field to make it an integer value
$_POST['phone'] = preg_replace('/[^0-9]/', '', $_POST['phone']);
// Call function post_to_url to post form values through curl
$return = post_to_url($_POST['post_url'], $_POST);
}
else
{
// Check if first name is not blank or set proper error message
if(!isset($_POST['first_name']{0}) || trim($_POST['first_name']) == '')
{
$_POST['first_name'] = '';
$firstname_status = '<label id="first_name-error" class="error" for="first_name">Please enter your first name</label>';
}
// Check if last name is not blank or set proper error message
if(!isset($_POST['last_name']{0}) || trim($_POST['last_name']) == '')
{
$_POST['last_name'] = '';
$lastname_status = '<label id="last_name-error" class="error" for="last_name" style="display: inline;">Please enter your last name</label>';
}
// Check if email is not blank and proper email format or set proper error message
if(!isset($_POST['email']{0}) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
{
$email_status = '<label id="email-error" class="error" for="email" style="display: inline;">Please enter a valid email address</label>';
}
// Check if phone is not blank then check phone numver format (integer / xxx-xxx-xxx / (xxx) xxx-xxxx) validation
if(isset($_POST['phone']{0}) && (!is_numeric($_POST['phone']) || !in_array(strlen($_POST['phone']), array(9,10,12,14))) && preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false && preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false)
{
$phone_status = '<label style="display: inline;" for="phone" class="error" id="phone-error">Please enter valid phone number</label>';
}
}
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.js"></script>
<script src="../jquery.validate.js"></script>
<script>
// Custom method to check phone number format
$.validator.addMethod('customphone', function (value, element) {
if(value != '')
{
return this.optional(element) || (/^[0-9]+$/.test(value) && value.length == 10)|| /^\d{3}-\d{3}-\d{4}$/.test(value) || /^\(\d{3}\) \d{3}-\d{4}$/.test(value);
}
else
return true;
}, "Please enter a valid phone number");
$().ready(function() {
$("#pop_up").validate({
rules: {
first_name: "required",
last_name: "required",
email: {
required: true,
email: true
},
phone: {
customphone : 'customphone',
required: false
}
},
messages: {
first_name: "Please enter your first name",
last_name: "Please enter your last name",
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
}
}
});
});
</script>
<form action="" method="POST" id="pop_up">
<input type=hidden name="oid" value="###############">
<div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div>
<div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div>
<div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div>
<div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div>
<div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div>
<input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID">
<input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer -->
<input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source">
<input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url">
</form>
POPUP
<script src="jquery-cookie.js"></script>
<script>
$(document).ready(function(){
// check to see if the cookie exists
var cookieExists = Cookies.get('showPopup');
// if the cookie does not exist, then step into here
if(!cookieExists) {
// set the cookie
Cookies.set('showPopup', 'true', { expires: 1 });
// fade in the popup
$("#overlay").delay(6000).fadeIn(600);
}
// this is an extra action that can be called any time
$(".close").click(function(){
$("#overlay").hide();
});
});
</script>
<article id="overlay" style="display: none;">
<section id="form">
<h3 class="gold">We’re here to help</h3>
<?php echo do_shortcode("[salesforce]"); ?>
<i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a>
</section>
</article>
$(document).ready(function(){ // fade in the popup $("#overlay").delay(6000).fadeIn(600); }) // this is an extra action that can be called any time $(".close").click(function(){ $("#overlay").hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://stacksnippets.net/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article id="overlay" style="display: none;"> <section id="form"> <h3 class="gold">We're here to help</h3> <form action="" method="POST" id="pop_up"> <input type=hidden name="oid" value="###############"> <div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div> <div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div> <div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div> <div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div> <div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div> <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID"> <input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer --> <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source"> <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url"> </form> <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a> </section> </article>
1 answers
solution1
0 ACCPTED 2017-02-01 23:54:04
Unfortunately jsfiddle, though generally great, doesn't appear to like form submissions, so this a temporary codepen demo . In principle this solution involves inserting jquery submit function before the validator to intercept submission action and apply success message before then resuming the action using the following code:
JS:
// fade in the popup
$("#overlay").fadeIn(1500);
// this is an extra action that can be called any time
$(".close").click(function() {
$("#overlay").hide();
});
$(window).load(function() {
var popup = $("form#pop_up");
popup.submit(function(event) {
var $this = $(this);
if (!$this.hasClass('paused')) { // check if it isn't in a pause state
event.preventDefault(); // prevent the submission
$this.addClass('paused'); // use this class as a flag
$("#overlay").append('SUCCESS!'); // add the success message
setTimeout(function() {
$("#overlay").append(' ...');
$(".form-button").trigger('click'); // mechanically trigger a second click
}, 2000); // define a delay
}
})
popup.validate({
rules: {
first_name: "required",
last_name: "required",
email: {
required: true,
email: true
},
phone: {
customphone: 'customphone',
required: false
}
},
messages: {
first_name: "Please enter your first name",
last_name: "Please enter your last name",
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
}
},
success: function(event) {
// alert('success message');
// do other things for a valid form
},
submitHandler: function(form, event) {
// do other things for a valid form
}
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://validatejs.org/validate.min.js"></script>
<article id="overlay" style="display: none;">
<section id="form">
<h3 class="gold">We’re here to help</h3>
<form action="" method="POST" id="pop_up">
<input type=hidden name="oid" value="###############">
<div class="field-wrap text-wrap label-above">
<label for="first_name">First Name</label>
<?=$firstname_status;?>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" />
</div>
<div class="field-wrap text-wrap label-above">
<label for="last_name">Last Name</label>
<?=$lastname_status;?>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" />
</div>
<div class="field-wrap text-wrap label-above">
<label for="email">Email Address</label>
<?=$email_status;?>
<input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" />
</div>
<div class="field-wrap text-wrap label-above">
<label for="phone">Phone Number</label>
<?=$phone_status;?>
<input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" />
</div>
<div class="field-wrap submit-wrap label-above">
<input type="submit" name="submit" value="See the Offer" class="form-button">
</div>
<input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID">
<input type="hidden" value="Pop-up" id="################" name="######################" />
<!-- this is email offer -->
<input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source">
<input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url">
</form>
<i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a>
</section>
</article>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Form pop-up message
how to show a pop-up message(like this site) on submit form
Create pop-up thank you message on form submit
AngularJS pop-up form
What should a slide-down / pop-up login form do on success?
Adding Pop-up Message in Django
Pop-up message with var documents
Convert alert message into pop-up
Creating an ExtJS pop-up form?
Submitting a php pop-up form with javascript
Related Tags