Search code examples
phpjavascriptjqueryformscolorbox

Creating 'thankyou' popup for PHP form using colorbox

I am already using colorbox on my site so would like to use the inlineHTML colorbox to present a user with a thankyou feedback once they have submitted the form.

I've set up the inline content contact_thanks which contains the thankyou text, as a hidden div.

I've then set the PHP script to reroute to my domain + #contact_thanks

The only problem is, I'm missing some part that calls the jQuery to change the colorbox div from hidden, and I'm not sure what I need to put in my code to make this work.

Live site can be found here, feel free to send test messages (it only goes to me at the mo!)

The PHP

<?php
  $name = $_REQUEST['name'] ;
  $email = $_REQUEST['email'] ;
  $message = $_REQUEST['message'] ;

  mail( "[email protected]", "Message",
    $message, "From: $email" );
  header( "Location: http://www.mysite.co.uk/james/index.php#contact_thanks" );
?>

The HTML

<div style='display:none'>
      <div id='contact_thanks' style='padding:10px; background:#fff;'>
      <span class="colorBox">Thank you for your message!</span>
      <p>Thanks!</p>
</div>
</div>
Solution

  • Add this to your .js file (assuming you have jQuery loaded):

    $(window).load(function() {
    if( window.location.hash == '#contact_thanks' ) {
      $('#contact_thanks').show();
    } 
});

    But you also need to edit your html:

    <div id='contact_thanks' style='padding:10px; background:#fff; display:none'>
    <span class="colorBox">Thank you for your message!</span>
    <p>Thanks!</p>
</div>

    Actually, it's much better to move all styles to your css and apply to #contact_thanks. And there is better option, but it will be a bit harder to implement - send your form data via .ajax() and then show your message after success.