Results 1 to 3 of 3

Thread: HTML5 / PHP mailer function w/ javascript

  1. #1
    Join Date
    Jul 2014
    Laval, QC, Canada

    Lightbulb HTML5 / PHP mailer function w/ javascript

    Hello everyone,
    Its a pleasure to be here ... This is my first post . .

    I'm pretty new in the web developping process. escpecially in Php. here is my question . .
    I'll be quite honest, I have purchased an html5 template for a my website, to my knowledge I have done all modification to it, text, css, scripts, etc . . although, I'm stuck with php in my contact form.
    The reason to it is that there is Javascript involved. I have so many online tutorials on how to write a php mailer function, but non of them work and I'll be honest I'm stuck with it.

    So, dont wont someone to write me a code . . although, I'll be greatful if someone will explain me what and how should I connect all those files in between them.
    I will show you what I got . .

    This is my Html Index.html() i will later save it as a .php
        <form class="fixed" id="contact-form"  name="contact-form" method="post" action="">
        <div id="formstatus"></div>
        <input class="span8" id="name" type="text" name="name" value="" placeholder="Your name">
        <input class="span8" id="email" type="text" name="email" value="" placeholder="email">
        <input class="span8" id="subject" type="text" name="subject" value="" placeholder="subject">
        <textarea class="span8" id="message" name="message" rows="7" cols="25" placeholder="message"></textarea>
        <input id="submit" type="submit" name="submit" value="submit">
    Here is the css for alerts / elements.css()
    .alert {
            padding: 13px 15px;
            border: 1px solid #d1d1d1;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            background-color: #f8f8f8;
        .alert i {
            position: relative;
            top: 1px;
            margin-right: 7px;
            font-size: 16px;
        .alert.info {
            border: 1px solid #86cde3;
            background-color: #cce9f2;
            color: #3194b1;
        .alert.success {
            border: 1px solid #b3cda1;
            background-color: #d8f1c6;
            color: #749958;
        .alert.error {
            border: 1px solid #e1a1a1;
            background-color: #f9d9d9;
            color: #b55454;
        .alert.warning {
            border: 1px solid #d1c9ae;
            background-color: #fbf4dd;
            color: #978c68;
    Here is the layout.css
        #contact { padding-top: 120px; }
        /* Contact Info */
        .contact-info { 
            list-style: none; 
            margin-bottom: 60px;    
        .contact-info li {
            position: relative;
            padding-left: 50px;
            margin-bottom: 25px; 
        .contact-info li:last-child { margin-bottom: 0; }
        .contact-info li a { color: #5f5f5f; }
        .contact-info li i {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 32px;
            margin-right: 20px;
            background-color: #252525;
            color: #fff;
            font-size: 14px;
            line-height: 32px;
            text-align: center;
        #contact-form { 
            overflow: hidden; 
            margin: 60px 0 70px 0; 
        #contact-form fieldset { }
        label.validation-error { color: #b55454; }
        select.validation-error { border: 1px solid #a1a1a1; }
        #contact-form #formstatus {}
        #contact-form input[type="text"],
        #contact-form textarea {
            padding: 20px;
            border: none;
            border-bottom: 1px solid #252525;
            color: #5f5f5f;
            resize: none;
        #contact-form input[type="submit"] {
            border: 1px solid #252525;
            margin-top: 60px;
            background-color: transparent;
            color: #252525;
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
        #contact-form input[type="submit"]:hover { 
            background-color: #252525;
            color: #fff;
    and Here is my java script /script.js
    function handleContactForm() {
            if(typeof $.fn.validate != 'undefined'){
                    errorClass: 'validation-error', // so that it doesn't conflict with the error class of alert boxes
                    rules: {
                        name: {
                            required: true
                        email: {
                            required: true,
                            email: true
                        subject: {
                            required: true
                        message: {
                            required: true
                    messages: {
                        name: {
                            required: "Field is required!"
                        email: {
                            required: "Field is required!",
                            email: "Please enter a valid email address"
                        subject: {
                            required: "Field is required!"
                        message: {
                            required: "Field is required!"
                    submitHandler: function(form) {
                        var result;
                            type: "POST",
                            data: $(form).serialize(),
                            url: "_layout/php/send.php",
                            success: function(msg) {
                                if (msg == 'OK') {
                                    result = '<div class="alert success"><i class="fa fa-check-circle-o"></i>The message has been sent!</div>';
                                } else {
                                    result = '<div class="alert error"><i class="fa fa-times-circle"></i>' + msg + '</div>';
                            error: function() {
                                result = '<div class="alert error"><i class="fa fa-times-circle"></i>There was an error sending the message!</div>';
    I will be super greatfull if someone can help me out . . .

    Last edited by jedaisoul; 07-23-2014 at 04:05 PM. Reason: code tags added

  2. #2
    Join Date
    Mar 2007
    Code blocks wrap them in appropriate forum tags please.

    [CODE] ... [/CODE] for anything like JavaScript, CSS and text that relates to your programming.
    [HTML] ... [/HTML] for HTML
    [PHP] ... [/PHP] for PHP

    You are more likely to get a response to your query.

    *** code tags added ***
    Last edited by jedaisoul; 07-23-2014 at 04:07 PM.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Oct 2013
    change the value of action in your form tag to the php page you are making and then the mailer is pretty easy, just create a variable for each of the inputs in your form, then its as easy as using the php mail function like this.

    you asked us not to write the script for you so here is an example of something i have used
    PHP Code:
    $email_to "address@email.com";
    $email_subject "Subject of Email";

    $email_from "noreply@yoursite.org";

    // a basic if statement to check if your form has been submitted or not
    if (isset($_POST['name']) ||
    $_POST['street']) ||
    $_POST['city']) {
    $name $_POST['name']; // required
    $street $_POST['street']; // required

    $city $_POST['city'];

    // create the email message by appending descriptive information around your variables

    $email_message .= "Name: ".clean_string($name)."\n\n";
    $email_message .= "Address \n\n";

    $email_message .= "Street: ".clean_string($street)."\n\n";

    // and now the php mailer function

      // create email headers
    $headers 'From: '.$email_from."\r\n".
    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' phpversion();

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles