Testing Spry form on local server and redirecting to a 'thank you' page

[SarahVictoria75]

Hello,

I'm building a site in DW CS6 using PHP and testing on my local server (MAMP).

I'm wanting to create a simple contact form so people can submit a message which will then be sent to one email address (my first time doing this).

Using tutorials and a bit of code from our hosting provider I've written the code below.

Is there a way that I can now test that this works on my local server? I also want to create a thank you page that people will be redirected to.

When I view the form in a browser, the CSS styling is working but I don't know if it works because when I roll over the submit button it doesn't seem active/change and when I click on it nothing happens - I just stay on the same page, rather than being directed to another page.

I'm not sure if I've gone about this the right way.

I realise that I'll have to redirect the path for the 'thanks' and 'error' pages at the bottom to my local MAMP htdocs folder, but I'm not given the option to browse for these files and just shown the 'bind to dynamic source' icon.

<form method="post" action="http://www.our_domain.co.uk/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onsubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; window.onbeforeunload = function () {document.charset=originalCharset;};">

    <span id="nameTextField">

      <label for="name"></label>

      <input type="text" name="name" id="name">

      <span class="textfieldRequiredMsg">Required</span></span><br><br>

    <span id="emailTextField">

    <label for="email"></label>

    <input type="text" name="email" id="email">

    <span class="textfieldRequiredMsg">Required</span><span class="textfieldInvalidFormatMsg">Invalid format</span></span><br><br>

    <span id="messageTextArea">

    <label for="message"></label>

    <textarea name="message" id="message" cols="45" rows="5"></textarea>

    <span id="countmessageTextArea"> </span><span class="textareaRequiredMsg"> Required</span><span class="textareaMinCharsMsg">Minimum number of characters not met.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span><br><br>

   <input name="submit" type="button" value="Send">

   <input type="hidden" name="recipient" value="enquiries@our_domain.co.uk" />

   <input type="hidden" name="subject" value="Enquiry from your website" />

   <input type="hidden" name="redirect" value="http://www.our_domain.co.uk/thanks.php" />

   <input type="hidden" name="missing_fields_redirect" value="http://www.our_domain.co.uk/error.php" />

   <input type="hidden" name="required" value="realname,email," />

  </form>

Thank you

[Nancy OShea]

I haven't used Perl in ages.  Is there some reason you're not using PHP to process your form?

Formm@ailer PHP from DB Masters

http://dbmasters.net/index.php?id=4

FormToEmail.com (free & pro versions available)

http://formtoemail.com/formtoemail_pro_version.php    

Tectite

http://www.tectite.com/formmailpage.php

Nancy O.

[SarahVictoria75]

Thanks Nancy.

I downloaded formtoemail.com (pro), put the code onto my page and uploaded the script php file.

I've tested the form remotely and it is working. Can I customise the form styling doing it this way? I've managed to a bit just from changing a few bits in the code.

The way I did it before using Spry validation meant that I had CSS and JS files for the SpryValidationTextarea and Text field and so I could change the styling that way.

When you say use PHP to process my form, did you mean my form is okay (inc. CSS files etc.) and I just need to add some PHP scripting?

Thank you for your help - this is all new to me but I want to make sure I'm doing it right!

[Nancy OShea]

You can style your forms any way you wish with CSS. 

Client Side validation (Spry) is not reliable.  It uses the end user's browser & JavaScript.  If JS is turned off, it won't do anything. Also, robots never use JavaScript.  So don't use JS for anything important.

Always use server-side scripts (PHP) to gather, validate and process form data.  This does not rely on the end user's browser settings and is thus very reliable. 

PHP is also a very powerful tool for catching robots and stopping them from exploiting your forms and stuffing your inbox with unwanted spam mail.  The more you learn about PHP, the more you'll grow to love it.

Nancy O.

[mhollis55]

The reason why Nancy thinks you're using Pearl to do your form processing is because of this line:

<form method="post" action="http://www.our_domain.co.uk/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onsubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; window.onbeforeunload = function () {document.charset=originalCharset;};">

Specifically, what you are doing is that when someone presses the "Submit" button, the result is to call a file called FormMail.pl and any filename with the .pl extension is Perl.

A file that uses php will end in .php.

If you are using MAMP (or WAMP) one issue you may have is that you have not installed a php mail handler. On a regular web server, there is usually an email sending application that runs in the background on that server. MAMP and WAMP may not include that. They also may not include php or Perl, either.

Here is the start of the form that calls a php file to send email from one of my websites:

<form method="post" action="sendmail.php">

Now, here, you're seeing that I am calling a php forms processor called sendmail.php. That processor does all of my heavy lifting.

You can see the entire form here (and it's pretty basic):

http://ghostsofnewengland.org/contact.php

I do all of the form checking in php. I'm not using Spry—which Adobe dumped, by the way. Spry reveals itself to the user and I don't think it's as safe as checking things using a server-side script. Frankly, niether does Nancy.

Is there any place we can see your page, other than on your own computer?

-Mark

[SarahVictoria75]

Thank you both.

After downloading script from formtoemail.com my alternative contact page now looks like below and is saved in the same folder as the formtoemailpro.php file. This does work but I'm confused now as to how to attach CSS styling to the form.

<?php

session_start();

if(isset($_SESSION['submitted_form_values'])){extract($_SESSION['submitted_form_values']);}

?>

<form action="formtoemailpro.php" method="post">

<table border="0" style="background:" cellspacing="5">

<tr align="left"><td>Name</td><td><input type="text" size="30" name="name" value="<?php if(isset($name)){print stripslashes($name);}else{print "";} ?>"></td></tr>

<tr align="left"><td>Email</td><td><input type="text" size="30" name="email" value="<?php if(isset($email)){print stripslashes($email);}else{print "";} ?>"></td></tr>

<tr align="left"><td>Confirm email  </td><td><input type="text" size="30" name="email2" value="<?php if(isset($email2)){print stripslashes($email2);}else{print "";} ?>"></td></tr>

<tr align="left"><td valign="top">Your message  </td><td><textarea name="comments" rows="6" cols="30"><?php if(isset($comments)){print stripslashes($comments);}else{print "some default text";} ?></textarea></td></tr>

<tr align="left"><td> </td><td><input type="submit" value="Send"></td></tr>

</table>

</form>

<?php

if(isset($_SESSION['formtoemail_form_errors']))

{

print "<div style=\"color:#ff0000\">";

foreach($_SESSION['formtoemail_form_errors'] as $form_error_value){print "<b>" . stripslashes($form_error_value) . "</b><br>";}

print "</div>";

unset($_SESSION['formtoemail_form_errors']);

}

?>

I'll have a look at your suggestions tomorrow and see how I get on. Thanks, Vicky

[Nancy OShea]

Of course you CAN use tables with forms, however I prefer to use  ordered lists and form labels for better web accessibility.   That's up to you.

Nancy O.

[SarahVictoria75]

Hi Nancy,

This is the coding I downloaded off the internet from formtoemail as you suggested.

Do you know if there are any tutorials on how to use ordered lists and form labels instead?

Thanks, Vicky

[Nancy OShea]

View source to see the code.

http://alt-web.com/TEST/Basic-HTML5form-jquery.html

Nancy O.