Originally Posted by
craftech
Thank you for doing that video Ed. It was really helpful. And thank you James for writing that code for me as well.
I tried the script James, but it generates a "sending" message that never sends. I think I have to point it to the form on the server, but I am not sure where to edit the "body" or "head" to do that.
Hi John, in Eggs video the form files are in a folder called php-contact-form-with-validation. So the ajax url needs to be changed to changed. Change the code that went into Page -> html code (head) to
Code:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function()
{
function after_form_submitted(data)
{
if(data.result == 'success')
{
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
else
{
$('#error_message').append('<ul></ul>');
jQuery.each(data.errors,function(key,val)
{
$('#error_message ul').append('<li>'+key+':'+val+'</li>');
});
$('#success_message').hide();
$('#error_message').show();
//reverse the response on the button
$('button[type="button"]', $form).each(function()
{
$btn = $(this);
label = $btn.prop('orig_label');
if(label)
{
$btn.prop('type','submit' );
$btn.text(label);
$btn.prop('orig_label','');
}
});
}//else
}
$('#reused_form').submit(function(e)
{
e.preventDefault();
$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'php-contact-form-with-validation/handler.php',
data: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});
});
});
</script>
The form will not send an email in Xara's preview, it will need to be published to your server first
@ Egg - this is all just code that is supplied with the form, I've done nothing special here
Bookmarks