logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-20-2012, 10:49 AM   #1
rvanrijen
 
Join Date: Apr 2012
Posts: 3
Default 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'
	})
})

Last edited by rvanrijen; 04-20-2012 at 10:52 AM..
rvanrijen is offline   Reply With Quote
Old 04-23-2012, 11:46 PM   #2
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-25-2012, 10:47 AM   #3
rvanrijen
 
Join Date: Apr 2012
Posts: 3
Default

Quote:
Originally Posted by jmichae3 View Post
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?
rvanrijen is offline   Reply With Quote
Old 04-23-2012, 11:47 PM   #4
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

by the way, some *nix folk have their browsers' javascript disabled.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-25-2012, 08:39 PM   #5
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-26-2012, 08:20 AM   #6
rvanrijen
 
Join Date: Apr 2012
Posts: 3
Default

Quote:
Originally Posted by jmichae3 View Post
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.
rvanrijen is offline   Reply With Quote
Old 04-27-2012, 06:18 AM   #7
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

if this is jquery, what API is this?
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-27-2012, 06:18 AM   #8
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

or where did you get your example from?
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-27-2012, 06:29 AM   #9
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

well, that "sender" in your form will become the form's "from". you can't send an email WITHOUT having from "FROM" address.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 04-27-2012, 09:02 AM   #10
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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?
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:05 PM.


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