How to return to a certain section of a page when a form comes back with errors

Question

I have a one page website. Each menu item scrolls you to a different part of the page. I have a HTML and PHP form which reloads the page and displays an error message if the form is submitted with a required field not filled. The problem is it reloads to the top of the page whereas my form is at the bottom of the page.

How can I get the form to reload the page to the section where the contact form is? The form already does exactly that when the form is submitted successfully but not when there are errors.

Any help would be great. Thanks for reading.

HTML

<div id="contactBox">

            <form name="contact" id="contactForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <div id="formLeft">
                    <p>
                        <label for="name">Name</label>
                        <?php if ($missing && in_array('name', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please enter your name</span>
                        </div>                             
                        <?php } ?>
                        <input type="text" name="name" id="name" tabindex="10"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($name, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="company">Company Name/Website</label>
                        <input type="text" name="company" id="company" tabindex="30"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($company, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="email">Email</label>
                        <?php if ($missing && in_array('email', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please enter your email</span>
                        </div>
                        <?php } elseif (isset($errors['email'])) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Invalid email address</span>
                        </div>
                        <?php } ?>
                        <input type="email" name="email" id="email" tabindex="40"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($email, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" id="phone" tabindex="50"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($phone, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="contactYou">Contact you by...</label>
                        <?php if ($missing && in_array('contactYou', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="contactYou" size="1" id="contactYou" tabindex="60">
                            <option value="" selected="selected">- select</option>
                            <option value="email" <?php echo ($contactYou == 'email') ? ' selected="selected"' : ''; ?>>Email</option>
                            <option value="phone" <?php echo ($contactYou == 'phone') ? ' selected="selected"' : ''; ?>>Phone</option>
                        </select>
                    </p> 
                </div>
                <div id="formRight">
                    <p>
                        <label for="interest">I am interested in...</label>
                        <?php if ($missing && in_array('interest', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="interest" size="1" id="interest" tabindex="80">
                            <option value="" selected="selected">- select</option>
                            <option value="new" <?php echo ($interest == 'new') ? ' selected="selected"' : ''; ?>>Creating a new website</option>
                            <option value="current" <?php echo ($interest == 'current') ? ' selected="selected"' : ''; ?>>Redesigning a current website</option>
                            <option value="responsive" <?php echo ($interest == 'responsive') ? ' selected="selected"' : ''; ?>>Reponsive web design</option>
                            <option value="wordpress" <?php echo ($interest == 'wordpress') ? ' selected="selected"' : ''; ?>>A WordPress website</option>
                            <option value="general" <?php echo ($interest == 'general') ? ' selected="selected"' : ''; ?>>General enquiry</option>
                        </select>
                    </p>
                    <p>
                        <label for="budget">My budget is...</label>
                        <?php if ($missing && in_array('budget', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="budget" size="1" id="budget" tabindex="90">
                            <option value="" selected="selected">- select</option>
                            <option value="100" <?php echo ($budget == '100') ? ' selected="selected"' : ''; ?>>€100 - €500</option>
                            <option value="500" <?php echo ($budget == '500') ? ' selected="selected"' : ''; ?>>€500 - €1,000</option>
                            <option value="1000" <?php echo ($budget == '1000') ? ' selected="selected"' : ''; ?>>€1,000 - €2,000</option>
                            <option value="2000" <?php echo ($budget == '2000') ? ' selected="selected"' : ''; ?>>€2,000 - €5,000</option>
                            <option value="5000" <?php echo ($budget == '5000') ? ' selected="selected"' : ''; ?>>€5,000 - €10,000</option>
                            <option value="10000" <?php echo ($budget == '10000') ? ' selected="selected"' : ''; ?>>€10,000+</option>
                        </select>
                    </p>
                    <p>
                        <label for="comments">How can I help you?</label>
                        <?php if ($missing && in_array('comments', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please leave a comment</span>
                        </div>
                        <?php } ?>
                        <textarea name="comments" id="comments" cols="45" rows="5" tabindex="100"><?php
                        if ($errors || $missing) {
                            echo htmlentities($comments, ENT_COMPAT, 'utf-8');
                        }
                        ?></textarea>
                    </p>
                </div>
                <div id="formSubmit">
                    <ul>
                        <li>
                          <input type="submit" name="submit" id="submit" value="Send Message" tabindex="70">
                        </li>
                    </ul>
                </div>
                    </form>

PHP

<?php
$errors = array();
$missing = array();
if (isset($_POST['submit'])) {
    $to = 'celinehalpin@hotmail.com';
    $subject = 'Web Design';
    $expected = array('name', 'company', 'email', 'phone', 'contactYou', 'interest', 'budget', 'comments');
    $required = array('name', 'email', 'contactYou', 'interest', 'budget', 'comments');
    $headers = "From: webmaster@example.com\r\n";
    $headers .= "Content-type: text/plain; charset=utf-8";
    $authenticate = '-fcelinehalpin@hotmail.com';
    require './_includes/mail_process.php';
    if ($mailSent) {
        header('Location: ' . $_SERVER['REQUEST_URI'] . '?success=1#c');
        exit;   
    }
}
?>


<?php if (($_POST && $suspect) || ($_POST && isset($errors['mailfail']))) { ?>
        <div class="globalWarning">
        <p class="warning">Sorry your mail could not be sent</p>
        </div>
<?php } elseif ($errors || $missing) { ?>
        <div class="globalWarning">
        <p class="warning">Please fix the item(s) indicated</p>
        </div>
<?php } elseif (isset($_GET['success'])) { ?>
        <div class="globalAlert">
        <p class="warning">Thank you! Your message has been sent!</p>
        </div>
<?php } ?>

<?php
$suspect = false;
$pattern = '/Content-Type:|Bcc:|Cc:/i';

function isSuspect($val, $pattern, &$suspect) {
    if (is_array($val)) {
        foreach ($val as $item) {
            isSuspect($item, $pattern, $suspect);   
        }
    } else {
        if (preg_match($pattern, $val)) {
            $suspect = true;    
        }
    }
}

isSuspect($_POST, $pattern, $suspect);

if (!$suspect) {
    foreach ($_POST as $key => $value) {
        $temp = is_array($value) ? $value : trim($value);
        if (empty($temp) && in_array($key, $required)) {
            $missing[] = $key;
            $$key = '';
        } elseif(in_array($key, $expected)) {
            $$key = $temp;
        }
    }
}

if (!$suspect && !empty($email)) {
    $validemail = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
    if ($validemail) {
        $headers .= "\r\nReply-to: $validemail";
    } else {
        $errors['email'] = true;
    }
}

if (!$suspect && !$missing && !$errors) {
    $message = '';
    foreach ($expected as $item) {
        if (isset($$item) && !empty($$item)) {
            $val = $$item;
        } else {
            $val = 'Not selected';
        }
        if (is_array($val)) {
            $val = implode(', ', $val); 
        }
        $item = str_replace(array('_', '-'), ' ', $item);
        $message .= ucfirst($item) . ": $val\r\n\r\n";
    }
    $message = wordwrap($message, 70);

    $mailSent = mail($to, $subject, $message, $headers, $authenticate);
    if (!$mailSent) {
        $errors['mailfail'] = true;
    }
}

score 1 · Answer 1 · edited May 23 '17 at 12:20

It sounds like what you need is some Javascript to do the scrolling. I don't know if you're using jQuery or not, but it makes this fairly easy. This Stack Overflow link describes a number of approaches to it, such as:

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

and calling it like:

$('#your-form').scrollView();

In addition to that, you might want to consider seeing if you can do any input validation BEFORE the form is submitted. Check out HTML5's input patterns and required fields

Kevin Lynch · Answer 2 · 2014-02-19T21:40:25.787

0

I would put some javascript within your error php so that when that loads it runs the javascript thus scrolling to the correct location based on form ID

DEMO http://jsfiddle.net/RbxVJ/2/

$(function() {
    $(document).scrollTop( $("#header").offset().top );  
});

Actually I would use pure javascript as you may not have called the jQuery library at this point

EDITED

Your PHP

DEMO http://jsfiddle.net/RbxVJ/430/

    <?php
    if(!isset($_GET['success'])) 
    {
        ?>
        <script>
        window.location.hash = '#your-form-ID';
        </script>
        <?php
    }
    ?>

edited Feb 19 '14 at 21:40

answered Feb 19 '14 at 21:28

Kevin Lynch

24,427
3
36
37

I take it `// ensure you have called the jQuery library before this point` is not required above in the pure javascript solution? – Onimusha Feb 19 '14 at 21:39
@Onimusha correct, i've now removed the comment, thanks. – Kevin Lynch Feb 19 '14 at 21:40

dsimer · Answer 3 · 2014-02-19T21:54:16.563

If you are going to be using JavaScript to solve the problem, you might as well use it to validate your form rather/in addition to PHP. It is quicker (avoiding the necessary refresh with PHP), and you should never find yourself in the position to have to reload the form in any way other than with a successful submission.

Write a function that executes when the submit button is pressed that gathers the required fields, checks them for appropriate values, stops form submission if any are missing, and then, alters the HTML with reminder text next to those that 'broke the rules' as it were.

score 0 · Answer 4 · answered Feb 19 '14 at 22:19

0

     $(document).ready(function(){
        $('#contactBox a[href="' + window.location.hash + '"]').click();
     });

answered Feb 19 '14 at 22:19

Sašo Krajnc

133
2
3
11

score 0 · Answer 5 · answered Feb 07 '18 at 00:12

I was having a similar issue. When the form on the current page was submitted I would reload the current page. My form was at the bottom of the page, but when the page was reloaded the page would be scrolled to the very top again. Reloading the current page is done with;

<form action="">

So if my form is on my index.html page, this is the same as;

<form action="index.html">

To solve the scrolling issue I gave the form element an id and then referenced this id in the 'action' attribute value, like so;

<form id="contact-form" action="#contact-form">

Again if the form is on my index.html page, this is the same as;

<form id="contact-form" action="index.html#contact-form">

If you weren't aware, when you append an element id to the end of the web page URL, it will load that web page and scroll directly to that element.

If there are any concerns with this method please chime in.

How to return to a certain section of a page when a form comes back with errors

5 Answers5