7 Replies Latest reply: Aug 10, 2012 7:38 AM by fcukinyahoo

Creating Good Looking Email Form? How?

fcukinyahoo Aug 10, 2012 7:04 AM

Good Day,

I want to create a nice professional looking email form for my site like these guys did https://www.avatarnewyork.com/nf

I use Dreamweaver CS5 and i know that it has an option to add text area, submit button etc. But they all look so ugly. Is there an add-on that I can download to have more and better looking options for these stuff.

Or what tools I should use to create a from like https://www.avatarnewyork.com/nf has???

I don't think Dreamweaver is enough by itself to create nice designes. I feel like I am missing some tools? Can anyone help?

Thank you in advance.

1. Re: Creating Good Looking Email Form? How?

Jon Fritz II Aug 10, 2012 7:13 AM (in response to fcukinyahoo)

That appears to all be controlled by CSS (Cascading Style Sheets).

Here is a good resource to help you...

http://www.w3schools.com/css/default.asp
Like Show 0 Likes (0)

Actions
2. Re: Creating Good Looking Email Form? How?

fcukinyahoo Aug 10, 2012 7:26 AM (in response to Jon Fritz II)

Even the style of the text boxes (nice round shaped) and submit button (with mirror effect) shapes and such? Can I accomplish this with CSS only?
I need something like the image the I am attaching here.
Like Show 0 Likes (0)

Actions
3. Re: Creating Good Looking Email Form? How?

osgood_ Aug 10, 2012 7:30 AM (in response to fcukinyahoo)

The image, is just and image:

https://www.avatarnewyork.com/images/ecom/ecom-submit_off.png
Like Show 0 Likes (0)

Actions
4. Re: Creating Good Looking Email Form? How?

Jon Fritz II Aug 10, 2012 7:31 AM (in response to fcukinyahoo)

Yup.

The rounded edges are being added using a background image in CSS (for cross browser compatibility). It's actually here: https://www.avatarnewyork.com/images/ecom/ecom-form_textfield.png
Like Show 0 Likes (0)

Actions
5. Re: Creating Good Looking Email Form? How?

Jon Fritz II Aug 10, 2012 7:33 AM (in response to Jon Fritz II)

Here's all the CSS affecting one text field in that form...

background-color: transparent;
background-image: url("/images/ecom/ecom-form_textfield.png");
background-repeat: no-repeat;
border: 0px none;
color: rgb(102, 102, 102);
font-size: 9px;
height: 16px;
margin-bottom: 12px;
margin-top: 5px;
padding: 6px 0px 0px 8px;
width: 262px;
outline: 0px none;
margin:0px;
list-style:none;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
text-align: left;
Like Show 0 Likes (0)

Actions
6. Re: Creating Good Looking Email Form? How?

fcukinyahoo Aug 10, 2012 7:34 AM (in response to osgood_)

My bad you are right I saw that just now.

How about the rounded text boxes? How do I make them rounded like this?
Like Show 0 Likes (0)

Actions
7. Re: Creating Good Looking Email Form? How?

fcukinyahoo Aug 10, 2012 7:38 AM (in response to fcukinyahoo)

I seee got it. Now it is clearer. To my understanding with images they make them nice, not by only using Dreamweaver. I thought i was missing some tools. Ok God it.
Thanks alot everyone. You were very helpful.
Like Show 0 Likes (0)

Actions