How to send an e-mail (Bootstrap Form+Alertify+jQuery+PHP)

I used a Bootstrap form.

<form id="contact-form">

    <div class="form-group">
      <label for="inputName" >Name or company name</label>
      <input type="name" class="form-control" id="inputName" aria-describedby="nameHelp" placeholder="Enter name or company name" name="name" >
     </div>

    <div class="form-group">
      <label for="inputEmail">Email address</label>
      <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" name="name">
      <small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone else.</small>
    </div>

    <div class="form-group">
      <label for="message-text" class="col-form-label">Message:</label>
      <textarea name="message" class="form-control" id="inputMessage" placeholder="Type an email" value="<?= $message ?>"></textarea>
     </div>

        <button type="submit" class="btn btn-primary">Send</button>
    
</form>

I also used Alertify

    alertify.defaults.transition = "slide";
    alertify.defaults.theme.submit = "btn btn-primary";
    alertify.defaults.theme.cancel = "btn btn-danger";
    alertify.defaults.theme.input = "form-control";

And I wanted the email to be sent using jQuery so I didn’t have to change the extension of the file to php.

    (function() {
        $(document).ready(function() {
            return $('#contact-form').submit(function(e) {
                var email, message, name;
                name = document.getElementById('inputName');
                email = document.getElementById('inputEmail');
                message = document.getElementById('inputMessage');
                if (!name.value || !email.value || !message.value) {
                    alertify.error('Please check your entries');
                    return false;
                } else {
                    $.ajax({
                        method: 'POST',
                        url: 'sendemail.php',
                        data: $('#contact-form').serialize(),
                        datatype: 'json'
                    });
                    e.preventDefault();
                    $(this).get(0).reset();
                    return alertify.success('Message sent');
                }
            });
        });

    }).call(this);

And that’s the php file where the data is being processed.

<?php
$a=0;
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
console.log($name);
$formcontent="From: $name \n Message: $message";
$recipient = "myemail@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header("Location: index.html");
echo "Thank You!";
?>

The email isn’t being sent. What I did wrong? What I need to do next?, I deployed my page on a free hosting page called 000webhost with limited sent emails plan.

Is it because I didn’t configure something first? (Like something in the SMPT) I’ve watched several tutorial on how to do that and they use additional steps. Anyone that can guide me and tell me if what I am doing is either wrong or correct?

I am currently using a modular with that bootstrap form and also wanted to use alertify because I liked how it looks, if there is a better alternative feel free to tell me.

There are so many alternatives that I feel overwhelmed.

Am not a php programmer.

Setup you may need is using a SMTP(not sure if required for php).

You also need a domain name. Some hard email servers also accept emails were signed probably, otherwise they might ignore it or send it as spam.

Even if you don’t get any issue in local environment, the target might ignore the message.

Make sure you are sending from a domain you own, otherwise will fail(or worse, blacklisting).

Better way could using external API to send mails, not sue if available any, but one simple solution could be about google.

Do you think it’s just because of additional steps that I need to do or is it also because something in the code doesn’t look right?

I’ve already looked up a framework that sent emails but it didn’t seem to work, the emails are constantly being clogged up until I send an email from the website itself.

I don’t really mind them being sent as spam, at least I get them.
I’ve a domain name but it’s on a free web hosting page for testing, there is a limit number of emails that can be sent.

Didn’t you also add a form in your website/portfolio page? What did you use?
Do you have any link to help me out in what I want to achieve?

That’s the Web Hosting Page I am currently using:
https://www.000webhost.com

I am open to change everything up.

I checked the free package you mentioned in the link you provided. It says it provides email forwarding. It doesn’t help really.

But the good part is it keeps your domain. The not-well part is it’s managed, and you may not do anything non-managed by your own, you need to accept the policy and follow their way.

I cannot validate the code you did in server php side, A php expert should help you with this.

As I just had some study over php mail function, it seems it calls a native app called sendmail, please note if your host blocks this, so you will fail.

Some stuff about your code, I’m not sure if php support this form of string concat as you did ("From: $name \n Message: $message";), maybe you were about "From: ".$name. "\n Message: ".$message; instead?! (same for "From: ".$email." \r\n";)

Also try to log any error if mail raise, the log may help you to find out the issue much better.

Please note the email you send ($email) in your code, should be subset of your domain, or be allowed send from your account(e.g. try not send from abc@gmail.com while you are not or not allowed send mail as gmail.com)

I’ve never worked with managed hosted system like your case, but I believe you can make it.

Keep going on good work! happy programming.

1 Like