Sending form

Good morning,

I’m trying to make a small submission form myself via php and I’m getting this error message I’m using Wamp.

index.html

<form method="post" action="mail.php">
            <input type="text" placeholder="Enter your company name" class="box">
            <input type="text" placeholder="Enter your name" class="box">
            <input type="email" placeholder="Enter your email" class="box">
            <input type="text" placeholder="Enter your subject" class="box">
            <textarea name="message" placeholder="Enter your message"></textarea>
            <button type="submit" class="btn">Send Message</button>
        </form>

mail.php

<?php
    $retour = mail('cdevl3749@gmail.com', 'Envoi depuis la page Contact', $_POST['message'], 'From: webmaster@monsite.fr');
    if ($retour)
        echo '<p>Votre message a bien été envoyé.</p>';
    ?>

Is your localhost running a mail server?

1 Like

ah where can I see that?

If you havent installed one, the answer is no. And if the answer is no, the error is correct. It’s looking for a mail server on port 25, and not finding one.

1 Like

I installed fake sendmail and followed all the changes in the .ini and I no longer have an error message but it doesn’t work.

Do you have an idea?

maybe my code is bad?

Define “doesnt work”.
If you mean “It didnt send me an email”, what did you specify as the SMTP server in the .ini? (also, did you restart the webserver after making configuration changes?)

yes I made the modifications and restarted the server and I don’t have any error message but it doesn’t work

Is the SMTP server that you have configured, able to send emails from your monsite.fr domain? Does your sendmail have any logging options?

I had success with PHPMailer.

How can I ensure that the message “your message has been sent” remains on the same page and not on a new page?

index.php

<form action="traitement.php" method="post">
            <input required="" type="text" name="societer" placeholder="Enter your company name" class="box">
            <input required="" text name="nom" placeholder="Enter your name" class="box">
            <input required="" type="email" name="email" placeholder="Enter your email" class="box">
            <input required="" type="text" name="sujet" placeholder="Enter your subject" class="box">
            <textarea required="" name="message" placeholder="Enter your message"></textarea>
            <button type="submit" name="submit" class="btn">Send Message</button>
        </form>

traitement.php

<?php

$societerz = $_POST['societer'];
$nomz = $_POST['nom'];
$emailz = $_POST['email'];
$sujetz = $_POST['sujet'];
$messagez = $_POST['message'];

$messagez = "Societer :".$societerz."\n"." Nom : ".$nomz."\n"." Email : ".$emailz."\n"." message : ".$messagez;

//Import PHPMailer classes into the global namespace
//These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

//Create an instance; passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->isSMTP();                                            //Send using SMTP
    $mail->Host       = 'smtp.gmail.com';                     //Set the SMTP server to send through
    $mail->SMTPAuth   = true;                                   //Enable SMTP authentication
    $mail->Username   = 'xxxxxxx@gmail.com';                     //SMTP username
    $mail->Password   = 'xxxxxxxxxxxxxxxxx';                               //SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port       = 465;                                    //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`

    //Recipients
    $mail->setFrom('from@example.com', 'Mailer');
    $mail->addAddress('cdevil3749999@gmail.com');     //Add a recipient

    //Content
    $mail->isHTML(true);                                  //Set email format to HTML
    $mail->Subject = 'Here is the subject';
    $mail->Body    = $messagez;
    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

Submit the form using Ajax instead of via a standard form submission, have the PHP code return a message to say whether the email was submitted, and have your calling Javascript display that message on the original page.

1 Like

Thank you.
I understood how to put it into practice I am a novice

I would recommend you use, Htmx and avoid yourself a lot of javascript.

Here is a nice introduction to it. Htmx Introduction

Good luck

3 posts were split to a new topic: Htmx, useful or bloat?

Good morning,

my message is below my footer and I would like it to be above my contact form or below

echo "<div class='success'>We thank you for your message. We will do everything we can to respond to you as quickly as possible.</di>";

here is my code can you help me?

 <section class="contact" id="contact">
        <div class="heading">
            <span>CONTACT</span>
            <h3>Response within 24 hours of receipt</h3>
        </div>

        <form action="" method="post">
            <input required="" type="text" name="societer" placeholder="Enter your company name" class="box">
            <input required="" text name="nom" placeholder="Enter your name" class="box">
            <input required="" type="email" name="email" placeholder="Enter your email" class="box">
            <input required="" type="text" name="sujet" placeholder="Enter your subject" class="box">
            <textarea required="" name="message" placeholder="Enter your message"></textarea>
            <button type="submit" name="submit" class="btn">Send Message</button>
        </form>
    </section>

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

if(isset($_POST['submit']))
{
    $societer = $_POST['societer'];
    $nom = $_POST['nom'];
    $email = $_POST['email'];
    $sujet = $_POST['sujet'];
    $message = $_POST['message'];

    require 'PHPMailer/src/Exception.php';
    require 'PHPMailer/src/PHPMailer.php';
    require 'PHPMailer/src/SMTP.php';

//Create an instance; passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->isSMTP();                                            //Send using SMTP
    $mail->Host       = 'smtp.gmail.com';                     //Set the SMTP server to send through
    $mail->SMTPAuth   = true;                                   //Enable SMTP authentication
    $mail->Username   = 'cdevl3749@gmail.com';                     //SMTP username
    $mail->Password   = 'gupxmmenazkkdpxm';                               //SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port       = 465;                                    //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`

    //Recipients
    $mail->setFrom('from@example.com', 'Mailer');
    $mail->addAddress('cdevl3749@gmail.com');     //Add a recipient

    //Content
    $mail->isHTML(true);                                  //Set email format to HTML
    $mail->Subject = 'Email received from Billow Avocats';
    $mail->Body    = "Sender Societer - $societer <br> Sender Name - $nom <br> Sender Email - $email <br> message - $message";
    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    $mail->send();
    echo "<div class='succes'>We thank you for your message. We will do everything we can to respond to you as quickly as possible.</di>";
} catch (Exception $e) {
    echo "<div class='alert'>Message Could't Send </div>";
}

    
}

?>

css

 /* alerts */
    .alert,
    .success {
        width: 400px;
        text-align: center;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: whitesmoke;
        padding: px 0;
    }

    .alert {
        background-color: rgb(252, 59, 59);
    }

    .success {
        background-color: rgb(44, 158, 24);
    }
}

The code for any page should be laid out in this general order -

  1. initialization
  2. post method form processing
  3. get method business logic - get/produce data needed to display the page
  4. html document

Upon successful completion of the post method form processing code you need to perform a redirect to the exact same URL of the current page to cause a get request for that page. This will prevent the browser from trying to resubmit the form data should that page get browsed back to or reloaded. To display a one-time success message, store it or a flag value in a session variable, then test for that session variable, display the success message, and clear that session variable at the appropriate location in the html document.

1 Like

I understood my problem is to put it in place

You are not doing an ajax request. So let’s follow @m_hurtley code. The only thing is you don’t need the json response. Your server code is good as it is.

So here is what you client side looks like. Don’t forget to change “/submit” to your endpoint.

<html>

<body>
    <form id="myform" method="post">
        <p>Company name: <input required="" type="text" name="societer" placeholder="Enter your company name"
                class="box"></p>
        <p>Name: <input required="" text name="nom" placeholder="Enter your name" class="box"></p>
        <p>Email: <input required="" type="email" name="email" placeholder="Enter your email" class="box"></p>
        <p>Subject: <input required="" type="text" name="subject" placeholder="Enter your subject" class="box"></p>
        <p>Message: <textarea required="" name="message" placeholder="Enter your message"></textarea></p>
        <p><button type="submit" id="buttonname" class="btn">Send Message</button></p>
    </form>

    <div id="emailnotice"></div>

    <script>
        document.getElementById("buttonname").addEventListener("click", (e) => {
            e.preventDefault(); // Prevent default form submission behavior

            // Show a loading indicator or temporary message
            document.getElementById("emailnotice").textContent = "Sending...";

            const formData = new FormData(document.getElementById("myform"));

           // doing ajax call here to your endpoint ....
            // change /submit for your end point ...
            // I think it is traitement.php
            fetch("/submit", {
                method: "POST",
                body: formData
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Network response was not ok");
                    }
                    return response.text();
                })
                .then(data => {
                    console.log("Data: " + data)
                    document.getElementById("emailnotice").classList.add("success");
                    document.getElementById("emailnotice").innerHTML = data;
                })

        });
    </script>
</body>

</html>

Here some images of the code running …

image

image

1 Like

I receive the message below the footer perhaps the css?

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    letter-spacing: 1px;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    overflow-x: hidden;
}

.home {
    background: linear-gradient(to top, rgba(0, 0, 0, .5)50%, rgba(0, 0, 0, .5)100%), url(../images/home.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    height: 40rem;
    position: relative;
}

header {
    display: flex;
    align-items: center;
    padding: 20px 50px;
}

header .logo {
    color: #fff;
    font-size: 1.5rem;
    margin-right: auto;
}

header .logo span {
    color: #ec9f68;
}

header .menubtn {
    cursor: pointer;
    margin-right: 15px;
    display: none;
}

header .menubtn img {
    filter: invert(1);
}

header .navbar a {
    color: #fff;
    text-transform: capitalize;
    margin-right: 15px;
    position: relative;
}

header .navbar a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0;
    height: 3px;
    background: #ec9f68;
    transition: .2s linear;
}

header .navbar a:hover::before {
    width: 100%;
}

.btn {
    padding: 10px 15px;
    background: #ec9f68;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: capitalize;
}

.home .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 7rem;
}

.home .wrapper h1 {
    color: #fff;
    font-size: 2rem;
}

.home .wrapper p {
    color: #fff;
    font-size: 1rem;
    padding: 10px 0;
}

.buttons {
    margin-top: 1rem;
}

.btn2 {
    padding: 8px 15px;
    color: #ec9f68;
    border: 2px solid #fff;
}

.status {
    padding: 0 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
}

.status .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap: 1.5rem;
}

.status .box-container .box {
    padding: 20px;
    text-align: center;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}

.status .box-container .box h2 {
    font-size: 3rem;
    color: #202022;
}

.status .box-container .box p {
    padding: 10px 0;
    font-size: 1rem;
}

.about {
    padding: 20px 50px;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.about .image {
    font-size: 1 1 28rem;
    text-align: center;
    position: relative;
}

.about .image::before {
    content: '';
    position: absolute;
    z-index: -1;
    background: #ec9f68;
    height: 10rem;
    width: 10rem;
    top: -15px;
    left: -15px;
}

.about .content {
    flex: 1 1 28rem;
}

.about .content span {
    font-size: 15px;
    color: #ec9f68;
    padding: 20px;
}

.about .content h1 {
    font-size: 2rem;
    color: #202022;
}

.about .content p {
    padding: 1rem 0;
}

.about .content .award {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}

.about .content .award .box {
    padding: .8rem;
    text-align: center;
    background: #eee;
    border: 1px solid #aaa;
}

.services {
    padding: 20px 50px;
    margin-top: 2rem;
}

.heading {
    text-align: center;
}

.heading span {
    font-size: 15px;
    color: #ec9f68;
}

.heading h3 {
    font-size: 2rem;
    color: #202022;
    font-weight: 500;
}

.services .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    padding: .5rem;
    background: #fff;
}

.services .box-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    background: #ec9f68;
    height: 5rem;
    width: 5rem;
    top: -10px;
    left: -10px;
}

.services .box-container::after {
    content: '';
    position: absolute;
    z-index: -1;
    background: #ec9f68;
    height: 5rem;
    width: 5rem;
    bottom: -10px;
    right: -10px;
}

.services .box-container .box {
    padding: 1rem;
    background: #fff;
    border: 1px solid #aaa;
}

.services .box-container .box h1 {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 400;
    color: #202022;
}

.services .box-container .box h1 span {
    font-size: 2rem;
    color: #ec9f68;
}

.services .box-container .box p {
    font-size: 14px;
    font-weight: 300;
    padding: .5rem 0;
}

.services .box-container .box a {
    display: flex;
    align-items: center;
    color: #202022;
    margin-top: 0.4rem;
}

.reviews {
    padding: 20px 50px;
    margin-top: 1.5rem;
}

.reviews .clients-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.reviews .clients-reviews .review {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
}

.review .info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.review .info img {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

.review .info .row h1 {
    font-size: 1.3rem;
    font-weight: 500;
}

.review .info .row span {
    font-size: 12px;
    color: #ec9f68;
}

.contact {
    background: linear-gradient(to top, rgba(0, 0, 0, .5)50%, rgba(0, 0, 0, .5)100%), url(../images/bg-1.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contact span {
    color: #ec9f68;
    font-size: 12px;
    font-weight: 500;
}

.contact h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
}

.contact form {
    display: flex;
    flex-direction: column;
    width: 450px;
    margin-top: 10px;
}

.contact form .box {
    padding: 10px 5px;
    font-size: 15px;
    background: #fff;
    outline: none;
    border: none;
    margin: 3px 0;
}

.contact form textarea {
    height: 8rem;
    resize: none;
    outline: none;
    margin-bottom: 12px;
    padding: 10px 5px;
    font-size: 15px;
}

.contactinfo {
    padding: 20px 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.contactinfo .box {
    padding: 1.5rem;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contactinfo .box span {
    color: #ec9f68;
    padding: 10px 0;
}

.footer {
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.footer a {
    color: #202022;
    font-size: 18px;
}

.copy {
    background: #ec9f68;
    padding: 8px;
    text-align: center;
    color: #fff;
}

.gotop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 1.9rem;
    width: 1.9rem;
    line-height: 1.9rem;
    border-radius: 3px;
    background: #ec9f68;
    text-align: center;
    display: none;
}

.gotop img {
    height: 1.5rem;
    width: 1.5rem;
    object-fit: cover;
    filter: invert(1);
}

.gotop.active {
    display: block;
}

/* responsive */
@media (max-width: 769px) {
    .home {
        height: 25rem;
    }

    .home header {
        padding: 10px;
    }

    header .btn {
        display: none;
    }

    header .menubtn {
        display: block;
    }

    header .navbar {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: .2s linear;
    }

    header .navbar.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    header .navbar a {
        display: block;
        color: #202022;
        font-size: 18px;
        margin: 10px 0;
    }

    header .navbar a::before {
        display: none;
    }

    .home .wrapper {
        text-align: center;
        margin-top: 8rem;
    }

    .home .wrapper h1 {
        font-size: 1.2rem;
    }

    .home .wrapper p {
        font-size: .8rem;
        width: 90%;
    }

    .home .status {
        display: none;
    }

    .about,
    .services,
    .reviews,
    .contactinfo,
    .footer {
        padding: 10px;
    }

    .about {
        margin-top: 2rem;
    }

    .about .image img {
        width: 100%;
        object-fit: cover;
    }

    .about .image::before {
        display: none;
    }

    .contact form {
        width: 90%;
    }

    .footer a {
        font-size: 12px;
    }

    /* alerts */
    .alert,
    .success {
        width: 400px;
        text-align: center;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: whitesmoke;
        padding: px 0;
    }

    .alert {
        background-color: rgb(252, 59, 59);
    }

    .success {
        background-color: rgb(44, 158, 24);
    }
}

Yes. It could be. Try to run it withous css, and post here the result

1 Like

I have the same result if I remove the css the message is sent to my email and the message is always displayed below the footer