Sign up form critique request

[Judy Kristoff]

Here is a sign up form I have created:
http://www.alphaprofit.com/investment-newsletter-free-update-form.html

I will appreciate comments and suggestions on the layout, content, color, images, etc.

Can the different form elements be laid out differently for better impact?

Is the content too much/too little/just right?

Are there other items that could be added/modified to increase conversion?

For reference, here is the link to the old version of this page:

http://www.alphaprofit.com/investment-newsletter-free-update-form-oldfb.html

Thanks,
Judy

[CkretAjint]

needs.... breathing... room.

Watch your hyphened words (ugly).

Try to keep your colors similar, with that said, what;s with the lime green border around your sign up area?

Your code is WAY WAY horrid. You really should be using UL/LI elements, not P tags with images in front to form bullets. Also use an attached css document, not inline css.

I assume you used Dreamweavers (or other) WYSIWYG system?

[Judy Kristoff]

Thanks for your comments and suggestions. I am starting to work on your suggestions. I have tried to call the images using UL/LI.

Here is a copy of the work-in-progress page:
http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb.html

1) As you can see, I am not able to shrink and display the dollar images in the right size (14 x14 px). The original image is 50x50 px while the LI text is in 14px font. Can you tell me the syntax I need to use to display the image in the right size using inline CSS?
Here is the UL code I am using:

<ul style="list-style-type:none;padding:0;margin:0;">

<li style="background-image:url(http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px (http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px) #000000 solid;font-family: Tahoma, Verdana, Arial, Palatino, sans-serif;margin-left:0px;margin-right:0px;">

Unique insights on emerging <b>profit opportunities</b>
</li>

<li style="background-image:url(http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px (http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px) #000000 solid;font-family: Tahoma, Verdana, Arial, Palatino, sans-serif;margin-left:0px;margin-right:0px;">

Must-know <b>threats</b> to protect your money
</li>

<li style="background-image:url(http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px (http://www.alphaprofit.com/MoneyMatters/MoneyMattersDollarArial.gif);background-repeat:no-repeat;background-position:left;padding-left:55px;font-size:13px;line-height:14px;border:1px) #000000 solid;font-family: Tahoma, Verdana, Arial, Palatino, sans-serif;margin-left:0px;margin-right:0px;">

Unbiased advice on ETFs, funds, and stocks
</li>

</ul>
2) Also, I am trying to deploy the CSS code from a separate file rather than use inline CSS in this file. I have not been able to make this work.

3) I do not have access to Dreamweaver. I am writing the HTML code in Notepad++. Can you possibly tell me the names of some good WYSIWYG (free?) HTML editors?

Thanks.

[CkretAjint]

First... again... Don't use inline CSS.

Second, resize the image in Photoshop, do not rely on the browser to resize it for you. Having it resize in the browser will cause the page to take WAYYyyyyy longer to download and display than it should.

<ul style="list-style-type:none;padding:0;margin:0;">

That MIGHT be why your bullets are displaying. ;)

Try (if you must use inline css):
<ul style="list-style-image:url(images/bulletImage.gif); margin:0; padding:0 0 0 55px;">
<li><a href="http://GoToHere01.com/" target="_blank">Bullet 01</a></li>
<li><a href="http://GoToHere02.com/" target="_blank">Bullet 02</a></li>
</ul>



No idea about WYSIWYG editors, as I don't use them.

[tZ]

I began taking a look at for you the below is more or less what the mark-up should like. Especially considering the importance of SEO with this particular marketing effort.


<ol id="masthead">
<li><h1>Instant Sign Up for Free e-Letter</h1></li>
<li>Unbiased Investment Recommendations for ETFs, Funds, and Stocks</li>
</ol> <!-- end of masthead -->

<div id="banner">
<img src="http://www.alphaprofit.com//Illustrations/sambio150150.jpg" width="110" height="110" alt="Sam Subramanian PhD, MBA">
<ol id="alpha-profits-plug">
<li>AplhaProfit</li>
<li>Money Matters</li>
<li>Nurturing Your Investments for a Secure Future</li>
</ol> <!-- end of alpha profits plug -->
</div>

<dl id="membership-benefits">
<dt>6 Membership Benefits</dt>
<dd>
<ul>
<li>Unique insights on emerging profit opportunities</li>
<li>Must-know threats to protect your money</li>
<li>Unbiased advice on ETFs, funds, and stocks</li>
<li>Easy to understand analysis of markets</li>
<li>Special discounts for our premium service</li>
<li>Complimentary access to our premium service </li>
</ul>
<dd>
</dl> <!-- end of membership benefits -->

<dl id="welcome-bonuses">
<dt>2 Welcome Bonuses</dt>
<dt>Sign up for the free e-letter AlphaProfit MoneyMatters
to immediately receive Two Special Reports:</dt>
<dd>
<ul>
<li>AlphaProfit's Current Market Outlook helping
you time and position your investments.</li>
<li>Five Smart Ways of Using Sector Funds and
ETFs with inside scoop on sector investments.
</li>
</ul>
</dd>
</dl> <!-- end of welcome bonuses -->

[Judy Kristoff]

Thanks, CkretAjint and tZ for the suggestions.

CkretAjint,

Here is revised version:
http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb.html


1) I have modified the code and included the background image and padding as inline CSS code for <ul>, instead of for each <li>. In addition to this, I have also included the code for font size, line height and font family in <ul>’s inline CSS. Is this the right way to go about this?

2) I would like to increase the space (say 10px) between the dollar bullet and the starting text in each list item, and also some space (say 7px) between the list items. How do I specify this in CSS?

3) When I refresh the page in IE, each time the plain bullet dots appear before they are covered by the TestDollar.gif bullets for each list item. I don’t see this happening in Firefox though. Is there a way to eliminate the transitory appearance of the plain dots in IE?

tZ,

I appreciate the feedback. The page is certainly important for SE marketing. I will incorporate your code into the page and check back with you with any questions I have.

[CkretAjint]

1) It works, but is not the right way.

2) line-height:__px;

3) Welcome to IE and how much it sucks. Part of the issue is that it is IE, the other part is your code.

[Judy Kristoff]

Hello CkretAjint and tZ,

I have written the following CSS code for the Membership Benefits section (instead of inline CSS):

div.membership-benefits-block {
width:351px;
height:160px;
margin:5px 0px 0px 10px;
padding-top:0px;
padding-bottom:0px;
background: url(http://www.alphaprofit.com/MoneyMatters/MoneyMattersBenefitsGrad.gif) repeat-x;
}

dl#membership-benefits {
margin:0px 0px 0px 0px;
}

dt#membership-benefits-item {
margin:0px;
padding:10px 0px 0px 100px;
font-size:14px;
line-height:14px;
font-family: Tahoma, Verdana, Arial, Palatino, sans-serif;
}

dd#membership-benefits-item-description {
margin:0px;padding:0px;
}

ul.benefitlist {
list-style-image:url(http://www.alphaprofit.com/MoneyMatters/TestDollar.gif);
margin:0px;
padding:0px 0px 0px 30px;
}

ul.benefitlist li {
margin:7px 0px 7px 5px;
padding:0px 0px 0px 15px;
font-size:13px;
line-height:13px;
font-family: Arial, Tahoma, Verdana, Palatino, sans-serif;
}

I have also modified the main page code of the 6 Membership Benefits section. To size the section, I have placed the code within <div>…</div> tags as follows:

<div class="membership-benefits-block">
<dl id="membership-benefits">
<dt id="membership-benefits-item"><b>6 Membership Benefits</b></dt>
<dd id="membership-benefits-item-description">
<ul class=benefitlist>
<li>Unique insights on emerging <b>profit opportunities</b></li>
<li>Must-know <b>threats</b> to protect your money</li>
<li>Unbiased advice on ETFs, funds, and stocks</li>
<li>Easy to understand analysis of markets</li>
<li>Special discounts for our premium service</li>
<li>Complimentary access to our premium service </li>
</ul>
<dd>
</dl> <!-- end of membership benefits -->
</div>

The modified signup form page is at:
http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb-modified.html (http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb-modified.html)

The original page with my old inline CSS code for the Membership Benefits section is available at: http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb.html (http://www.alphaprofit.com/investment-newsletter-free-update-form-ul-li-fb.html)

For your reference, the full CSS code is at:
http://www.alphaprofit.com/Css/BasicStyleV3.css (http://www.alphaprofit.com/Css/BasicStyleV3.css) below the following comment lines
/*
The new CSS code for the Instant Sign Up Form page begins below the comment
*/

A) Request: I will appreciate if you could review the CSS and main page codes for this Membership Benefits section of the page.

I have not included the image,
http://www.alphaprofit.com/MoneyMatters/MoneyMatters-Benefits.jpg (http://www.alphaprofit.com/MoneyMatters/MoneyMatters-Benefits.jpg) from the original page.

Earlier I had placed the <img> inside <p> tag, placing the image on the left and the text,
‘6 Membership Benefits’ middle aligned with the image.

Now I am using <dt> for the text, ‘6 Membership Benefits’.

B) Question: How do we place the image to the left of this text?

Thanks,
Judy

[CkretAjint]

I QUICKLY looked at this... but it still seems like you have extraneous code, and repeat css lines. Some margins and padding can be reused from the class 'above' it. I will look further into this when I get home later. Plus it's REALLY hard to read the code since you changed the font to a condensed serif font... ;)

Things I quickly noticed:

Any time you use a '0' you don't need a 'px'. So 0px = 0.

Why a width of 351px? Just curious... seems like such an odd size. Why not 350px?

Remove the <b> tag in your html copy and bold it through the CSS. You can also style it all through 1 line instead of individual comments. ie: "font:Tahoma,Verdana,Arial,Palatino,sans-serif bold 14px 14px;". Same for your "ul.benefitlist li" class.

Side note: If you WERE to use inline to bold something I would use <strong> tags instead of <b>. They DO the same thing, but most coders prefer to use the <strong> tag for 2 reasons. <b> is small and can be hard to spot when skimming through code quickly. And if you are slightly dyslexic, some times a "b" can look like a "p", and visa-versa.

[CkretAjint]

One thing I noticed is you need to name your classes/ids more descriptively. When you name a class "redBarTop" it becomes an issue when the client wants it green and moved to the bottom.

tZ, feel free to correct me if I skipped over anything or am in the wrong! ;)

Okay, this is what I have...

CSS:

html, body {
margin:0;
padding:0;
border:0;
font-family:Arial,Tahoma,Verdana,Palatino,sans-serif;
font-size:13px;
line-height:13px;
}

.listBlock {
width:350px;
height:160px;
margin:5px 0 0 10px;
background:url(http://www.alphaprofit.com/MoneyMatters/MoneyMattersBenefitsGrad.gif) 0 0 repeat-x;
}

dl {
margin:0;
padding:0;
}

.title {
font-family:Tahoma,Verdana,Arial,Palatino,sans-serif;
font-weight:bold;
font-size:14px;
line-height:14px;
text-align:center;
}

ul {
list-style-image:url(http://www.alphaprofit.com/MoneyMatters/TestDollar.gif);
padding:0 0 0 30px;
}

li {
margin:10px 0 0 0;
padding:0 0 0 15px;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div class="listBlock">
<dl>
<dt class="title">6 Membership Benefits</dt>
<ul>
<li>Unique insights on emerging <strong>profit opportunities</strong></li>
<li>Must-know <strong>threats</strong> to protect your money</li>
<li>Unbiased advice on ETFs, funds, and stocks</li>
<li>Easy to understand analysis of markets</li>
<li>Special discounts for our premium service</li>
<li>Complimentary access to our premium service</li>
</ul>
</dl>
</div>
</body>
</html>

[tZ]

Assuming there is a tree image named tree.png in the same folder that is 37 x 43 the below should work for the benefits list. I had to manually copy the tree image because the actual is gigantic. You need the tree image to be the exact size as it should appear in the browser. I attached the image I used for this. So if you copy this into a new html file then place the tree image in that same folder everything should work.

Notice how once the dl is identified nothing else needs to be. Everything else can be targeted relative to that item without any additional hooks.

Normally I would also remove the default browser styling using a reset. I only did it manually here to present you with a simple, one page result.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Membership benefits Example</title>

<style>
#membership-benefits {
/*
* kill default margin and padding
*/
margin: 0;
padding: 0;
/*
* give this a fixed width to replicate scenario
*/
width: 351px;
}

#membership-benefits ul {
/*
* kill default margin, padding and bullet
*/
margin: 0;
padding: 0;
list-style: none;
}
#membership-benefits li {
/*
* kill default margin and padding
*/
margin: 0;
padding: 0 0 0 20px;
/*
* Apply bullet character as background image
*/
background: transparent url(http://www.alphaprofit.com/MoneyMatters/TestDollar.gif) no-repeat center left;

}
#membership-benefits dd {
/*
* kill default margin and padding
*/
margin: 0;
padding: 0;
}
#membership-benefits dt {
/*
* Center "heading"
*/
text-align: center;
/*
* This gets a little tricky.
* Set a fixed width on the type
* so padding can be added on the top and bottom
* to give the appearence that the text in this
* element is "centered" verticaly. Round up
*/
font-size: 16px;
font-weight: bolder;
/*
* Approx font size (16px + (14*2)) = 44 (a little more then we need - perfect)
*/
padding: 14px 0;
/*
* Apply tree image as background
*/
background: #fff url(tree.png) no-repeat 15px 0;
}
</style>

</head>
<body>

<dl id="membership-benefits">
<dt>6 Membership Benefits</dt>
<dd>
<ul>
<li>Unique insights on emerging profit opportunities</li>
<li>Must-know threats to protect your money</li>
<li>Unbiased advice on ETFs, funds, and stocks</li>
<li>Easy to understand analysis of markets</li>
<li>Special discounts for our premium service</li>
<li>Complimentary access to our premium service </li>
</ul>
<dd>
</dl> <!-- end of membership benefits -->


</body>
</html>



B) Question: How do we place the image to the left of this text?


So the answer is by applying it to the dt relative of a the dl because only one dt exists as a parent of the dl.

[tZ]

One thing I noticed is you need to name your classes/ids more descriptively. When you name a class "redBarTop" it becomes an issue when the client wants it green and moved to the bottom.


Yes, take advantage of the content and name elements accordingly.

For one day you may be in the situation where the content is dynamic and only wish you were dealing with static content or even worse have no content at all…

[tZ]

or… if you really want to maximize your real estate the unordered list can be removed. Instead you can use a dd for each item and end up with the same result. Both solutions are semantically valid though. This one is just more simple.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Membership benefits Example</title>

<style tyle="text/css">
#membership-benefits {
/*
* kill default margin and padding
*/
margin: 0;
padding: 0;
/*
* give this a fixed width to replicate scenario
*/
width: 351px;
}
#membership-benefits dd {
/*
* kill default margin and padding
*/
margin: 0;
padding: 0 0 0 20px;
/*
* Apply bullet character as background image
*/
background: transparent url(http://www.alphaprofit.com/MoneyMatters/TestDollar.gif) no-repeat center left;

}
#membership-benefits dt {
/*
* Center "heading"
*/
text-align: center;
/*
* This gets a little tricky.
* Set a fixed width on the type
* so padding can be added on the top and bottom
* to give the appearence that the text in this
* element is "centered" verticaly. Round up
*/
font-size: 16px;
font-weight: bolder;
/*
* Approx font size (16px + (14*2)) = 44 (a little more then we need - perfect)
*/
padding: 14px 0;
/*
* Apply tree image as background
*/
background: #fff url(tree.png) no-repeat 15px 0;
}
</style>

</head>
<body>

<dl id="membership-benefits">
<dt>6 Membership Benefits</dt>
<dd>Unique insights on emerging profit opportunities</dd>
<dd>Must-know threats to protect your money</dd>
<dd>Unbiased advice on ETFs, funds, and stocks</dd>
<dd>Easy to understand analysis of markets</dd>
<dd>Special discounts for our premium service</dd>
<dd>Complimentary access to our premium service </dd>
</dl> <!-- end of membership benefits -->


</body>
</html>

[Judy Kristoff]

Thanks much CkretAjint and tZ for your code. I am going through it. Not sure if I understand every bit of it. I am sure I will have some questions after I review them line by line and I will post them. Thanks again.

Juldy

[Judy Kristoff]

Hello CkretAjint,

I am trying to incorporate all your suggestions.

I didn't follow one thing though:


You can also style it all through 1 line instead of individual comments.
ie:

"font:Tahoma,Verdana,Arial,Palatino,sans-serif bold 14px 14px;”



In the above css code, what do the two 14px definitions at the end stand for?

Hello tZ,

Thanks for recreating the tree image and presenting the code in 2 different ways. I was able to try both of them. They seem to work well both in Internet Explorer and FireFox. I have couple of questions:-

1) Can the <DIV> </DIV> tags (used in my previous code) surrounding the <dl> </dl> tags be removed?

2)

“Normally I would also remove the default browser styling using a reset. I only did it manually here to present you with a simple, one page result.”


I am not understanding what you mean. Can you please explain this a bit more elaborately?

Thank you both again. I am trying to do the rest of the page on the same lines as this section.

Thanks.
Judy

[CkretAjint]

The first 14pt is the "font-size", the second one is the "line-height".

[tZ]

1) Can the <DIV> </DIV> tags (used in my previous code) surrounding the <dl> </dl> tags be removed?


Structurally a div and dl are the same thing. They can be treated the same way, but they mean different things. Meaning and what each may contain are the only things that separate one tag from another. In regards to presentation they can all be handled/styled in the same way.


“Normally I would also remove the default browser styling using a reset. I only did it manually here to present you with a simple, one page result.”


A reset can be used to remove default styling. Just search CSS reset and you'll get an idea.

[vanishdesign]

Not to overcomplicate things but:

Be careful with the resets you find. Many of them do too much. If for example you have code like:
body, h1, h2, h3, p, ul, div{
margin: 0; padding: 0
}
p{
margin: 1em 0
} The reset is counterproductive as you're setting the margin on <p> later on and no browser's going to set padding on <p>.

More likely you'll find ones that reset elements you'll never use like <font>, <ins> and <del>.

Resets are great for learning on your first few sites but I don't recommend you cut and paste them blindly.

[Judy Kristoff]

Thanks CkretAjint, tZ, and VanishDesign.

Judy