Template contact formulier

Status
Niet open voor verdere reacties.

rvanrijen

Gebruiker
Lid geworden
19 jun 2012
Berichten
7
Een tijdje terug heb ik bij het bedrijf waar ik momenteel stage loop de opdracht gekregen een template voor een website te 'customizen'. Nou is dit over het algemeen niet echt een probleem - met HTML en CSS heb ik normaal gesproken niet al te veel moeite. Het activeren van het contact formulier aan de andere kant is iets waar ik ontzettend veel uren aan onderzoek in heb gestoken, en al lijkt tevergeefs.

Aan de HTML code (link) te zien is het formulier gelinkt aan een Javascript bestand. Dit ziet er als volgt uit:

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:'info@bedrijf.com',
                    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:'info@bedrijf.com'
    })
})

Het probleem waar ik constant last van heb is het feit dat ondanks de email wel aankomt, ze continu in de spam folder van mijn hotmail account verschijnen. Verander ik de email adressen in het script naar de echte bedrijfs-email, dan verschijnt het bericht vaak helemaal niet.

Heeft iemand enig idee hoe dit opgelost zou kunnen worden? Ik sta voor zo goed als alles open - van oplossingen binnen de code zelf naar hulp met overstappen naar een PHP of ander soort script (zelf al geprobeerd, ook onsuccessvol) of eventuele andere suggesties.

Ik hoop spoedig iets te horen.
 
Laatst bewerkt:
Ik hoop spoedig iets te horen.

Je javascript voor het posten van een mail gaat naar "bin/MailHandler.php", waarschijnlijk dus http://www.canvas1.nl/bin/MailHandler.php

Ik zou graag dat script ook even zien, om te zien hoe de mail verstuurd wordt, want het is me niet duidelijk wat de FROM: header zal zijn.
Het mailtje komt wel aan bij je, dus het script zal niet stuk zijn denk ik, maar in je hotmail instellingen van dat account (ownerEmail:'rikvanrijen@hotmail.com' gaat het heen denk ik) het FROM: address dat door dat script gebruikt wordt als belangrijk / not spam / speciale folder aanwijzen. Ik gebruik zelf geen hotmail, maar er moet volgens mij ook bij mickeysoft wel een optie ergens zijn om een bepaald FROM: adres als belangrijk / niet-spam aan te wijzen.
 
Je javascript voor het posten van een mail gaat naar "bin/MailHandler.php", waarschijnlijk dus http://www.canvas1.nl/bin/MailHandler.php

Ik zou graag dat script ook even zien, om te zien hoe de mail verstuurd wordt, want het is me niet duidelijk wat de FROM: header zal zijn.
Het mailtje komt wel aan bij je, dus het script zal niet stuk zijn denk ik, maar in je hotmail instellingen van dat account (ownerEmail:'rikvanrijen@hotmail.com' gaat het heen denk ik) het FROM: address dat door dat script gebruikt wordt als belangrijk / not spam / speciale folder aanwijzen. Ik gebruik zelf geen hotmail, maar er moet volgens mij ook bij mickeysoft wel een optie ergens zijn om een bepaald FROM: adres als belangrijk / niet-spam aan te wijzen.

Hotmail is alleen gebruikt om te testen - uiteindelijk zal de mail successvol aan moeten komen in Outlook, waar hij op deze manier helemaal niet aankomt.

Ik heb dit onderwerp overigens onlangs inclusief PHP script in het PHP gedeelte van het forum geplaatst.
 
Hotmail is alleen gebruikt om te testen - uiteindelijk zal de mail successvol aan moeten komen in Outlook, waar hij op deze manier helemaal niet aankomt.

Ik heb dit onderwerp overigens onlangs inclusief PHP script in het PHP gedeelte van het forum geplaatst.

En wat voor FROM: adres krijg je op die mails die je in je spam folder op hotmeel vindt?
 
Hotmail is alleen gebruikt om te testen - uiteindelijk zal de mail successvol aan moeten komen in Outlook, waar hij op deze manier helemaal niet aankomt.

Ik heb dit onderwerp overigens onlangs inclusief PHP script in het PHP gedeelte van het forum geplaatst.

je PHP server zal ook uiteraard geconfigged moeten zijn zodat de mail() functie er op werkt. Dat kun je evt in een apart superkort test script zelf testen..
 
Het email adres dat door de gebruiker in het formulier ingevuld wordt.

Hopelijk niet dus, je wilt dat dit script een eigen email adres (formbot@yourdomain.com) gebruikt als FROM: voor alle mailtjes die het stuurt. Zodat je al die mails goed kunt filteren naar hun eigen mailbox.
Het email adres van de klant / prospect wordt traditioneel als text in de body van de mail gestuurd.


FF Googlen naar "php configure mail", dan krijg je al 2 nuttige artikelen daarover als 1e 2 hits.

Het ligt ook aan wat voor OS je PHP server draait natuurlijk. Op linux is het automatisch meestal goed geregeld, maar op Windows (WampServer) moet je een remote SMTP (mail) server gebruiken, want windows heeft helemaal geen ingebouwde mailserver zoals linux dat wel heeft.
 
Deze code voor MailHandler.php doet sturen vanaf 1 enkel adres (regel 2), en maakt mailto: link van de klant z'n ingevoerde mail adres, ook wel handig.

Code:
<?php
	$owner_email = $_POST["owner_email"];
	$headers = 'From:formbot@mydomain.com';
	$subject = 'A message from your site visitor ' . $_POST["name"];
	$messageBody = "";
	
	if($_POST['name']!='nope'){
		$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
		$messageBody .= '<br>' . "\n";
	}
	if($_POST['email']!='nope'){
		$messageBody .= '<p>Email Address: <a href="mailto:' . $_POST['email'] . '">'. $_POST['email'].'</a></p>' . "\n";
		$messageBody .= '<br>' . "\n";
	}else{
		$headers = '';
	}
	if($_POST['state']!='nope'){		
		$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
		$messageBody .= '<br>' . "\n";
	}
	if($_POST['phone']!='nope'){		
		$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
		$messageBody .= '<br>' . "\n";
	}	
	if($_POST['fax']!='nope'){		
		$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
		$messageBody .= '<br>' . "\n";
	}
	if($_POST['message']!='nope'){
		$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
	}
	
	if($_POST["stripHTML"] == 'true'){
		$messageBody = strip_tags($messageBody);
	}
	
	try{
		if(!mail($owner_email, $subject, $messageBody, $headers)){
			throw new Exception('mail failed');
		}else{
			echo 'mail sent';
		}
	}catch(Exception $e){
		echo $e->getMessage() ."\n";
	}
?>
 
Verder, in de javascript file die je eerder gepost hebt, kun je de volgende functie even vervangen met het volgende stuk code, zodat je een alert() window krijgt met de resultaten van je MailHandler.php.

Maar aangezien je mailtje wel verstuurd wordt naar hotmail, is dit volgende mischien niet eens nodig.

Het leek me wel handig je deze truuk te laten zien voor toekomstige debug-problemen die je mischien hebt.

Je kan natuurlijk een "alert()" ook vervangen met een "debugger;" om (als je op F12 gedrukt hebt) meer details aan de javascript kant te zien.

Het volgende echte probleem voor je is het ontvangen op het Outlook adres. Ook daar geldt dat je je Outlook moet instellen zodat je FROM: adres goed gefilterd wordt. Het is mischien / waarschijnlijk zelfs gewoon een probleem in je Outlook setup, gecombineerd met de veranderingen in m'n vorige post.

Code:
,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(dataAsText, statusAsText){
                                    alert (dataAsText);
                                    _.showFu();
                                },
                                error : function () {
                                    alert ('AJAX call failed');
                                }
                            })            
                    },
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan