www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help with Adwords code in JS based form submission

Hybrid View

  1. #1
    Join Date
    Aug 2013
    Posts
    2

    Help with Adwords code in JS based form submission

    I know my way around a webpage... to a degree... but am pretty lost when it comes to javascript.

    I recently purchased a template for a website that uses javascript to process the form submission. When the form is submitted, the user remains on the same page.

    I am trying to figure out a way to use Google Adwords conversion tracking on this site. Here is the site's submission form:

    http://www.unitedsupportllc.com/#!/page_mail

    Any ideas?

    Thanks in advance!!!

    Jason

  2. #2
    Join Date
    Aug 2013
    Posts
    2
    A couple other things I should have mentioned... I am using Google Tag Manager so the conversion code can be triggered with different custom macros. There is one for custom javascript (to write a return code) and there is one for JavaScript Variable... this one says "The value is set to that of the global Javascript variable you specify" and you are given a space for the Global Variable Name. I think one of these might be the right track because the form that processing code returns some sort of error or success variable based on whether or not the form was filled out properly. If it was filled out properly, the form reveals a hidden <div> with the success message.

    Here is the code to the form processing javascript code:

    Code:
    //forms
    ;(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:'bat/MailHandler.php',
    					ownerEmail:'myemail@address.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:/^(("[\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)
    $(window).load(function(){
    	$('#form1').forms({
    		ownerEmail:'#'
    	})
    })

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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