Jump to content
Sign in to follow this  
exceedinglife

Php bootstrap 4 email from form

Recommended Posts

Hello all,

I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4

<div class="messageSuccess"></div>
            <div class="row">
                <div class="col-md-9 mb-md-0 mb-5">
                    <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" -->
                        <div class="row ">
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtName" name="txtName" required />
                                    <label for="txtName">Your Name </label>
                                    <div class="nameError"></div>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtEmail" name="txtEmail" required />
                                    <label id="lblEmail" for="txtEmail">Your Email Address </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form mb-0">
                                    <input class="form-control" type="text" id="txtSubject" name="txtSubject"  data-error="Subject Here" required />
                                    <label for="txtSubject">Subject </label>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea>
                                    <label for="txtMessage">Your Message </label>
                                </div>
                            </div>
                        </div>                    
                    <div class="text-center text-md-left">
                        <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" />
                    </div>
                    <div class="status"></div>
                    </form>
                <!-- JavaScript Inner File Form Validation -->
    <script type="text/javascript">
        $(document).ready(function () {
            var form = $("#contact-form");
            var name = $("#txtName").val();
            var email = $("#txtEmail").val();
            var subject = $("#txtSubject").val();
            var message = $("#txtMessage").val();
            var btnSubmit = $("BtnFormSubmit");

            $(form).submit(function (event) {
                
                if (this.checkValidity() == false) {
                    $(this).addClass("was-validated");
                    event.preventDefault();
                    event.stopPropagation();
                }

                alert("Form Valid to create message");
                if (!event.isDefaultPrevented) {
                    alert("passed prevent default");
                    var url = "testemail.php";
                    // POST values 'ajax'
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $(this).serialize(),
                        success: function (data) {  // done:
                            // data = JSON object object for contactEmail.php
                            // recieve message type: success | danger
                            var messageAlert = "alert- " + data.type;
                            var messageText = data.message;
                            // Bootstrap alert box HTML
                            var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' +
                                           'data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                            // if messageAlert and messageText
                            if (messageAlert && messageText) {
                                // Put message on page in messageSuccess section.
                                $(form).find("#messageSuccess").html(alertBox);
                                // Reset the form.
                                $(form)[0].reset();
                            }
                        }
                    });
                    //return false;
                }

            });
                       

            //$(name).blur(function () {
            //})

            // Validate :inputs
            $(":input").blur(function () {
                let controlType = this.type;

                switch (controlType) {
                    case "text":
                    case "password":
                    case "textarea":
                        validateText($(this));
                        break;
                    case "email":
                        validateEmail($(this));
                        break;
                    default:
                        break;
                }
            });
            
            // each :input focusin remove existing validation messages if any.
            $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })

            /* OPTIONAL ':input' KEYDOWN validation messages remove */

            // Reset Form and remove all validation messages.
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            });
        });

        // Validate Text Function
        function validateText(control) {
            let textField = control.val();
            if (textField.length > 1) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }
        }

        // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/  )
        function validateEmail(control) {
            let textField = control.val();
            let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i;
            if (regexPattern.test(textField)) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }            
        }
    </script>
<?php

$from = 'SampleEmail@YourEmail.com';
$sendTo = 'sample@Gmail.com';
$subject = 'Your Message Subject Here';// Email Message Contact Form Fields
// Array - ($varName => Text from controls)
$controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message');
$successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.';
$errorMessage = 'There was an error submitting your message, Please try again. Or try later.';
error_reporting(E_ALL & ~E_NOTICE);
try {
	if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty');
	$emailText = "You have a new message from your contact form\n------------------------------------------------------\n";
	foreach($_POST as $key => $value) {
		if(isset($controls[$key])) {
			$emailText .= "$controls[$key]: $value\n";
		}
	}
	$headers = array('Content-Type: text/plain; charset="UTF-8";',
					 'From: ' . $from,
					 'Reply-To: ' . $from,
					 'Return-Path: ' . $from,
					);
	// Send email
	mail($sendTo, $subject, $emailText, implode("\n", $headers));
	$responseArray = array('type' => 'success', 'message' => $successMessage);
}
catch(\Exception $e) {
	$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// If AJAX request return JSON response **RARE**
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	$encodedJSON = json_encode($responseArray);
	header('Content-Type: application/json');
	echo $encodedJSON;
}
else {
	echo $responseArray['message'];
}
?>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.