If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Member #
    1 times

    I have been working on this issue for probably more than 30 hours and I have had no luck whatsoever!
    I've been doing trial and error, test after test after test and I still cannot come right!
    I've bought a contact form that uses AJAX which includes a captcha system. I asked the person who I bought the script from to help me if I get any problems setting up his contact form on the lightbox. He said he would help but to my expectations he hasn't given the slightest bit of technical help!

    I'm an amateur when it comes to php / ajax / javascript, so when I ask for help on forums, I need step by step instructions with elaborated answers. Theres been NO help on w3schools because members seem to think I know coding like the back of my hand and they give answers like "create a call from ajax" - problem is, how do I do all this (remember I'm an amateur at this hence why I am on forums asking)??

    I am on the verge of giving up on this project but feel I've worked so hard that I need to get this right! I join this forum for answers and to get actual help!

    Sorry for blabbing on ... but I need you to know what situation I'm in.

    Ok moving on to the nitty gritty stuff!
    Go to
    Here you will see that I have a link, when clicked it opens a form in a fancybox lightbox frame. Just what I want. When I fill in the form and hit submit ... bam! I've been taken to a blank page with a success message! Not what I wanted! I want the success message to show up in the lightbox frame where I clicked "submit" (ie: I don't want to redirect to another page but to instead stay on the lightbox with the success message displaying - no page refreshing).

    Now how do I do this?
    I've done a **** load of research and there is so much I can understand due to the lack of coding knowledge.
    Like I've said, I've done lots of testing, trying out different edits here and there, but I am still left frustated!
    Because I've bought this Contact php form, it will probably make my scenario a bit different to everyone else's issues that are similar.

    My HTML is as follows:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
        <html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link href="ajax-contact-form-extended/ajax-contact-extend/style/contact.css" rel="stylesheet" type="text/css" /> <!-- AJAX     Contact Form Stylesheet -->
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="ajax-contact-form-extended/ajax-contact-extend/js/jquery.jigowatt.js"></script><!-- AJAX Form Submit -->
    <script type="text/javascript" src=""></script>
            !window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
        <script type="text/javascript" src="fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
        <script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
        <script type="text/javascript">
            $(document).ready(function() {
                *   Examples - images
                    'overlayShow'    : false,
                    'transitionIn'    : 'elastic',
                    'transitionOut'    : 'elastic'
                    'transitionIn'    : 'none',
                    'transitionOut'    : 'none'   
                    'opacity'        : true,
                    'overlayShow'    : false,
                    'transitionIn'    : 'elastic',
                    'transitionOut'    : 'none'
                    'titlePosition'        : 'outside',
                    'overlayColor'        : '#000',
                    'overlayOpacity'    : 0.9
                    'titlePosition'    : 'inside'
                    'titlePosition'    : 'over'
                    'transitionIn'        : 'none',
                    'transitionOut'        : 'none',
                    'titlePosition'     : 'over',
                    'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                        return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                *   Examples - various
                $("#various1, #various2").fancybox({
                    'titlePosition'        : 'inside',
                    'transitionIn'        : 'none',
                    'transitionOut'        : 'none'
                    'width'                : '75%',
                    'height'            : '75%',
                    'autoScale'            : false,
                    'transitionIn'        : 'none',
                    'transitionOut'        : 'none',
                    'type'                : 'iframe'
                    'padding'            : 0,
                    'autoScale'            : false,
                    'transitionIn'        : 'none',
                    'transitionOut'        : 'none'
    <style type="text/css">
    .style2 {
        font-family: Calibri;
        font-style: italic;
        font-size: 24px;
    body,td,th {
        font-family: Arial;
        font-size: 12px;
        color: #333333;
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    <table width="488" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <td width="81" height="75">&nbsp;</td>
        <td width="305">&nbsp;</td>
        <td width="102">&nbsp;</td>
        <td height="86">&nbsp;</td>
        <td align="center" valign="middle" bgcolor="#F7F7F7" class="style2"><a id="various22" href="form.txt">Enquire Now</a></td>
        <td height="143">&nbsp;</td>
    <div style="display: none;">
            <div id="res">
    <div id="contact">
                <div id="message"></div>
                <form method="post" action="ajax-contact-form-extended/ajax-contact-extend/contact.php" name="contactform" id="contactform">
                <legend>Please fill in the following form to contact us</legend>
                <label for="name" accesskey="U"><span class="required">*</span> Your Name</label>
                <input name="name" type="text" id="name" size="30" value="" />
                <br />
                <label for="email" accesskey="E"><span class="required">*</span> Email</label>
                <input name="email" type="text" id="email" size="30" value="" />
                <br />
                <label for="phone" accesskey="P"><span class="required">*</span> Phone</label>
                <input name="phone" type="text" id="phone" size="30" value="" />
                <br />
                <label for="subject" accesskey="S">Subject</label>
                <select name="subject" id="subject">
                  <option value="Support">Support</option>
                  <option value="a Sale">Sales</option>
                  <option value="a Bug fix">Report a bug</option>
                <br />
                <label for="comments" accesskey="C"><span class="required">*</span> Your comments</label>
                <textarea name="comments" cols="40" rows="3" id="comments" style="width: 350px;"></textarea>
                <p><span class="required">*</span> Are you human?</p>
                <label for="verify" accesskey="V">&nbsp;&nbsp;&nbsp;<img src="ajax-contact-form-extended/ajax-contact-extend/image.php" alt="Image verification" border="0"/></label>
                <input name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" /><br /><br />
                <input type="submit" class="submit" id="submit" value="Submit" />


  3. #2
    Senior Member
    Join Date
    Mar 2010
    Member #
    1 times
    CONTINUED ........

    As you can see above, the form goes to contact.php
    contact.php script goes like this (I put a fake email address in below):
    <?php if (!isset($_SESSION)) session_start();
    if(!$_POST) exit;
        if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");
        // Simple Configuration Options
        // Enter the email address that you want to emails to be sent to.
        // Example $address = "";
        $address = "";
        // Twitter Direct Message notification control.
            // Set $twitter_active to 0 to disable Twitter Notification
            $twitter_active        = 0;
            // Get your consumer key and consumer secret from
                // Notes:
                    // Application Name: Jigowatt Contact Form
                    // Description: Jigowatt Contact Form Direct Messaging Funcionality
                    // Application Website: (your website address)
                    // Application Type: Browser
                    // Callback URL: (Blank)
                    // Default Access type: Read and Write
            $twitter_user        = ""; // Your user name
            $consumer_key        = "";
            $consumer_secret    = "";
            // Access Token and Access Token Secret is under "My Access Token" (right menu).
            $token                = "";
            $secret                = "";
        // END OF Simple Configuration Options
    // Only edit below this line if either instructed to do so by the author or have extensive PHP knowledge.
    // Please Note, we cannot support this file package if modifications have been made below this line.
        $name     = $_POST['name'];
        $email    = $_POST['email'];
        $phone    = $_POST['phone'];
        $subject  = $_POST['subject'];
        $comments = $_POST['comments'];
        if (isset($_POST['verify'])) :
            $posted_verify   = $_POST['verify'];
               $posted_verify   = md5($posted_verify);
           else :
               $posted_verify = '';
        // Important Variables
        $session_verify = $_SESSION['verify'];
        if (empty($session_verify)) $session_verify = $_COOKIE['verify'];
        $error = '';
            if(trim($name) == '') {
                $error .= '<li>Your name is required.</li>';
            if(trim($email) == '') {
                $error .= '<li>Your e-mail address is required.</li>';
            } elseif(!isEmail($email)) {
                $error .= '<li>You have entered an invalid e-mail address.</li>';
            if(trim($phone) == '') {
                $error .= '<li>Your phone number is required.</li>';
            } elseif(!is_numeric($phone)) {
                $error .= '<li>Your phone number can only contain digits.</li>';
            if(trim($comments) == '') {
                $error .= '<li>You must enter a message to send.</li>';
            if($session_verify != $posted_verify) {
                $error .= '<li>The verification code you entered is incorrect.</li>';
            if($error != '') {
                echo '<div class="error_message">Attention! Please correct the errors below and try again.';
                echo '<ul class="error_messages">' . $error . '</ul>';
                echo '</div>';
            } else {
            if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }
             // Advanced Configuration Option.
             // i.e. The standard subject will appear as, "You've been contacted by John Doe."
             $e_subject = 'You\'ve been contacted by ' . $name . '.';
             // Advanced Configuration Option.
             // You can change this if you feel that you need to.
             // Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.
             $msg  = "You have been contacted by $name with regards to $subject, they passed verification and their message is as follows." . PHP_EOL . PHP_EOL;
             $msg .= "$comments" . PHP_EOL . PHP_EOL;
             $msg .= "You can contact $name via email, $email or via phone $phone." . PHP_EOL . PHP_EOL;
             $msg .= "-------------------------------------------------------------------------------------------" . PHP_EOL;
             $msg .= "This message was sent to you via the Jigowatt AJAX Contact Form";
            if($twitter_active == 1) {
                $twitter_msg = $name . " - " . $comments . ". You can contact " . $name . " via email, " . $email ." or via phone " . $phone . ".";
                twittermessage($twitter_user, $twitter_msg, $consumer_key, $consumer_secret, $token, $secret);
            $msg = wordwrap( $msg, 70 );
            $headers = "From: $email" . PHP_EOL;
            $headers .= "Reply-To: $email" . PHP_EOL;
            $headers .= "MIME-Version: 1.0" . PHP_EOL;
            $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
            $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;
            if(mail($address, $e_subject, $msg, $headers)) {
             echo "<fieldset>";
             echo "<div id='success_page'>";
             echo "<h1>Email Sent Successfully.</h1>";
             echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
             echo "</div>";
             echo "</fieldset>";
             } else {
             echo 'ERROR!'; // Dont Edit.
    function twittermessage($user, $message, $consumer_key, $consumer_secret, $token, $secret) { // Twitter Direct Message function, do not edit.
        $Twitter = new EpiTwitter($consumer_key, $consumer_secret);
        $Twitter->setToken($token, $secret);
        $direct_message = $Twitter->post_direct_messagesNew( array('user' => $user, 'text' => $message) );
        $tweet_info = $direct_message->responseText;
    function isEmail($email) { // Email address verification, do not edit.
    Then there is a JAVASCRIPT file that I suppose, handles the submission, validation and the way the form slides etc:
            var action = $(this).attr('action');
            $('#submit').attr('disabled','disabled').after('<img src="../assets/ajax-loader.gif" class="loader" />');
            $("#message").slideUp(750,function() {
            $.post(action, {
                name: $('#name').val(),
                email: $('#email').val(),
                phone: $('#phone').val(),
                subject: $('#subject').val(),
                comments: $('#comments').val(),
                verify: $('#verify').val()
                    document.getElementById('message').innerHTML = data;
                    $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
                    if(data.match('success') != null) $('#contactform').slideUp('slow');
                    $('#name').val( "" );
                    $('#email').val( "" );
                    $('#phone').val( "" );
                    $('#subject').val( "" );
                    $('#comments').val( "" );
                    $('#verify').val( "" );
            return false;

    Ok, so part of my research, I've kinda learned that I need to do something like call AJAX, a code similar to:

    $("#contactform").bind("submit", function() {
            type        : "POST",
            cache    : false,
            url        : "/data/login.php",
            data        : $(this).serializeArray(),
            success: function(data) {
        return false;

    Am I correct?
    If so, where do I put this code? ... and then do I need to add / take out / edit any code in the files above, like my html page, contact.php and javascript file?
    If you need to fill in the form and try it out yourself, feel free!

    I'm pretty sure this can be done and its nothing too big or complicated (hopefully), just that I need your help in doing it of course.

    I would appreciate your help and now I eagerly await the big brains and elaborate, step by step answers!

    If there any other information or files you require from me, please let me know!

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search tags for this page

after submitting form success result on light box
email to friend success stays in fancybox
fancybox validate email javascript

form submit and success message on light box

js fancybox phone number spoof
write welcome message in fancybox
Click on a term to search for related topics.
All times are GMT -6. The time now is 01:10 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: