Field values gone after bad recaptcha

damon18 · Aug 7th, 2014, 1:34 PM

I've got a single page simple (three fields) contact form using the API on a one page site that uses bootstrap.

The form works correctly, send email, and then redirects to the thank you page when the recaptcha is entered correctly.

But I have two problems.

First if the captcha is wrong the form is blanked and the user has to start over, frustration and may just abandon the attempt to contact me. I found some code like
value="<?php htmlspecialchars(@$fields["name"])?>
in another thread and added that but it doesn't seem to work for me.

Second problem is minor but related. After the failed captcha, the page reloads causing it to go back to the top of page, since this is a single page bootstrap page and the contact form is down the page, the user doesn't realize there has been a problem at all unless they scroll down the page to look at the form again and see the custom error message. (which I got from a search of the forums for bootstrap error message)

The form is on this page
http://memphisguru.com/index.php

Please feel free to try it out to see the usability problems. Open to suggestions.

Here is the code for the form if you spot any problems trying to refill the fields.

Code:
<form role="form" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

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

                                <input class="form-control" type="text" name="name" id"name" placeholder="Name" value="<?php htmlspecialchars(@$fields["name"])?>" />

                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

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

                                <input class="form-control" type="email" name="email" id="email" placeholder="Email Address" value="<?php htmlspecialchars(@$fields["email"])?>" />

                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

                                <label for="mymessage">Message</label>

                                <textarea class="form-control" name="mymessage" id="mymessage" rows="5" placeholder="Message"><?php @$fields["mymessage"]?></textarea>

                            </div>

                        </div>

                        <br>

                        <div class="row">

                            <div class="form-group col-xs-12">

                            <div><?php if (!empty($g_api_recaptcha_error)) { ?>

<p class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;Your submission did not match the captcha, please try again.</p>

<?php $g_api_recaptcha_error = ""; ?>

<?php } ?>

                            </div>                

                            <div><?php ft_api_display_captcha(); ?></div><div><button name="submitmemphisguru" type="submit" class="btn btn-lg btn-success">Send</button></div>

                            </div>

                        </div>

                    </form>

damon18 · Aug 7th, 2014, 3:30 PM

OK, looks like the the first problem of not retaining the values after failed captcha was my mistake in the php code for each field.

I still need help with the second problem, how to make the page redirect back down to the section id="contact" on the failed captcha.

Corrected form is

Code:
<form role="form" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

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

                                <input class="form-control" type="text" name="name" id"name" placeholder="Name" value="<?=htmlspecialchars(@$fields["name"])?>" />

                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

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

                                <input class="form-control" type="email" name="email" id="email" placeholder="Email Address" value="<?=htmlspecialchars(@$fields["email"])?>" />

                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-xs-12 floating-label-form-group">

                                <label for="mymessage">Message</label>

                                <textarea class="form-control" name="mymessage" id="mymessage" rows="5" placeholder="Message"><?=@$fields["mymessage"]?></textarea>

                            </div>

                        </div>

                        <br>

                        <div class="row">

                            <div class="form-group col-xs-12">

                            <div><?php if (!empty($g_api_recaptcha_error)) { ?>

<p class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;Your submission did not match the captcha, please try again.</p>

<?php $g_api_recaptcha_error = ""; ?>

<?php } ?>

                            </div>                

                            <div><?php ft_api_display_captcha(); ?></div><div><button name="submitmemphisguru" type="submit" class="btn btn-lg btn-success">Send</button></div>

                            </div>

                        </div>

                    </form>

5k313t0r · Sep 24th, 2014, 7:53 PM

Hey damon18,

How familiar are you with jQuery/javascript? One way would be to use the field <input type="hidden" name="form_tools_form_url" value="" /> when submitting your form. In the value just pass a url like so http://www.url.com/#contact and craft some simple jQuery to check the url on page load for the hash and if it exists, scroll to the element with that id. Easy peasy.

Let me know if this does the trick.

(Aug 7th, 2014, 3:30 PM)damon18 Wrote: OK, looks like the the first problem of not retaining the values after failed captcha was my mistake in the php code for each field.

I still need help with the second problem, how to make the page redirect back down to the section id="contact" on the failed captcha.

Corrected form is

Code:
<form role="form" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST"> <div class="row"> <div class="form-group col-xs-12 floating-label-form-group"> <label for="name">Name</label> <input class="form-control" type="text" name="name" id"name" placeholder="Name" value="<?=htmlspecialchars(@$fields["name"])?>" /> </div> </div> <div class="row"> <div class="form-group col-xs-12 floating-label-form-group"> <label for="email">Email Address</label> <input class="form-control" type="email" name="email" id="email" placeholder="Email Address" value="<?=htmlspecialchars(@$fields["email"])?>" /> </div> </div> <div class="row"> <div class="form-group col-xs-12 floating-label-form-group"> <label for="mymessage">Message</label> <textarea class="form-control" name="mymessage" id="mymessage" rows="5" placeholder="Message"><?=@$fields["mymessage"]?></textarea> </div> </div> <br> <div class="row"> <div class="form-group col-xs-12"> <div><?php if (!empty($g_api_recaptcha_error)) { ?> <p class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Your submission did not match the captcha, please try again.</p> <?php $g_api_recaptcha_error = ""; ?> <?php } ?> </div> <div><?php ft_api_display_captcha(); ?></div><div><button name="submitmemphisguru" type="submit" class="btn btn-lg btn-success">Send</button></div> </div> </div> </form>

FORUMS