Display success message on submit form

Good day,

I have a site hosted by a hosting company. I am using their form processing feature to process a contact form by inserting the following code into form’s HTML.

<input type="hidden" name="sendtoemail" value="webmaster@mywebsite.com">

<input type="hidden" name="redirect" value="http://www.**redirect url**"> 

I am wondering if that’s possible ,using Javascript, to display a “Thank you. Your message has been sent” kind of message in the message field of the form, after user hits submit button.

Here’s the form’s HTML

<form action="http://www.host.com/hostmail" enctype="multipart/form-data" method="post" accept-charset="UTF-8" class="contact">

<div>
<input type="hidden" name="sendtoemail" value="test@test.com">
<input type="hidden" name="redirect" value="http://test.com/contact.html">
</div>

		<fieldset>

                   <div class="label">
                           <label class="fixedwidth" for="name">Name</label>
                           <input id="name" name="name" type="text" size="50" value=""/>
                   </div>

		   <div class="label">
                            <label class="fixedwidth" for="email">Email</label>
                            <input id="email" name="email" type="text" size="50" value=""/>
                   </div>

		   <div class="label">
                            <label class="fixedwidth" for="subject">Subject</label>
                            <input id="subject" name="subject" type="text" size="50" value=""/>
                   </div>

		  <div id="textarea">
                             <label class="fixedwidth" for="message">Message</label><br/>
                             <textarea id="message" name="message" rows="16" ></textarea>
                  </div>

		  <div class="buttonarea">
		  	<input type="submit" value="Send your message"/>
                  </div>

</fieldset>
</form>

Hi there,

It seems that you are able to specify the redirect url:

<input type="hidden" name="redirect" value="http://www.**redirect url**">

So, why not redirect to a thank you message?
Alternatively, use JS to display a “Message successfully submitted” kind of message on the redirect page, then have it vanish after a few seconds.
I could help you with that if that seems like a good option.

I would also have thought that your hosting company would have an option for such an eventuality.
Who are they? Do you have links to any kind of documentation?

Hi Pullo,

Thanks for the quick response. I am not familiar with JS so would appreciate your help. If you can provide me with step-by-step instructions that would be great!

The company is http://www.bluehost.com/ I am not sure they have documentation on this because they told me I would need to customize such message myself.

Please, see attached doc file with some instructions on using the feature that I am using to process the form.

https://drive.google.com/file/d/0B6nFRgc8AjO2b1NhZ1Q5d1hlWkE/edit?usp=sharing

Hi,

No probs :slight_smile:

From the docs you link to:

If you do not specify a REDIRECT page then the default page that the user filling out the form would see would look like the page shown below.

Thank you for completing our form.
The following info was sent to webmaster@test.com:

Isn’t that exactly what you’re after?

yes, only the text would be “Thank you. Your message has been sent” that’s all. Can you show me how to do that?

Then what about making a separate page with that message on and just redirecting to that?

Or do you have another page you wish to redirect to?

Thanks for the tip, Pullo. I created a separate page and it gets redirected to that page with the message. The only thing is that a blue “redirect” link in the top left corner of the browser flashes for 1 second and then disappears after I hit submit button. Is it supposed to work that way with redirect feature or it just depends on the speed of my internet connection?

Nice one :slight_smile:

Re. the the blue “redirect” link, could you post a link to the page in question so I can see it myself.
It doesn’t sound normal.

sorry what I meant is : after I hit submit button, the “redirect” link flashes once and then disappears. I will post a link.

here’s the link http://prygara.com/contact.html

I just spoke with my host support and they said that ‘redirect’ link flashes too fast and they are not able to actually catch what it says…:), however, they said it’s part of their ‘redirect’ feature that I use so it can’t be fixed on their end as this is the way it works for now.

Wow, that sucks.

If you have PHP on your servers, why don’t you just roll your own contact form?

I could help you if you like.

sure. how do we do this? what info you need?

Well, first off if you can upload PHP files to your webspace and execute them.

Try making a file called info.php and pasting the following content into it:

<?php
  phpinfo();
?>

Upload it to your web server and attempt to view the file.
What happens?

I did. I now have info.php on my server. It is showing file as PHP Script.

Good.

Now we’ll need a contact form.

I’m going to take this one and adapt it a little.

Here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Us!</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        font-size: 62.5%;
        font-family: Helvetica, sans-serif;
      }

      p {
        font-size: 1.3em;
        margin-bottom: 15px;
      }

      #page-wrap {
        width: 660px;
        background: white;
        padding: 20px 50px 20px 50px;
        margin: 20px auto;
        height: auto !important;
      }

      #contact-area {
        width: 600px;
        margin-top: 25px;
      }

      #contact-area input, #contact-area textarea {
        padding: 5px;
        width: 471px;
        font-family: Helvetica, sans-serif;
        font-size: 1.4em;
        margin: 0px 0px 10px 0px;
        border: 2px solid #ccc;
      }

      #contact-area textarea {
        height: 90px;
      }

      #contact-area textarea:focus, #contact-area input:focus {
        border: 2px solid #900;
      }

      #contact-area input.submit-button {
        width: 100px;
        float: right;
      }

      label {
        float: left;
        text-align: right;
        margin-right: 15px;
        width: 100px;
        padding-top: 5px;
        font-size: 1.4em;
      }  
    </style>
  </head>
  <body>

    <div id="page-wrap">
      <h1>Contact form</h1>

      <div id="contact-area">
        <form method="post" action="submit.php">

          <label for="Name">Name:</label>
          <input type="text" name="name" id="name" />
            
          <label for="Email">Email:</label>
          <input type="text" name="email" id="email" />
          
          <label for="Message">Message:</label><br />
          <textarea name="message" rows="20" cols="20" id="message"></textarea>

          <input type="submit" name="submit" value="Submit" class="submit-button" />
        </form>
      </div>
    </div>
  </body>
</html>

You’ll see, that this is nothing more than a simple form, which gets submitted to a file called “submit.php”

submit.php will then check the data it received. If validation fails, it’ll show an error message, otherwise it’ll show a success message.
In our example, I’ll make all of the fields mandatory and I’ll validate the email address against a regular expression:

<?php
  $name = filter_var($_POST['name'],FILTER_SANITIZE_STRING);
  $subject = filter_var($_POST['subject'],FILTER_SANITIZE_STRING);
  $email = filter_var($_POST['email'],FILTER_SANITIZE_STRING, FILTER_VALIDATE_EMAIL);
  $message = filter_var($_POST['message'],FILTER_SANITIZE_STRING);
  $error = "";

  if (empty($name)){
    $error .= "You didn't enter a name <br />";
  }

  if (empty($subject)){
    $error .= "You didn't enter a subject <br />";
  }
  
  if (empty($email)){
    $error .= "You didn't enter an email address <br />";
  } elseif (!eregi("^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})\\.?$", $email)){
    $error .= "The email address appears to be invalid <br />";  
  }
  
  if (empty($message)){
    $error .= "You didn't enter a message <br />";
  }

  if (empty($error)) {
    echo "All fields filled out correctly!";
  } else {
    echo $error;
  }
?>

Copy this code to your PC, name the files accordingly then upload them to your server.
Then let me know if this all works or if you have any questions.

After that we’ll move on to the next step - sending the message.

I adjusted my contact form and created submit.php. all uploaded now.

when I hit submit button now on my form, it get’s me to submit.php saying “All fields filled out correctly!”

Cool!

Now let’s make it send the mail:

<?php
  $name = filter_var($_POST['name'],FILTER_SANITIZE_STRING);
  $subject = filter_var($_POST['subject'],FILTER_SANITIZE_STRING);
  $email = filter_var($_POST['email'],FILTER_SANITIZE_STRING, FILTER_VALIDATE_EMAIL);
  $message = filter_var($_POST['message'],FILTER_SANITIZE_STRING);
  $error = "";

  if (empty($name)){
    $error .= "You didn't enter a name <br />";
  }

  if (empty($subject)){
    $error .= "You didn't enter a subject <br />";
  }
  
  if (empty($email)){
    $error .= "You didn't enter an email address <br />";
  } elseif (!eregi("^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})\\.?$", $email)){
    $error .= "The email address appears to be invalid <br />";  
  }
  
  if (empty($message)){
    $error .= "You didn't enter a message <br />";
  }

  if (empty($error)) {
    $toaddress = "youraddress@you.com";
    $fromaddress = "From:". $email;
    
    $mailcontent = "Name: ". $name. "\
".
                   "Subject: ". $subject. "\
".
                   "Email: ". $email. "\
\
".
                   $message;
                   
    mail($toaddress, "Website Contact Form", $mailcontent, $fromaddress);
    echo "Mail sent successfully!";
  } else {
    echo $error;
  }
?>

Try that out and let me know if you get the mail as expected.

Here’s some issues I am seeing:

  1. “Your message has been sent” appears in a blank browser window after I hit submit. I wanted it appear within text area of the form - same way when I use my host ‘redirect’ feature.

  2. After I hit ‘submit’ it takes a long time to process.

  3. I am not receiving a test message that I sent to my host webmail.

Please, take a look at form HTML and submit.php code below:

<form action="submit.php" enctype="multipart/form-data" method="post" accept-charset="UTF-8" class="contact">
                                    
                                    <fieldset>
                                        
                                        <div class="label">
                                            <label class="fixedwidth" for="name">Name</label>
                                            <input id="name" name="name" type="text" size="50" value=""/>
                                        </div>
                                        <div class="label">
                                            <label class="fixedwidth" for="email">Email</label>
                                            <input id="email" name="email" type="text" size="50" value=""/>
                                        </div>
                                        <div class="label">
                                            <label class="fixedwidth" for="subject">Subject</label>
                                            <input id="subject" name="subject" type="text" size="50" value=""/>
                                        </div>
                                        <div id="textarea">
                                            <label class="fixedwidth" for="message">Message</label><br/>
                                            <textarea id="message" name="message" rows="16" cols="" ></textarea>
                                        </div>
                                        <div class="buttonarea">
							  <input type="submit" value="Send your message"/>
                                        </div>
                                    </fieldset>
                                </form>

<?php
  $name = filter_var($_POST['name'],FILTER_SANITIZE_STRING);
  $subject = filter_var($_POST['subject'],FILTER_SANITIZE_STRING);
  $email = filter_var($_POST['email'],FILTER_SANITIZE_STRING, FILTER_VALIDATE_EMAIL);
  $message = filter_var($_POST['message'],FILTER_SANITIZE_STRING);
  $error = "";

  if (empty($name)){
    $error .= "You didn't enter a name <br />";
  }

  if (empty($subject)){
    $error .= "You didn't enter a subject <br />";
  }
  
  if (empty($email)){
    $error .= "You didn't enter an email address <br />";
  } elseif (!eregi("^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})\\.?$", $email)){
    $error .= "The email address appears to be invalid <br />";  
  }
  
  if (empty($message)){
    $error .= "You didn't enter a message <br />";
  }

  if (empty($error)) {
    $toaddress = "....";
    $fromaddress = "From:". $email;
    
    $mailcontent = "Name: ". $name. "\
".
                   "Subject: ". $subject. "\
".
                   "Email: ". $email. "\
\
".
                   $message;
                   
    mail($toaddress, "Website Contact Form", $mailcontent, $fromaddress);
    echo "Your message has been sent";
  } else {
    echo $error;
  }?>

Hi there,

Building a contact form, although not overly complicated, does involve a number of steps and moving parts (so to speak). It is my intention to get the form working first of all, then customize it in a second step. Don’t worry :slight_smile:

This sounds like your provider has blocked PHP’s mail function.
The reason might be that the mail function is sometimes seen as a security risk, as a badly coded contact form can be used as a spam relay.

The code you posted looks fine.

Would it be possible for you to contact your hosting company and ask if they allow you to build your own contact forms and more specifically if PHP’s mail function is specifically blocked on their servers?