0

On my website, I have a contact form. When user fills out the form and presses the send button, a message is displayed under the form. I want the message to hide itself after a few seconds. I also want to possibly style the message with color and center alignment etc.

HTML 

<div class="container">
    <form action="form_process.php" method="post" name="contact_form" target="myIframe">
        <div class="row">
            <div class="col-md-4">
                <input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required>
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
                <input type="text" class="form-control" name="sub" id="sub" placeholder="Subject" required>


            </div>
            <div class="col-md-8">
                <textarea class="form-control" name="msg" id="msg" rows="15" cols="10" placeholder="Your Message" required></textarea>
                <button type="submit" name="submit" class="btn btn-default submit-btn form-submit">SEND</button>
            </div>
        </div>
    </form>
    <div class="iframe-div">
        <iframe name="myIframe" id="myIframe">

        </iframe>
    </div>
</div>

CSS 

.iframe-div {
    text-align:center;
    color: #3978bd;
}
#myIframe {

    frameborder:0;
    border:0 ;
    cellspacing:0;
    border-style: none;
    width: 100%;
    height: 60px;
}

PHP

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $sub = $_POST['sub'];
    $msg = $_POST['msg'];

    $message=$_POST['message']. 'Name: ' . $name . '"\n"Email: ' . $email. '"\n"Subject: ' . $sub;
    $to = 'sample@gmail.com';
    $subject = 'New Message';

    mail($to, $subject, $message, $msg);
    echo "Your Message has been sent";
?>
Diriector_Doc
  • 582
  • 1
  • 12
  • 28
chaitu_teja
  • 3
  • 3
  • Has your wow.js been loaded in at the bottom of your html? from the html thats the plugin it looks like your trying to use – Jason Joslin May 02 '17 at 02:56
  • yes it is loaded – chaitu_teja May 02 '17 at 03:10
  • I actually dont know wow.js to be honest but you could do it quite easily with jquery. instead of me duplicating a post you could read this guys http://stackoverflow.com/a/820954/6208463 – Jason Joslin May 02 '17 at 03:48
  • sorry, i should have been more clear, i am not trying to use wow.js to hide the iframe. i can get the message to display but i want to hide the message after few seconds. – chaitu_teja May 02 '17 at 04:16

1 Answers1

0

You could use something like this : 

$('.iframe-div').fadeIn('slow', function () {
    $(this).delay(3000).fadeOut('slow');
});

Of course, you should add it to the success logic of your script.
Hope this helps.

SYA :)

LebCit
  • 618
  • 4
  • 13