A help with passing parameters to PHP contact form.

[husnaintariq01]

Hello respected developers,

 

This is my HTML code:

<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="empty-space h50-md h30-xs"></div>

<form class="contact-form">
<div class="row col-xs-b30">
<div class="col-sm-6 col-xs-b30 col-sm-b0">
<div class="input-wrapper">
<input name="name" class="input" type="text">
<label>Name</label>
<span></span>
</div>
</div>
<div class="col-sm-6">
<div class="input-wrapper">
<input name="email" class="input" type="text">
<label>Email</label>
<span></span>
</div>
</div>
</div>
<div class="row col-xs-b30">
<div class="col-sm-12">
<div class="input-wrapper">
<input name="subject" class="input" type="text">
<label>Subject</label>
<span></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="input-wrapper">
<textarea name="message" class="input"></textarea>
<label>Message</label>
<span></span>
</div>
</div>
</div>

<div class="empty-space col-xs-b40"></div>

<div class="text-center">
<div class="button type-Techenotic">
SEND MESSAGE
<input type="submit"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

This is my Javascript file "Contact.form.js"

$(function() {

    "use strict";

    $('.contact-form').on("submit", function(){
        var $this = $(this);
                        
        $('.invalid').removeClass('invalid');                        
        var msg = 'The following fields should be filled:',
            successMessage = "Your email is very important to us. One of our representatives will contact you at first chance.",
            error = 0,
            pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);


        if ($.trim($('.contact-form input[name="name"]').val()) === '') {error = 1; $this.find('inpute="name"]').parent().addClass('invalid'); msg = msg + '\n - Name';}
if (!pattern.test($.trim($('.contact-formut[name="email"]').val()))) {error = 1; $this.find('inpute="email"]').parent().addClass('invalid'); msg = msg + '\n - Email';}
        if ($.trim($('.contact-form textarea[name="message"]').val()) === '') {error = 1; $this.find('textareae="message"]').parent().addClass('invalid'); msg = msg + '\n - Your Message';}

if (error){
    updateTextPopup('ERROR', msg);
}else{
var url = 'Send_mail.php',
    name = $.trim($this.find('inpute="name"]').val()),
    email = $.trim($this.find('inpute="email"]').val()),
    subject = ($this.find('inpute="subject"]').length)?$.trim($this.find('inpute="subject"]').val()):'',
    message = $.trim($this.find('textareae="message"]').val());

$.post(url,{'name':name,'email':email,'subject':subject,'message':message},function(data){
         updateTextPopup('THANK YOU!', successMessage);
         $this.append('<input type="reset" class="reset-button"/>');
         $('.reset-button').click().remove();
         $this.find('.focus').removeClass('focus }
         return false;
    });

    $(document).on('keyup', '.input-wrapper .input', function(){
        $(this).parent().removeClass('invalid');
    });

    function updateTextPopup(title, text){
        $('.text-popup .text-popup-title').text(title);
        $('.text-popup .text-popup-message').text(text);
        $('.text-popup').addClass('active');
    }

});

My problem is that I don't know how to pass the parameters to "Send_Mail.php" if anyone can help me make this PHP file I would be very thankful.

 

Thank you so much.

[ginerjm]

Hmmm... May I ask why you chose this method? As a relative newbie (since you don't know your JQ well enough) why not do your form strictly thru php? You have your html form. A simple submit button would send all the data to your script and Voila! you can clean the data and send the email from there.

[Strider64]

Trying to be nice as possible and not trying to sound like a poster on a different forum, but your HTML itself needs a lot of working itself. I believe having a firm grasp on HTML, CSS and JavaScript (Basic pure javascript) will make the learning curve easier. I agree with ginerjm to do the email form in php first then it will be simple to add JQuery or Javascript to the form.

 

Here's a contact form that I did for a Github Repository: https://github.com/Strider64/html-contact-form

        <form id="contact" action="index.php" method="post"  autocomplete="on">

            <fieldset>

                <legend><?php echo (isset($message)) ? $message : 'Contact Details'; ?></legend>

                <label for="name" accesskey="U">Your Name</label>
                <input name="name" type="text" id="name" placeholder="Enter your name" required="required" />

                <label for="email" accesskey="E">Email</label>
                <input name="email" type="email" id="email" placeholder="Enter your Email Address"  required="required" />

                <label for="phone" accesskey="P">Phone <small>(optional)</small></label>
                <input name="phone" type="tel" id="phone" size="30" placeholder="Enter your phone number" />

                <label for="website" accesskey="W">Website <small>(optional)</small></label>
                <input name="website" type="text" id="website" placeholder="Enter your website address" />

            </fieldset>

            <fieldset>

                <legend>Your Comments</legend>

                <div class="radioBlock">
                    <input type="radio" id="radio1" name="reason" value="support" checked>
                    <label class="radioStyle" for="radio1">support</label>
                    <input type="radio" id="radio2" name="reason" value="advertise">
                    <label class="radioStyle" for="radio2">advertise</label>  
                    <input type="radio" id="radio3" name="reason" value="error">
                    <label class="radioStyle" for="radio3">Report a Bug</label>    
                </div>

                <label class="textBox" for="comments">Comments</label>
                <textarea name="comments" id="comments" placeholder="Enter your comments" spellcheck="true" required="required"></textarea>             

            </fieldset>

            <input type="submit" name="submit" value="submit">

        </form>

and here's the css to the form:

form#contact {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    background-color: #ebdb8d;
    padding: 20px;
    margin: 0 auto 20px;
}

form#contact fieldset {
    border: 2px solid #2e2e2e;
    padding: 30px;
    margin-bottom: 20px;
}

form#contact fieldset legend {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1.4rem;
    color: #2e2e2e;
    padding: 0 5px;
}

form#contact fieldset label {
    float: left;
    display: block;
    width: 100%;
    max-width: 220px;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 30px;
    color: #2e2e2e;
    text-align: right;
    padding: 0 10px;
}

form#contact fieldset input {
    clear: right;
    display: block;
    width: 100%;
    max-width: 250px;
    height: 30px;
    border: none;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    color: #2e2e2e;
    padding: 0 5px;
    margin-bottom: 10px;
}

form#contact fieldset .radioBlock {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

form#contact fieldset input[type=radio] {
    display: none;
    margin: 10px;
}

form#contact fieldset input[type=radio] + label.radioStyle {
    display: inline-block;
    width: 33.33333333333%;
    height: 45px;
    margin: -2px;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
    color: #fff;
    background-color: #000;
    border: 2px solid #ffa;
    line-height: 45px;
    margin: 10px auto 0 auto;
}

form#contact fieldset input[type=radio] + label.radioStyle:hover {
    background-color: #aaa;
    color: #ffa;
}

form#contact fieldset input[type=radio]:checked + label.radioStyle {
    background-image: none;
    color: #ffa;
    background-color: #aaa;
}

form#contact fieldset label.textBox {
    clear: both;
    text-align: left;
    padding: 0;
    margin-top: 20px;
}

form#contact fieldset textArea#comments {
    resize: none;
    border: none;
    outline: none;
    clear: both;
    display: block;
    width: 100%;
    max-width: 660px;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    padding: 10px;
}

form#contact input[type=submit] {
    outline: none;
    border: none;
    display: block;
    width: 100%;
    max-width: 120px;
    height: 40px;
    cursor: pointer;
    border: 3px solid #ffa;
    background-color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    color: #fff;
    text-transform: capitalize;
    margin-left: 640px;
}

form#contact input[type=submit]:hover {
    color: #ffa;
    background-color: #aaa;
}

Granted it's not a fancy styling with CSS, but it could be easily modified to be so.  A great website site to practice CSS is : http://www.csszengarden.com/

 

HTH JOHN 

 

P.S. There are a lot of great websites and books on HTML/CSS, plus some of them are even free. 

Edited February 19, 2017 by Strider64