Back To Website Design Forum

how to use a sign up email box in DREAMWEAVER

  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 10:58 am

okay guys I am trying to create a box i can put on my pages that re under contruction.
that looks similar the file I attached, i reall wanna know how t make the table so interesting

they did such a good job. and my tables are so
Attachments:
forums.png

this is what I want to make. something lik this

Attachments:
forums.png

this is what I want to make. something lik this

bland
I just want to know the coding that I should use, and what to do.

I am trying to learn here so any suggestions would be wonderful.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 11th, 2012, 10:58 am

  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post March 11th, 2012, 11:12 am

I'm not sure without looking at their code, but they probably used images for the form field and button.

Just add a "class" property to your form field data, and your input.

Then you can just modify your CSS.

Code: [ Select ]
<input type="email" name="useremail" class="customfield" value="Enter Your Email" />
<input type="submit" name="submitemail" class="custombutton" value="Submit" />
  1. <input type="email" name="useremail" class="customfield" value="Enter Your Email" />
  2. <input type="submit" name="submitemail" class="custombutton" value="Submit" />


Then the CSS

Code: [ Select ]
.customfield {
   background: url('pathtoyourimage/fieldbackground.jpg') no-repeat;
}

.custombutton {
   background: url('pathtoyourimage/buttonbackground.jpg') no-repeat;
}
  1. .customfield {
  2.    background: url('pathtoyourimage/fieldbackground.jpg') no-repeat;
  3. }
  5. .custombutton {
  6.    background: url('pathtoyourimage/buttonbackground.jpg') no-repeat;
  7. }
Custom Web Design
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8667
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post March 11th, 2012, 11:28 am

That's exactly what i thought natas. It looks like they've used images to as there is a gradient on in the box.

You'd be looking to create an image no wider than 1 pixel wide and whatever height you consider appropriate for the size of box you'd like to create. I'd say something like 75-100 pixels.
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 12:20 pm

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "website">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Contact Us</title>
    <script src="file:///C|/Users/Tracy/Desktop/contactform_free/emailformvalidation.js"></script>
    <script>
    required.add('Email_Address','EMAIL','Email Address');
    </script>
    <link rel="stylesheet" type="text/css" href="file:///C|/Users/Tracy/Desktop/contactform_free/emailform.css">
    <style type="text/css">
    #italics {
    font-style: italic;
    font-weight: normal;
}
  #bold {
    font-weight: bold;
}
  #centurygothic {
    font-family: "Century Gothic";
}
  #sz14fontt {
    font-size: 16px;
    font-family: "Century Gothic";
    color: #C06;
    font-weight: normal;
}
  #sz12 {
    font-size: 12px;
}
  #cntry {
    font-family: "Century Gothic";
    color: #C06;
}
  #pnk {
    color: #C03;
    font-family: "Century Gothic";
}
  td {
    font-size: 16px;
}
  #sffs {
    font-family: "Century Gothic";
    text-align: center;
    font-size: ;
    color: #C06;
}
  </style>
    </head>
    <body>
    
    <form name="freecontactform" method="post" action="file:///C|/Users/Tracy/Desktop/contactform_free/emailformprocess.php" onsubmit="return validate.check(this)">
     <table width="479" class="emailcontactform">
      <tr>
       <td colspan="2"><span id="sffs"><br>
       Sign Up If You Would Like To Be Notified When We Are Up &amp; Running:</span></td>
    </tr>
      <tr>
      </tr>
      <tr>
       <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
       <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:210px">
     <input type="submit" value=" Submit Form "></td>
    </tr>
      <tr>
      </tr>
   </table>
    </form>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "website">
  2. <html>
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>Contact Us</title>
  6.     <script src="file:///C|/Users/Tracy/Desktop/contactform_free/emailformvalidation.js"></script>
  7.     <script>
  8.     required.add('Email_Address','EMAIL','Email Address');
  9.     </script>
  10.     <link rel="stylesheet" type="text/css" href="file:///C|/Users/Tracy/Desktop/contactform_free/emailform.css">
  11.     <style type="text/css">
  12.     #italics {
  13.     font-style: italic;
  14.     font-weight: normal;
  15. }
  16.   #bold {
  17.     font-weight: bold;
  18. }
  19.   #centurygothic {
  20.     font-family: "Century Gothic";
  21. }
  22.   #sz14fontt {
  23.     font-size: 16px;
  24.     font-family: "Century Gothic";
  25.     color: #C06;
  26.     font-weight: normal;
  27. }
  28.   #sz12 {
  29.     font-size: 12px;
  30. }
  31.   #cntry {
  32.     font-family: "Century Gothic";
  33.     color: #C06;
  34. }
  35.   #pnk {
  36.     color: #C03;
  37.     font-family: "Century Gothic";
  38. }
  39.   td {
  40.     font-size: 16px;
  41. }
  42.   #sffs {
  43.     font-family: "Century Gothic";
  44.     text-align: center;
  45.     font-size: ;
  46.     color: #C06;
  47. }
  48.   </style>
  49.     </head>
  50.     <body>
  51.     
  52.     <form name="freecontactform" method="post" action="file:///C|/Users/Tracy/Desktop/contactform_free/emailformprocess.php" onsubmit="return validate.check(this)">
  53.      <table width="479" class="emailcontactform">
  54.       <tr>
  55.        <td colspan="2"><span id="sffs"><br>
  56.        Sign Up If You Would Like To Be Notified When We Are Up &amp; Running:</span></td>
  57.     </tr>
  58.       <tr>
  59.       </tr>
  60.       <tr>
  61.        <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
  62.        <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:210px">
  63.      <input type="submit" value=" Submit Form "></td>
  64.     </tr>
  65.       <tr>
  66.       </tr>
  67.    </table>
  68.     </form>
  69. </body>
  70. </html>
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 12:22 pm

so this is what I have in their now and it gives me a basic one line box blah blah blah... if i were to add.... the 2 lines of code in my page would i still need this?

And where should it go? in between any body tags?

then the css do i just put it anywhere in the css?

Im usuing dreamweavr cs5.5
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post March 11th, 2012, 12:56 pm

Starting with line 60 in your above code....
Code: [ Select ]
   <tr>
    <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
    <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:210px">
   <input type="submit" value=" Submit Form "></td>
  </tr>
  1.    <tr>
  2.     <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
  3.     <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:210px">
  4.    <input type="submit" value=" Submit Form "></td>
  5.   </tr>


change to this...
Code: [ Select ]
   <tr>
    <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
    <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" class="customfield" style="width:210px">
   <input type="submit" class="custombutton" value=" Submit Form "></td>
  </tr>
  1.    <tr>
  2.     <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email Address</span></label></td>
  3.     <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" class="customfield" style="width:210px">
  4.    <input type="submit" class="custombutton" value=" Submit Form "></td>
  5.   </tr>


Did you see where I added the class declaration?

Then, right before the closing style tag on line 48 in your code above "</style>"... add this

Code: [ Select ]
  .customfield {
    background: url('pathtoyourimage/fieldbackground.jpg') no-repeat;
  }
  .custombutton {
    background: url('pathtoyourimage/buttonbackground.jpg') no-repeat;
  }
  1.   .customfield {
  2.     background: url('pathtoyourimage/fieldbackground.jpg') no-repeat;
  3.   }
  4.   .custombutton {
  5.     background: url('pathtoyourimage/buttonbackground.jpg') no-repeat;
  6.   }


remember to change the filepaths to wherever you store your images. Also, change the filename to whatever you named your images. If you use SB's suggestion above, get rid of the "no-repeat" at the end.
Custom Web Design
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 1:31 pm

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Contact Us</title>
    <script src="file:///C|/Users/Tracy/Desktop/contactform_free/emailformvalidation.js"></script>
    <script>
    required.add('Email_Address','EMAIL','Email Address');
    </script>
    <link rel="stylesheet" type="text/css" href="file:///C|/Users/Tracy/Desktop/contactform_free/emailform.css">
    <style type="text/css">
    #italics {
    font-style: italic;
    font-weight: normal;
}
  #bold {
    font-weight: bold;
}
  #centurygothic {
    font-family: "Century Gothic";
}
  #sz14fontt {
    font-size: 16px;
    font-family: "Century Gothic";
    color: #C06;
    font-weight: normal;
}
  #sz12 {
    font-size: 12px;
}
  #cntry {
    font-family: "Century Gothic";
    color: #C06;
}
  #pnk {
    color: #C03;
    font-family: "Century Gothic";
}
  td {
    font-size: 16px;
}
  #sffs {
    font-family: "Century Gothic";
    text-align: center;
    font-size: ;
    color: #C06;
}
 .customfield {
  background: url('html/images/.gradients.png') no-repeat;
 }
 .custombutton {
  background: url('html/images/submitbutton.png') no-repeat;
. }
  </style>
    </head>
    <body>
    
    <form name="freecontactform" method="post" action="file:///C|/Users/Tracy/Desktop/contactform_free/freecontactformprocess.php" onsubmit="return validate.check(this)">
     <table width="479" class="freecontactform">
      <tr>
       <td colspan="2"><span id="sffs"><br>
       Sign Up If You Would Like To Be Notified When We Are Up &amp; Running:</span></td>
    </tr>
      <tr>
      </tr>
      <tr>
       <tr>
<td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email </span></label></td> <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" class="customfield" style="width:210px"> <input type="submit" class="custombutton" value=" Submit Form "></td></tr>
      <tr>
      </tr>
   </table>
    </form>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>Contact Us</title>
  6.     <script src="file:///C|/Users/Tracy/Desktop/contactform_free/emailformvalidation.js"></script>
  7.     <script>
  8.     required.add('Email_Address','EMAIL','Email Address');
  9.     </script>
  10.     <link rel="stylesheet" type="text/css" href="file:///C|/Users/Tracy/Desktop/contactform_free/emailform.css">
  11.     <style type="text/css">
  12.     #italics {
  13.     font-style: italic;
  14.     font-weight: normal;
  15. }
  16.   #bold {
  17.     font-weight: bold;
  18. }
  19.   #centurygothic {
  20.     font-family: "Century Gothic";
  21. }
  22.   #sz14fontt {
  23.     font-size: 16px;
  24.     font-family: "Century Gothic";
  25.     color: #C06;
  26.     font-weight: normal;
  27. }
  28.   #sz12 {
  29.     font-size: 12px;
  30. }
  31.   #cntry {
  32.     font-family: "Century Gothic";
  33.     color: #C06;
  34. }
  35.   #pnk {
  36.     color: #C03;
  37.     font-family: "Century Gothic";
  38. }
  39.   td {
  40.     font-size: 16px;
  41. }
  42.   #sffs {
  43.     font-family: "Century Gothic";
  44.     text-align: center;
  45.     font-size: ;
  46.     color: #C06;
  47. }
  48.  .customfield {
  49.   background: url('html/images/.gradients.png') no-repeat;
  50.  }
  51.  .custombutton {
  52.   background: url('html/images/submitbutton.png') no-repeat;
  53. . }
  54.   </style>
  55.     </head>
  56.     <body>
  57.     
  58.     <form name="freecontactform" method="post" action="file:///C|/Users/Tracy/Desktop/contactform_free/freecontactformprocess.php" onsubmit="return validate.check(this)">
  59.      <table width="479" class="freecontactform">
  60.       <tr>
  61.        <td colspan="2"><span id="sffs"><br>
  62.        Sign Up If You Would Like To Be Notified When We Are Up &amp; Running:</span></td>
  63.     </tr>
  64.       <tr>
  65.       </tr>
  66.       <tr>
  67.        <tr>
  68. <td width="118" valign="top"><label for="Email_Address" class="required"><span id="thirteen">Email </span></label></td> <td width="349" valign="top"><input type="text" name="Email_Address" id="Email_Address" maxlength="100" class="customfield" style="width:210px"> <input type="submit" class="custombutton" value=" Submit Form "></td></tr>
  69.       <tr>
  70.       </tr>
  71.    </table>
  72.     </form>
  73. </body>
  74. </html>
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 1:31 pm

and its just showing up like it did before. it gives me an error when i select live view
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8667
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post March 11th, 2012, 1:34 pm

What is the error?

Do a hard refresh (Press ctrl+F5 if on Windows PC) and check to see if it works.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post March 11th, 2012, 1:37 pm

are you using 1px wide gradients?

If you are, get rid of the "no-repeat" in your css that you just added.

You can replace it with "repeat-x".
Custom Web Design
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 1:53 pm

yes i made the image 1px by 100 px and saved it in my images folder then i changed it to html/images/gradient.png and its still not showing up
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 2:05 pm

OKAY here is what is in my code right now. all my files are saved and loaded in the right place. It should be something easy to fix...

let me kno what to do.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post March 11th, 2012, 2:51 pm

Did you get rid of the "no-repeat" and add "repeat-x"?

Or maybe it's "repeat-y". I'll have to double check...
Custom Web Design
  • miss tracy 221
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 11, 2012
  • Posts: 11
  • Status: Offline

Post March 11th, 2012, 2:55 pm

im going to post what i have up there right now
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post March 11th, 2012, 3:43 pm

Also, in that same css. try giving it an explicit height and width definition for each custom element.

form .customfield {
background: blah blah blah;
width: 100px;
height: 50px;
}

see if that works.
Custom Web Design
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 11th, 2012, 3:43 pm

1, 2

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 77 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.