Home/ Questions/Q 3497960
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:26:09+00:00

I have a form which pops up in an overlay for a simple call

  • 0

I have a form which pops up in an overlay for a simple call back but trying to get it to function properly.

What I want is for it to display a small thankyou (speak to you soon) message before the overlay closes and fades out.

I’ve kind of got it working but there is no delay and the overlay doesn’t fade out.

Here’s the code:

<script> 
    jQuery(document).ready(function() {
        jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',} );
        jQuery('#form').ajaxForm(function() { 
            jQuery("#message").html("Speak to you soon!"); //see footnote 
            jQuery("#callback").hide("blind",null, 10000,function(){
                setTimeout(close_message,10000);
            });
        }); 
    });

    function close_message() {
        jQuery('#message').hide("blind",null,1000,function(){
           window.location("<url to the home page>");//see footnote 2
         });
    }
</script>

<div class="home-block">
  <div class="home-block-content">
    <div class="home-block-col1">
      <h2>call us</h2>
      why not call our friendly designers or let us call you... <span class="callus">0844 8707026</span><br>
      <a href="#" rel="#callback" class="simpledialog">request a call back</a></div>
    <div class="home-block-col2"><a href="#" rel="#callback" class="simpledialog"><img src="{{skin url=""}}images/media/callus.png" border="0" alt="call us"  /></a></div>
  </div>
  <div class="clear-block"><br>
  </div>
</div>
<div class="simple_overlay" id="callback"> Please enter your details and we will call you back...<br />
  <br /><div id="message"></div>
  <form id="form" name="form" method="post" action="{{skin url=""}}forms/callbackscript.php">
    <div class="callback-label">Name:</div>
    <div class="callback-field">
    <input name="name" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Phone Number:</div>
    <div class="callback-field">
    <input name="phone" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Callback time*:</div>
    <div class="callback-field">
    <select name="howsoon" class="callback-select">
    <option value="ASAP">As soon as possible</option>
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    </select></div><div class="clear-block"></div>
    <div class="callback-label">Your Question:</div>
    <div class="callback-field">
      <textarea name="question" cols="27" rows="3" class="callback-input"></textarea><div class="clear-block"></div>
    </div>
<div class="callback-label"></div><div class="callback-field">
<input type="submit" name="Submit" value="Submit" />
  </form></div><div class="clear-block"></div>
<div class="note">*Please note we can only call back between the hours of 8-5 Monday-Friday and 9-1 on Saturday</div>
<div class="clear-block"></div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s really a number of places where you go wrong:

    Here’s an example that roughly does what you ask: http://jsfiddle.net/5Ybdb/10/

    • See the manual of jQuery.hide, you are using the wrong syntax
    • See the manual of ajaxForm, you are using the wrong syntax
    • Make sure you have the above two plugins’ js files imported correctly
    • Your message div is inside the #callback div, so it will hide immediately together with this
    • Your divs/forms tags do not open/close in the right order (incorrect HTML syntax)
    • To set the window location use window.location = “blah” (you used window.location(“blah”)
    • 0