Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Javascript and JS frameworks (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=186)
-   -   Contact form issue (http://www.dreamweaverclub.com/forum//showthread.php?t=42845)

rvanrijen 04-20-2012 10:49 AM

Contact form issue
 
The company I'm currently temporarily working for as an intern recently purchased several website templates, two of which they asked me to edit and customize for them. This generally wasn't much of a problem, but because I'm not as into PHP and/or Javascript, the contact forms gave me some trouble.

In this particular form the contact form is linked to a Javascript file, where according to the helpdesk of the template company all I had to do was put in our own email address. The problem however is that when the contact form is filled out and sent, the email either arrives in the spam box of my own hotmail account (which I was just testing it with), or not at all in my work email inbox.

Any suggestions as to what exactly I should do to make it show up in my inbox, not as spam? All help will be very much appreciated.


Here's the HTML code:
HTML Code:

<article class="grid_8">
                                <h1 class="title">Contact</h1>
                                <form action="js/forms.js" method="post" id="contact-form" class="conact-form">
                                      <fieldset>
                                        <div class="wrapper">
                                            <div class="success"> Contactformulier verzonden! <br> <strong class="color-3">We zullen spoedig contact met u opnemen.</strong> </div>
                                        </div>
                                        <div class="field">
                                            <label class="name">
                                              <input type="text" value="Naam">
                                              <span class="error">*Dit is geen geldige naam.</span> <span class="empty">*Dit veld is verplicht.</span>
                                            </label>
                                        </div>
                                        <div class="field">
                                            <label class="email">
                                              <input type="text" value="E-mail">
                                              <span class="error">*Dit is geen geldig email adres.</span> <span class="empty">*Dit veld is verplicht.</span>
                                            </label>
                                        </div>
                                        <div class="area">
                                            <label class="message">
                                              <textarea>Bericht</textarea>
                                              <span class="error">*Dit bericht is te kort.</span> <span class="empty">*Dit veld is verplicht.</span>
                                            </label>
                                        </div>
                                        <div class="clear"></div>
                                        <div class="buttons-wrapper">
                                            <a class="button-2" data-type="reset"><strong></strong><em></em><span>Reset</span></a>
                                            <a class="button-2" data-type="submit"><strong></strong><em></em><span>Verzenden</span></a>
                                        </div>
                                      </fieldset>
                              </form>
                            </article>


And here's the code from the forms.js file:
Code:

;(function($){
        $.fn.forms=function(o){
                return this.each(function(){
                        var th=$(this)
                                ,_=th.data('forms')||{
                                        errorCl:'error',
                                        emptyCl:'empty',
                                        invalidCl:'invalid',
                                        notRequiredCl:'notRequired',
                                        successCl:'success',
                                        successShow:'4000',
                                        mailHandlerURL:'bin/MailHandler.php',
                                        ownerEmail:'rrijen@goudenheren.nl',
                                        stripHTML:true,
                                        smtpMailServer:'localhost',
                                        targets:'input,textarea',
                                        controls:'a[data-type=reset],a[data-type=submit]',
                                        validate:true,
                                        rx:{
                                                ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                                                ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                                                ".email":{rx:/^(("[\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,target:'input'},
                                                ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                                                ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                                                ".message":{rx:/.{20}/,target:'textarea'}
                                        },
                                        preFu:function(){
                                                _.labels.each(function(){
                                                        var label=$(this),
                                                                inp=$(_.targets,this),
                                                                defVal=inp.val(),
                                                                trueVal=(function(){
                                                                                        var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                                                                        return defVal==''?defVal:tmp
                                                                                })()
                                                        trueVal!=defVal
                                                                &&inp.val(defVal=trueVal||defVal)
                                                        label.data({defVal:defVal})                                                               
                                                        inp
                                                                .bind('focus',function(){
                                                                        inp.val()==defVal
                                                                                &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                                                })
                                                                .bind('blur',function(){
                                                                        _.validateFu(label)
                                                                        if(_.isEmpty(label))
                                                                                inp.val(defVal)
                                                                                ,_.hideErrorFu(label.removeClass(_.invalidCl))                                                                                       
                                                                })
                                                                .bind('keyup',function(){
                                                                        label.hasClass(_.invalidCl)
                                                                                &&_.validateFu(label)
                                                                })
                                                        label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                                                })
                                                _.success=$('.'+_.successCl,_.form).hide()
                                        },
                                        isRequired:function(el){                                                       
                                                return !el.hasClass(_.notRequiredCl)
                                        },
                                        isValid:function(el){                                                       
                                                var ret=true
                                                $.each(_.rx,function(k,d){
                                                        if(el.is(k))
                                                                ret=d.rx.test(el.find(d.target).val())                                                                               
                                                })
                                                return ret                                                       
                                        },
                                        isEmpty:function(el){
                                                var tmp
                                                return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                                        },
                                        validateFu:function(el){                                                       
                                                el.each(function(){
                                                        var th=$(this)
                                                                ,req=_.isRequired(th)
                                                                ,empty=_.isEmpty(th)
                                                                ,valid=_.isValid(th)                                                               
                                                       
                                                        if(empty&&req)
                                                                _.showEmptyFu(th.addClass(_.invalidCl))
                                                        else
                                                                _.hideEmptyFu(th.removeClass(_.invalidCl))
                                                       
                                                        if(!empty)
                                                                if(valid)
                                                                        _.hideErrorFu(th.removeClass(_.invalidCl))
                                                                else
                                                                        _.showErrorFu(th.addClass(_.invalidCl))                                                               
                                                })
                                        },
                                        getValFromLabel:function(label){
                                                var val=$('input,textarea',label).val()
                                                        ,defVal=label.data('defVal')                                                               
                                                return label.length?val==defVal?'nope':val:'nope'
                                        }
                                        ,submitFu:function(){
                                                _.validateFu(_.labels)                                                       
                                                if(!_.form.has('.'+_.invalidCl).length)
                                                        $.ajax({
                                                                type: "POST",
                                                                url:_.mailHandlerURL,
                                                                data:{
                                                                        name:_.getValFromLabel($('.name',_.form)),
                                                                        email:_.getValFromLabel($('.email',_.form)),
                                                                        phone:_.getValFromLabel($('.phone',_.form)),
                                                                        fax:_.getValFromLabel($('.fax',_.form)),
                                                                        state:_.getValFromLabel($('.state',_.form)),
                                                                        message:_.getValFromLabel($('.message',_.form)),
                                                                        owner_email:_.ownerEmail,
                                                                        stripHTML:_.stripHTML
                                                                },
                                                                success: function(){
                                                                        _.showFu()
                                                                }
                                                        })                       
                                        },
                                        showFu:function(){
                                                _.success.slideDown(function(){
                                                        setTimeout(function(){
                                                                _.success.slideUp()
                                                                _.form.trigger('reset')
                                                        },_.successShow)
                                                })
                                        },
                                        controlsFu:function(){
                                                $(_.controls,_.form).each(function(){
                                                        var th=$(this)
                                                        th
                                                                .bind('click',function(){
                                                                        _.form.trigger(th.data('type'))
                                                                        return false
                                                                })
                                                })
                                        },
                                        showErrorFu:function(label){
                                                label.find('.'+_.errorCl).slideDown()
                                        },
                                        hideErrorFu:function(label){
                                                label.find('.'+_.errorCl).slideUp()
                                        },
                                        showEmptyFu:function(label){
                                                label.find('.'+_.emptyCl).slideDown()
                                                _.hideErrorFu(label)
                                        },
                                        hideEmptyFu:function(label){
                                                label.find('.'+_.emptyCl).slideUp()
                                        },
                                        init:function(){
                                                _.form=_.me                                               
                                                _.labels=$('label',_.form)

                                                _.preFu()
                                               
                                                _.controlsFu()
                                                                                                               
                                                _.form
                                                        .bind('submit',function(){
                                                                if(_.validate)
                                                                        _.submitFu()
                                                                else
                                                                        _.form[0].submit()
                                                                return false
                                                        })
                                                        .bind('reset',function(){
                                                                _.labels.removeClass(_.invalidCl)                                                                       
                                                                _.labels.each(function(){
                                                                        var th=$(this)
                                                                        _.hideErrorFu(th)
                                                                        _.hideEmptyFu(th)
                                                                })
                                                        })
                                                _.form.trigger('reset')
                                        }
                                }
                        _.me||_.init(_.me=th.data({forms:_}))
                        typeof o=='object'
                                &&$.extend(_,o)
                })
        }
})(jQuery)
$(function(){
        $('#contact-form').forms({
                ownerEmail:'rrijen@goudenheren.nl'
        })
})


jmichae3 04-23-2012 11:46 PM

if you are the only receiving contact, add who is in ownerEMail as a contact in your email client or webmail. this should prevent it from ending up in the spambox.

javascript doesn't recognize \w in regex. it is NOT fancy. if you want to see what it supports, read the ecma-262 document javascript/ecmascript 262 version 5.1 reference
and look in the regex BNF grammar section near the back. you can get a printed version of this document by contacting ORDER ECMASCRIPT 262 BOOKLET

jmichae3 04-23-2012 11:47 PM

by the way, some *nix folk have their browsers' javascript disabled.

rvanrijen 04-25-2012 10:47 AM

Quote:

Originally Posted by jmichae3 (Post 204005)
if you are the only receiving contact, add who is in ownerEMail as a contact in your email client or webmail. this should prevent it from ending up in the spambox.

javascript doesn't recognize \w in regex. it is NOT fancy. if you want to see what it supports, read the ecma-262 document javascript/ecmascript 262 version 5.1 reference
and look in the regex BNF grammar section near the back. you can get a printed version of this document by contacting ORDER ECMASCRIPT 262 BOOKLET

Doesn't ownerEmail represent the email your contact form emails will be sent to in the first place? What the contract form currently does is show whatever email address is filled in on the form as the original sender..

Would it be possible to set a standard 'sender' email address, and add this to the email client's whitelist/contact list? If so, how?

jmichae3 04-25-2012 08:39 PM

if you already know who the sender is, you can easily add them to your contacts. the emails will be sent through the email address you gave in ownerEmail field. (by the way, not a good idea to post email addresses on web sites like these, spammers harvest these for email addresses including mailto: links).

I already told you, add that (ownerEmail) rrijen email address to your contacts. that is your sending email address if I am not mistaken.

I think your form does more than that. it lists an smtp server. so it actually sends the email.

rvanrijen 04-26-2012 08:20 AM

Quote:

Originally Posted by jmichae3 (Post 204072)
if you already know who the sender is, you can easily add them to your contacts. the emails will be sent through the email address you gave in ownerEmail field. (by the way, not a good idea to post email addresses on web sites like these, spammers harvest these for email addresses including mailto: links).

I already told you, add that (ownerEmail) rrijen email address to your contacts. that is your sending email address if I am not mistaken.

I think your form does more than that. it lists an smtp server. so it actually sends the email.

We generally don't know who the sender is - the sender displayed on the arrived email is the email address filled in on the contact form, and because the website is meant to attract clients and encourage them to send in an application, we don't know their information in advance.

I don't have too much experience with Javascript (or much PHP for that matter), and apologize for not being able to be as understanding as I'd like to be.

jmichae3 04-27-2012 06:18 AM

if this is jquery, what API is this?

jmichae3 04-27-2012 06:18 AM

or where did you get your example from?

jmichae3 04-27-2012 06:29 AM

well, that "sender" in your form will become the form's "from". you can't send an email WITHOUT having from "FROM" address.

jmichae3 04-27-2012 09:02 AM

Code:

;(function($){
    $.fn.forms=function(o){
        return this.each(function(){
            var th=$(this)
                ,_=th.data('forms')||{
                    errorCl:'error',
                    emptyCl:'empty',
                    invalidCl:'invalid',
                    notRequiredCl:'notRequired',
                    successCl:'success',
                    successShow:'4000',
                    mailHandlerURL:'bin/MailHandler.php',
                    ownerEmail:'rrijen@goudenheren.nl',
                    stripHTML:true,
                    smtpMailServer:'localhost',
                    targets:'input,textarea',
                    controls:'a[data-type=reset],a[data-type=submit]',
                    validate:true,
                    rx:{
                        ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".email":{rx:/^([^\x80-\xff\(\)<>@,;:\"\.\[\]\x00-\x20]+|\"([^\x80-\xff"\\x0d]*|\[\x00-\x7f])*\")(\.([^\x80-\xff\(\)<>@,;:\"\.\[\]\x00-\x20]+|\"([^\x80-\xff"\\x0d]*|\[\x00-\x7f])*\"))*\@([^\x80-\xff\(\)<>@,;:\"\.\[\]\x00-\x20]+|\[([^\x80-\xff\[\]\\x0d]*|\[\x00-\x7f])*\])(\.([^\x80-\xff\(\)<>@,;:\"\.\[\]\x00-\x20]+|\[([^\x80-\xff\[\]\\x0d]*|\[\x00-\x7f])*\]))*/i,target:'input'},
                        ".phone":{rx:/^\+?([0-9][[0-9]\-\+\(\) ]{5,}[0-9]$)/,target:'input'},
                        ".fax":{rx:/^\+?([0-9][[0-9]\-\+\(\) ]{5,}[0-9]$)/,target:'input'},
                        ".message":{rx:/.{20}/,target:'textarea'}
                    },
                    preFu:function(){
                        _.labels.each(function(){
                            var label=$(this),
                                inp=$(_.targets,this),
                                defVal=inp.val(),
                                trueVal=(function(){
                                            var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                            return defVal==''?defVal:tmp
                                        })()
                            trueVal!=defVal
                                &&inp.val(defVal=trueVal||defVal)
                            label.data({defVal:defVal})                               
                            inp
                                .bind('focus',function(){
                                    inp.val()==defVal
                                        &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                })
                                .bind('blur',function(){
                                    _.validateFu(label)
                                    if(_.isEmpty(label))
                                        inp.val(defVal)
                                        ,_.hideErrorFu(label.removeClass(_.invalidCl))                                           
                                })
                                .bind('keyup',function(){
                                    label.hasClass(_.invalidCl)
                                        &&_.validateFu(label)
                                })
                            label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                        })
                        _.success=$('.'+_.successCl,_.form).hide()
                    },
                    isRequired:function(el){                           
                        return !el.hasClass(_.notRequiredCl)
                    },
                    isValid:function(el){                           
                        var ret=true
                        $.each(_.rx,function(k,d){
                            if(el.is(k))
                                ret=d.rx.test(el.find(d.target).val())                                       
                        })
                        return ret                           
                    },
                    isEmpty:function(el){
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    },
                    validateFu:function(el){                           
                        el.each(function(){
                            var th=$(this)
                                ,req=_.isRequired(th)
                                ,empty=_.isEmpty(th)
                                ,valid=_.isValid(th)                               
                           
                            if(empty&&req)
                                _.showEmptyFu(th.addClass(_.invalidCl))
                            else
                                _.hideEmptyFu(th.removeClass(_.invalidCl))
                           
                            if(!empty)
                                if(valid)
                                    _.hideErrorFu(th.removeClass(_.invalidCl))
                                else
                                    _.showErrorFu(th.addClass(_.invalidCl))                               
                        })
                    },
                    getValFromLabel:function(label){
                        var val=$('input,textarea',label).val()
                            ,defVal=label.data('defVal')                               
                        return label.length?val==defVal?'nope':val:'nope'
                    }
                    ,submitFu:function(){
                        _.validateFu(_.labels)                           
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",
                                url:_.mailHandlerURL,
                                data:{
                                    name:_.getValFromLabel($('.name',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    phone:_.getValFromLabel($('.phone',_.form)),
                                    fax:_.getValFromLabel($('.fax',_.form)),
                                    state:_.getValFromLabel($('.state',_.form)),
                                    message:_.getValFromLabel($('.message',_.form)),
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })           
                    },
                    showFu:function(){
                        _.success.slideDown(function(){
                            setTimeout(function(){
                                _.success.slideUp()
                                _.form.trigger('reset')
                            },_.successShow)
                        })
                    },
                    controlsFu:function(){
                        $(_.controls,_.form).each(function(){
                            var th=$(this)
                            th
                                .bind('click',function(){
                                    _.form.trigger(th.data('type'))
                                    return false
                                })
                        })
                    },
                    showErrorFu:function(label){
                        label.find('.'+_.errorCl).slideDown()
                    },
                    hideErrorFu:function(label){
                        label.find('.'+_.errorCl).slideUp()
                    },
                    showEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideDown()
                        _.hideErrorFu(label)
                    },
                    hideEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideUp()
                    },
                    init:function(){
                        _.form=_.me                       
                        _.labels=$('label',_.form)

                        _.preFu()
                       
                        _.controlsFu()
                                                       
                        _.form
                            .bind('submit',function(){
                                if(_.validate)
                                    _.submitFu()
                                else
                                    _.form[0].submit()
                                return false
                            })
                            .bind('reset',function(){
                                _.labels.removeClass(_.invalidCl)                                   
                                _.labels.each(function(){
                                    var th=$(this)
                                    _.hideErrorFu(th)
                                    _.hideEmptyFu(th)
                                })
                            })
                        _.form.trigger('reset')
                    }
                }
            _.me||_.init(_.me=th.data({forms:_}))
            typeof o=='object'
                &&$.extend(_,o)
        })
    }
})(jQuery)
$(function(){
    $('#contact-form').forms({
        ownerEmail:'rrijen@goudenheren.nl'
    })
})

I rewrote your regexes. they should work better. but I am surprised that it actually works to use a js file as your action in a form. I have never heard of that. php maybe, but not js, not without using GET and writing my own URL argument parser (which I have already done). I guess you have done it successfully and gotten stuff in your spambox though.

I can fix the regexes, but that's maybe all I can do. I hope the regex for email works. the regex you had for email validation had some badly written character classes: - should be at the END of the character class if you are trying to include a - character. and like I sais, JS doesn't recognize \s or \w I don't think, but I would have to double-check.

I fixed what I could. you know more about some areas of js than I do.

is there someone who knows jquery who can help this person?


All times are GMT. The time now is 10:42 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com