contact form + send mail (html + bulma + ajax + php)

Question

contact form + send mail (html + bulma + ajax + php)

573 Views Asked by Vulvi At 07 April 2025 at 04:30

I am in the process of creating a website for my company, I don't have a lot of money but a lot of time. I bought my domain names, my web host etc. in short in the site that I create I want to integrate a contact form with JS AJAX PHP on an html website. I specify that I also use BULMA for formatting. it's kind of like Bootstrap. I show you what I did. email does not send to address. i dont know how to add imap or smtp. can you help me solve my problem please?;

my .html file named index.html :

    <!-- body -->
<body>
<!-- contact -->
<div class="block">
    <footer class="footer">
        <h2 class="heading-site">Contactez-moi</h2>
        <div class="footer-contact-form">
            <form>
                <div class="field">
                    <label class="label">Votre nom</label>
                    <div class="control">
                        <input id="name" class="input" type="text" placeholder="votre prénom" name="name">
                    </div>
                </div>
                <div class="field">
                    <label class="label">Votre Prénom</label>
                    <div class="control">
                        <input id="firstname" class="input" type="text" placeholder="votre nom" name="firstname">
                    </div>
                </div>
                <div class="field">
                    <label class="label">Votre email</label>
                    <div class="control">
                        <input id="email" class="input" type="text" placeholder="[email protected]" name="email">
                    </div>
                </div>
                <div class="field">
                    <label class="label">Votre message</label>
                    <div class="control">
                        <textarea id="message" class="textarea" placeholder="Décrivez votre entreprise et expliquez en quoi puis-je vous aider" name="message"></textarea>
                    </div>
                </div>
            </form>
            <button class="button is-link" id="send_email">Envoyer !</button>
        </div>
        <div class="footer-informations">
            <p>65 rue des peupliers</p>
            <p>75015 Paris</p>
            <ul>
                <li>
                    <a href="#">
                        <i class="fab fa-facebook-square"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fab fa-twitter-square"></i>
                    </a>
                </li>
            </ul>
        </div>
    </footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="src/js/main.js"></script>
</body>
<!-- body -->

my .js file named main.js :

// send mail with ajax
$('#send_email').click(function(e){
    e.preventDefault();
    var data = {
        email: $('#email').val(),
        name: $('#name').val(),
        firstname: $('#firstname').val(),
        message: $('#message').val()
    };
    // AJAX
    $.ajax({
        url: "mail.php",
        type: 'POST',
        data: data,
        success: function(data) {
            $('#js_alert_success').css({'display' : 'block'});
            setTimeout(function(){
                $('#js_alert_success').css({'display' : 'none'});
                $('#email').val("");
                $('#name').val("");
                $('#firstname').val("");
                $('#message').val("")
            }, 3000);
        },
        error: function(data) {
            $('#js_alert_danger').css({'display' : 'block'});
            setTimeout(function(){
                $('#js_alert_danger').css({'display' : 'none'});
                $('#email').val("");
                $('#name').val("");
                $('#firstname').val("");
                $('#message').val("")
            }, 3000);
        }
    });
});

my php file who named mail.php :

    <?php

if($_POST){
  $firstname = $_POST['firstname']
  $email = $_POST['email'];
  $name = $_POST['name'];
  $message = $_POST['message'];

  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
  $headers .= "From: $name <$email>\r\nReply-to : $name <$email>\nX-Mailer:PHP";

  $subject="demande de renseignement";
  $destinataire="[email protected]";
  $body="$message";

  if(mail($destinataire,$subject,$body,$headers)) {
    $response['status'] = 'success';
    $response['msg'] = 'your mail is sent';
  } else {
    $response['status'] = 'error';
    $response['msg'] = 'Something went wrong';
  }

  echo json_encode($response);
}
?>

I

Original Q&A

There are 1 best solutions below

**ttalib** · Answer 1

Please follow the below example of mail sending and let me know if you have issue understanding any part of it

PHP section

require_once "Mail.php"; // PEAR Mail package
require_once ('Mail/mime.php'); // PEAR Mail_Mime packge

$name = $_POST['name']; // form field
$email = $_POST['email']; // form field
$message = $_POST['message']; // form field
 
 if ($_POST['submit']){

    $from = "[email protected]"; //enter your email address
    $to = "[email protected]"; //enter the email address of the contact your sending to
    $subject = "Contact Form"; // subject of your email

    $headers = array ('From' => $from,'To' => $to, 'Subject' => $subject);

    $text = ''; // text versions of email.
    $html = "<html><body>Name: $name <br> Email: $email <br>Message: $message <br></body></html>"; // html versions of email.

    $crlf = "\n";

    $mime = new Mail_mime($crlf);
    $mime->setTXTBody($text);
    $mime->setHTMLBody($html);

    //do not ever try to call these lines in reverse order
    $body = $mime->get();
    $headers = $mime->headers($headers);

    $host = "localhost"; // all scripts must use localhost
    $username = "[email protected]"; //  your email address (same as webmail username)
    $password = "23ert5"; // your password (same as webmail password)

    $smtp = Mail::factory('smtp', array ('host' => $host, 'auth' => true,
    'username' => $username,'password' => $password));

    $mail = $smtp->send($to, $headers, $body);

    if (PEAR::isError($mail)) {
        echo("<p>" . $mail->getMessage() . "</p>");
    }
    else {
        echo("<p>Message successfully sent!</p>");
    }
}

HTML Section

<form action="qservers_mail.php" method="post">
    <table border="0" style="background:#ececec" cellspacing="5">
        <tr align="left"><td>Name</td><td><input type="text" size="30" name="name"></td></tr>
        <tr align="left"><td>Email address</td><td><input type="text" size="30" name="email"></td></tr>
        <tr align="left"><td valign="top">Comments</td><td><textarea name="message" rows="6" cols="30"></textarea></td></tr>
        <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Send" name='submit'></td></tr>
    </table>
</form>

contact form + send mail (html + bulma + ajax + php)

There are 1 best solutions below

Related Questions in PHP

Related Questions in HTML

Related Questions in AJAX

Related Questions in EMAIL

Related Questions in BULMA

Trending Questions

Popular # Hahtags

Popular Questions