Form data tries to resend after I refresh the webpage

Question

I don't really use PHP and doing this is way out of my league. I set up XAMPP and its "sendmail" folder properly so I can send emails from a website I made. The email gets sent towards the person but the thing is that whenever I tried to refresh after sending the mail for the 1st time, the webpage tells me "The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated". So if I click continue, the page refreshes but the mail gets sent again.

I tried using a header to redirect but it doesn't really work. I get an error which states "Cannot modify header information - headers already sent". I also tried some AJAX function without success. I can't really get my head wrapped around this, I'd really appreciate some help right now

This is my form HTML

        <form method="post" action="#" class="contact-form" autocomplete="off">
            <div class="row">
                <div class="col span-1-of-3">
                    <label for="name">Name</label>
                </div>
                <div class="col span-2-of-3">
                    <input type="text" name="name" id="name" placeholder="Your name" required>
                </div>
            </div>



            <div class="row">
                <div class="col span-1-of-3">
                    <label for="email">Email</label>
                </div>
                <div class="col span-2-of-3">
                    <input type="email" name="email" id="email" placeholder="Your email" required>
                </div>
            </div>




            <div class="row">
                <div class="col span-1-of-3">
                    <label for="find-us">How did you find about us?</label>
                </div>
                <div class="col span-2-of-3">
                    <select name="find-us" id="find-us">
                        <option value="friends" selected>Friends</option>
                        <option value="search">Seach Engine</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>


            <div class="row">
                <div class="col span-1-of-3">
                    <label>Newsletter</label>
                </div>
                <div class="col span-2-of-3">
                    <input type="checkbox" name="newsletter" id="newsletter" checked>Yes, please
                </div>
            </div>


            <div class="row">
                <div class="col span-1-of-3">
                    <label>Mesaj</label>
                </div>
                <div class="col span-2-of-3">
                    <textarea name="message" placeholder="Your message" require></textarea>
                </div>
            </div>


            <div class="row">
                <div class="col span-1-of-3">
                    <label>&nbsp;</label>
                </div>
                <div class="col span-2-of-3 btn-send">
                    <input name="sendmail" type="submit" value="Send!"> 
                </div>
            </div>
        </form>
       
    </div>

And this is the PHP code I use:

 <?php
                if(isset($_POST['sendmail'])){
                    mail($_POST['email'], 'Store' , 'Thanks for the message '.$_POST['name'].' !');
                    echo "Sent";
                }else{
                    echo "Fail";
                } 
                
            ?>

Answer 1

You need to redirect the user to another page, or the same page, using the POST/REDIRECT/GET pattern to avoid this. Sending a 303 HTTP response will tell the browser to replace that page in its history and avoid re-sending the posted data.

if (mysqli_query($connection, $register)) {
    if(isset($_POST['sendmail'])){
        mail($_POST['email'], 'Store' , 'Thanks for the message '.$_POST['name'].' !');
        header('Location: index.php', true, 303);
        exit;
    }
    else {
        // Handle error
    }
}

This is a very basic example. You will want to add error checking/handling for the call to mail() since it may fail. You should also have some kind of messaging to let the user know the email was sent.