www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML5 / PHP mailer function w/ javascript

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

    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
    Code:
        <form class="fixed" id="contact-form"  name="contact-form" method="post" action="">
    
        <fieldset>
    
        <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">
    
        </fieldset>
        </form>
    Here is the css for alerts / elements.css()
    Code:
    .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
    Code:
        #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; }
    
        input.validation-error,
        textarea.validation-error,
        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
    Code:
    function handleContactForm() {
    
            if(typeof $.fn.validate != 'undefined'){
    
                $('#contact-form').validate({
                    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;
                        $(form).ajaxSubmit({
                            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>';
                                    $('#contact-form').clearForm();
                                } else {
                                    result = '<div class="alert error"><i class="fa fa-times-circle"></i>' + msg + '</div>';
                                }
                                $("#formstatus").html(result);
    
                            },
                            error: function() {
    
                                result = '<div class="alert error"><i class="fa fa-times-circle"></i>There was an error sending the message!</div>';
                                $("#formstatus").html(result);
    
                            }
                        });
                    }
                });
    
            }
    
        }
    I will be super greatfull if someone can help me out . . .

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

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,507
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Oct 2013
    Posts
    26
    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:
        // EDIT THE 3 LINES BELOW AS REQUIRED
     
        
    $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']) ||
     
            isset(
    $_POST['street']) ||
     
            isset(
    $_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();
     
      @
    mail($email_to$email_subject$email_message$headers); 

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