Internet Business Blog
« Previous | Home | Next »

 

Aweber Split Test JavaScript Opt In Box Formatting Fix

Share/Bookmark

November 15, 2007

Aweber Split Test JavaScript Opt In Box Formatting FixA few days ago, I responded to a plea from Robert Phillips to help him fix a formatting error he was getting from his AWeber split test opt in form on his blog. It looked fine in Firefox but was running off the right side of the page and getting clipped in Internet Explorer.

If he was just using the regular HTML opt in box, he could have edited the HTML code and fixed the problem, however, he wanted to perform a split test on his mailing list opt in form and when doing this, AWeber uses a JavaScript inclusion to alter the HTML code that is output to your web page. There are very few options for formatting when using the split test option. However, performing a split test is important enough to warrant some additional work to get it formatted correctly.

AWeber is a great service and I recommend them 100%, that's another reason I'm posting the fix that I sent to Robert.

There are always multiple ways to skin a cat and I'm sure that there are 100 ways to fix this problem. I wanted my fix to be simple to understand and easy for anyone wanting to implement it to modify it for their use.

Robert was already wrapping his opt in form with a div and/or table so that he could give it a yellow background and a border. I kept this and use it in the code I'm posting here, however I moved the parameters for formatting the background color and outline from the HTML code to the CSS file that his blog uses.

Because the two text fields and submit button are all three INPUT type elements, they all respond to the same CSS Class Style. I use this ability to set their widths, and then use a little JavaScript snippet to pick out the Submit button and set it's width to the correct size.

The CSS Classes that I added have specific widths set for Roberts's blog, both for the wrapper and the text input fields. You will need to set them according to your requirements. Try to use a specific pixel amount (ie 200px) because using a percent setting (ie 93%) will cause some additional issues with sizing. Now if you're paying attention, you'll see that some of the classes, and the JavaScript code I created that sets the sizing for the SUBMIT button, uses a % for width: it's OK there because its parent element uses a specific measurement (210px). The problem with sizing seems to pop up in Internet Explorer when you have several nested elements that all use a percentage for width or height: you need a specific size somewhere so that when it renders the page it does it correctly.

To resize the SUBMIT button, I get all the elements on the page with the name of "submit" and then loop through them looking for the correct one by the value of the text that he entered in AWeber for his button. Again, you'll have to edit this to make it work for your situation.

Here's the Code for the CSS file. Put this at the end of your CSS file.


Below is the code for the web page itself. I've x'd out the specific AWeber info from Robert... again, Replace with your AWeber code.

Here's the HTML Code for the web page itself.


What the code does:
  • We get the elements on the page that are named "submit" into a collection or array...
  • we loop through them to find the correct submit button by value (ie, the text being displayed on the submit button, in this case "Send Me the FREE Report!")...
  • YOU need to set the text string in the "if" statement to match the text on YOUR button. Note that this is Case-Sensitive - get the capitalization correct or it will not work...
  • if you alternate the text on the button as part of the split test, then you'll need to add the alternate text with an or ("||") statement...
  • We could short circuit the loop and stop when I find the button with the correct text, but if there is more than one button, I set them all - may not be the right thing to do but at least it gets the one I'm after...

Why it works:
CSS = Cascading Styles Sheets... and cascading means that the styles we set at the wrapper div that wraps the AWeber form will affect the elements in that form because the styles flow or cascade down into child elements unless overwritten by local style definitions. See my previous blog post on CSS for more information.

You may be wondering how I know what the AWeber code that's written out by their JavaScript looks like. I use a little tool called Instance Source to see it.

Until Next Time,
Fred

P.S. If all this looks like Greek to you, you can learn more about HTML and CSS with my Introduction to Web Site Creation Course, and more about JavaScript with my Interactive Web Site Course.

About the Author

Fred Black is an experienced online business operator, programmer, web site developer, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.


You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.


Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.


Share/Bookmark

Tip Jar: Leave a Donation

Comments: 5,   TrackBacks: 0.

Posted by Fred on November 15, 2007 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/95


Assigned Categories: Web Site Design, HTML, CSS


Related Entries:

 

 
Comments and TrackBacks 
  Comments:
  1. From: Martin Russell

    Hi Fred,

    Thanks for putting this up.

    I had hacked a solution by changing 2 bits in the original code ie in the Stylesheet.css in theme
    --> to 95 - body div#container{width:95%;}
    --> to 210 - body div.sidebar{margin:3em 0 2em;overflow:hidden;width:210px;}

    Can you explain whether I would be better off using your version and if so why?

    Also, on Robert's thread a few people complained about IE not loading their page properly. I have the same problem. I assume it's due to a combination of wordpress, aweber, and perhaps veryplaintext template. Robert's page still has this problem when I checked just now.

    Do you have any suggested solutions for this problem that seems to be common too?

    Heelppp!

    Posted by Martin Russell on November 16, 2007 3:07 PM

  2. From Fred...

    Hello Martin;
    I'm not sure what values were there before you changed to 95% and 210px... Probably your changes made the sidebar smaller and it fell into place. If you add an outline and background color like Robert has, it may or maynot be clipped. The only advantage to my fix is that it only changes the opt in form. It sizes the form to fit in the sidebar correctly. I didn't want to change the rest of his sidebar becuase it looks OK.

    Robert's blog comes up perfectly for me on 2 different PCs, one with IE 6 and the other with IE 7, both running Windows XP. It may be a issue with access to Aweber or another site. When you put things like AWeber, and widgets like BlogRush, Digg count, etc. on your page, the page may load slowly and wait, if the response from those servers is poor. This can be due to their server, network traffic on your network and ISP, and peering points between the different ISPs between you and those servers. Perhaps IE handles that differently than Firefox and causes the page to hang at times.

    Robert's site has always loaded just fine for me, from multiple locations.

    Thanks for stopping by and leaving a comment.

    Fred

    Posted by Fred Black on November 16, 2007 3:42 PM

  3. From: Matt Gerchow

    Fred,

    I have an unrelated but similar issue.
    My Aweber form is not popping in specific versions of IE. It works on my computer in FireFox Mozilla and both IE6 and IE7 (I upgraded to try and replicate)

    My problem is that my site is hosted on Ning.com where I do not have complete access to the source code. I am trying to put the Aweber javascript into various other editable text elements on the page that display once a user is registered to the site.

    Could you please register an account (1min) and see if the pop-over displays for you. If you receive an error, please take a look at the page source and see if you can determine what is going on.

    Thanks so much,

    Matt Gerchow
    www.Real-Estate-Investing.com

    Posted by Matt Gerchow on October 24, 2008 3:07 PM

  4. From: Mikael @ RetireRichRoadmap

    This is the only useful piece of advice on this topic that I have been able to find and I still am not able to make it do what I want it to do.

    I'll need to make the Aweber form code (java or html) float over a picture at a specific place. Is there anywhere that you know of where I can read about that?

    Thank you,
    Mikael

    Posted by Mikael @ RetireRichRoadmap on April 23, 2009 12:32 PM

  5. From: Bill @ Internet Marketing Muscle

    Great post. I think I can adapt this to use on my blogs. I just want a simple black border around my aweber form on my home page and in any posts I want it on...I'm no CSS guy, so this has helped a lot!

    Posted by Bill @ Internet Marketing Muscle on September 11, 2009 9:54 AM

 


Post A Comment




Remember personal info?




Comment Policy <--- Read the comment policy (Updated 1/13/2010).

About  Contact  Free Products Fred W. Black

Blog Feeds, EMail, etc.:

Subscribe by EMail

RSS 2.0 Feed for www.pqInternet.com.
Add to Google Toolbar

Free Updates via EMail

Receive Free Updates.

Free Products and Software.

Search

 

Link to Me!

How to Link to this Blog.

Products

Products I Use & Recommend

www.3WayLinks.Net

www.1WayLinks.Net

Free Traffic System

Wordtracker Keyword Research Tool

www.aweber.com Opt-In List Management.

1&1 Hosting

Categories

All

ClickBank

Copywriting

Free Videos

Funny

Internet Business

Internet Marketing

Life

Search Engines: SEO

Social Media

Technology

Traffic

Truth and Freedom

Web Site Design, HTML, CSS

Recent Entries

Facebook Fan Pages and Static FBML Part 3: iFrames!

Facebook Fan Pages and Static FBML Part 2

Facebook Fan Pages and Static FBML - Part 1

Texting Social Media Updates - Useful vs. Useless

Success or Failure in an Internet Business Depends on Who's Looking Back at You in the Mirror...

Bullets from God - The Greatest Copywriter of All Time?

Success is not Sticky - You Have to Hold the BALL!

Birthday Salute!

New Layout

What's the Value of a Link to SEO (Search Engine Optimization)?

Internet Business Ethics 101

Exploding Your Copy (and life) From Sissy to SEISMIC.

Long Tail Keywords

I'm a Slasher!

Start Your Own Home Internet Business with these 7 Easy Steps...

All Entries

Recently Commented On

Mozilla Thunderbird Email Client - Part 2: Corrupted Inbox

Facebook Fan Pages and Static FBML - Part 1

Long Tail Keywords

Bullets from God - The Greatest Copywriter of All Time?

Success is not Sticky - You Have to Hold the BALL!

Success or Failure in an Internet Business Depends on Who's Looking Back at You in the Mirror...

Replacing a ClickBank Vendor's Sales Page with Your Own.

Facebook Fan Pages and Static FBML Part 2

Archives

All

Blog Roll

Clayton Makepeace

Terry Dean

Ryan Healy

ProBlogger

Internet Business Resources Blog

Michel Fortin

G. Brent Riggs

Jonathan Leger

Mark J Ryan

Dr. Joe Vitale

Search Engine Journal

Friday Traffic Report

Links

Cell Phones for Soldiers

Front Street Playschool

Clebe McClary

the IconFactory

Fred Black Music

Daryl Laws Sports Performance Blog

Williams High School Booster Club

Jacob Ingle

Light Peak

EasyIRS.com

Web Hosting

My Recommended Web Hosting Service: 1&1 Hosting

Mugs, Mousepads, etc.

About this Blog...

By:Fred W. Black

Contact Information

Powered by:Movable Type 3.34.

Copyright 2006 -2010, PhaseQuest.Com.
All rights reserved.

Subscribe by EMail RSS 2.0 Feed for www.pqInternet.com.

Add to Google Toolbar
My Facebook Fan Page
Twitter
Add www.pqInternet.com, to Google. Add www.pqInternet.com, to My Yahoo! Add www.pqInternet.com, to My MSN. Subscribe to www.pqInternet.com, with Bloglines Add www.pqInternet.com, to Your Technorati Favorites! Add www.pqInternet.com, to Windows Live

rs

Some photos are by: Lee Hinshaw Photography

© Copyright 2006 - 2010 PhaseQuest, all rights reserved.

 

Get Free Updates!

Insert your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

*I value your privacy and will never sell, rent, giveaway, or abuse your information.