Field Labels Inside of Fields, Need help getting labels inside fields and alignment Options

[jcgr]

Need some help. I had somebody code a simple opt-in form for me. They got it to look the way I liked it, but then I ended up changing where we were sending the form contents to. Now, I can't seem to get in contact with him, and I need this down asap. So I'm trying to use the styles he coded for me, but I don't think some of the div names are the same, as it's not looking right. I've tried with my limited knowledge to go through the code and make it match, but...

It's supposed to look like the opt-ins at www.fathalf.com. I cloned that page and am testing it at fathalf.com/home-2. Obviously it's not looking right.

Here is the code he created:

CODE

<style>
.signup {
       width: 100%;
       max-width: 600px;
       margin: 0 auto;
       position: relative;
       top: 36px;
}
form{
    max-width: 100%;
    min-width: 25%;
    border-width: 0px;
    color: #3b3b3b;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}
form div{
    display: inline-block;
}
form input[type=text] {
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 9px;
    box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -moz-box-shadow: 0px 0px 5px #000;
    padding: 10px!important;  
}
form {
    font-family: 'Source Sans Pro', sans-serif;;
}

.clear{
    clear: both;
}

form input[type=submit]{
    width: 100%;
    background-color: #F7CD31;
    color: #3b3b3b;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -moz-box-shadow: 0px 0px 5px #000;
       padding: 10px!important;
       font-size: 12px;
       font-weight: bold;
text-transform: uppercase;
-webkit-appearance:none;
}
.field{
    margin: 0 6px 5px;
}
@media only screen and (max-width: 568px) {
.signup {
    top: 52px;
}
form div{
    display: block;
}
form input[type=text] {
width: 100%;
max-width: 390px;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 320px) {
form input[type=text] {
max-width: 270px;
}
}
</style>

<div class="signup">
<form class="infusion-form" accept-charset="UTF-8" action="https://xq108.infusionsoft.com/app/form/process/fc5f87cfe8973db0fa7084c05c8178d6" method="POST" name="Sign up for newsletter"><input name="inf_form_xid" type="hidden" value="fc5f87cfe8973db0fa7084c05c8178d6" /><input name="inf_form_name" type="hidden" value="Sign up for newsletter" /><input name="infusionsoft_version" type="hidden" value="1.29.11.21" />
    <div class="content">
        <div id="section0" >
            <div class="field"><input id="inf_field_FirstName" class="infusion-field-input-container" value="First Name..." name="inf_field_FirstName" type="text" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></div>
            <div class="field"><input id="inf_field_Email" class="infusion-field-input-container" value="Email Address..." name="inf_field_Email" type="text" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></div>
            <div class="field"><input type="submit" value="Start Now!"></div>
        </div>
    </div>
</form>
</div>

This is the code that was generated by my newsletter service to use as an opt-in. Problem is that this code doesn't look like the other:

CODE

<style>
  ._form {
  position:relative;
  background:#fff;
  width:225px;/*F*/
  padding:0!important;
  text-align:left;
  }
  ._form em {
  color:#9a9a9a;
  }
  ._form a {
  margin-left:3px;
  }
  ._form ._field,
  ._form ._field ._label,
  ._form ._type_radio,
  ._form ._type_checkbox,
  ._form ._type_captcha,
  ._form ._field table {
  background:none;
  }
  ._form ._field  {
  position:relative;
  width:100%;
  cursor:move;
  font-style:normal;
  margin:1.2em 0;
  padding:0;
  overflow:hidden;
  }
  ._form ._field input[type="text"] {
  width:95%;
  padding:8px;
  font-size:16px;
  border:1px solid #b6b6b6;
  }
  ._form ._field ._label {
  display:block;
  margin:0 0 0.5em;
  padding:0!important;
  font-size:15px;
  }
  ._form ._field ._option input[type="checkbox"],
  ._form ._field ._option input[type="radio"] {
  position:relative;
  width:13px;
  height:13px;
  margin:-4px 0 0 1px;
  cursor:pointer;
  vertical-align:middle;
  background:#fff;
  }
  ._form ._field ._option input[type="submit"],
  ._form ._field ._option input[type="button"] {
  margin:0;
  cursor:pointer;
  height:35px;
  width:auto;
  font-size:15px;
  }
  ._form ._field ._option select {
  display:block;
  margin:0;
  padding:0;
  width:auto;
  font-size:15px;
  border:1px solid #b6b6b6;
  }
  ._form ._type_radio ._option,
  ._form ._type_checkbox ._option {
  font-size:13px;
  font-weight:normal;
  line-height:1.8;
  }
  ._form ._type_date ._option input[type="text"] {
  float:left;
  width:100px;
  }
  ._form ._type_date ._option input[type="button"] {
  width:37px;
  height:36px;
  margin-left:5px;
  padding:20px;
  background:url(https://jva993.activehosted.com/admin/css/../images/icon_calendar.gif) no-repeat 0 0;
  border:none;
  outline:none;
  text-indent:-9999px;
  }
  ._form ._type_captcha img {
  float:left;
  margin:0 6px 0 0;
  width:70px;
  height:33px;
  border:1px solid #b6b6b6;
  }
  ._form ._type_captcha input[type="text"] {
  margin:-14px 0 0 0!important;
  width:25%;
  }
  ._form ._field table  {
  width:100%!important;
  }
  ._form ._field table tbody tr td  {
  width:50%!important;
  font-size:15px;
  }
  ._form {
  width:225px;/*F*/
  background:#fff;
  color:#2c2c2c;
  font-weight:normal;
  }
  ._form #notice {
  margin:10px 0 0 -3px!important;
  padding:0;
  color:#acacac;
  font-size:11px;
  font-family:helvetica,arial,sans-serif;
  }
  ._form #notice a:link, ._form #notice a:visited {
  color:#acacac;
  text-decoration:underline;
  }
  ._form ._field  {
  position:relative;
  width:100%;
  cursor:default;
  font-style:normal;
  margin:0 0 16px;
  padding:0;
  overflow:hidden;
  }
  ._form ._field input[type="text"],
  ._form ._field input[type="email"] {
  width:96%;
  padding:4px;
  font-size:14px;
  background:#fafafa;
  border:1px solid #c7c7c7;
  border-top:1px solid #b6b6b6;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  }
  ._form ._field ._label {
  margin:0 0 4px;
  color:#2c2c2c;
  font-size:13px;
  font-family:helvetica,arial,sans-serif;
  font-weight:700;
  }
  ._form ._field ._option {
  margin:0;
  padding:0;
  color:#2c2c2c;
  font-size:13px;
  font-family:helvetica,arial,sans-serif;
  font-weight:normal;
  line-height:20px;
  }
  ._form ._type_header ._label {
  width:100%;
  font-style:normal;
  font-size:16px!important;
  line-height:20px;
  color:#005698;
  margin:0 0 5px!important;
  padding:0 0 10px!important;
  overflow:hidden;
  border-bottom:1px solid #e0e0e0;
  }
  ._form ._type_input ._option  textarea{
  width:97%!important;
  background:#fafafa;
  border:1px solid #c7c7c7;
  border-top:1px solid #b6b6b6;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  }
  ._form ._type_input ._option input[type="submit"],
  ._form ._type_input ._option input[type="button"] {
  width:auto;
  margin:10px 0 0!important;
  padding:2px 15px!important;
  cursor:pointer;
  font-family:verdana,arial,sans-serif;
  font-weight:700;
  font-size:12px;
  color:#3f3f3f;
  background:#f7f7f7 url(https://jva993.activehosted.com/admin/templates/form-themes/compact-basic/images/btn_bg.gif) repeat-x 0 0;
  border:1px solid #999999;
  border-bottom:1px solid #888888;
  text-align:center;
  }
  ._form ._type_input ._option input[type="submit"]:hover,
  ._form ._type_input ._option input[type="button"]:hover {
  border:1px solid #afafaf;
  border-bottom:1px solid #a5a5a5;
  background:#f7f7f7;
  color:#525252;
  }
  ._form ._type_date ._option input[type="text"] {
  float:left;
  width:100px;
  }
  ._form ._type_radio ._option label {
  display:inline;
  font-size:14px;
  font-weight:normal;
  line-height:18px;
  }
  ._form ._type_radio ._option label input[type="radio"] {
  position:relative;
  width:13px;
  height:13px;
  margin:-4px 0 0 1px;
  cursor:pointer;
  vertical-align:middle;
  background:#fff;
  line-height:20px;
  }
  ._form ._type_date ._option input[type="button"] {
  width:24px;
  height:24px;
  margin:2px 0 0 5px;
  padding:0;
  background:url(https://jva993.activehosted.com/admin/templates/form-themes/compact-basic/images/icon_calendar.gif) no-repeat 0 0;
  border:none;
  outline:none;
  text-indent:-9999px;
  }
  ._form ._field ._option select {
  display:block;
  margin:0;
  padding:0;
  width:auto;
  font-size:14px;
  border:1px solid #b6b6b6;
  }
  ._form ._type_captcha img {
  float:left;
  width:42px;
  height:24px;
  margin:0 6px 0 0;
  border:1px solid #b6b6b6;
  }
  ._form ._type_captcha input[type="text"] {
  float:left;
  margin:0!important;
  width:40%;
  font-size:14px;
  }
  ._form ._field table {
  margin:0;
  padding:0;
  border-collapse:collapse;
  width:100%!important;
  table-layout:fixed;
  margin-bottom:18px;
  font-size:13px!important;
  border-collapse:collapse;
  border-spacing:0;
  }
  ._form ._field table td {
  padding:0 10px 0 0!important;
  line-height:18px;
  text-align:left;
  font-size:13px!important;
  color:#606060;
  }
  ._form ._type_input ._option  table tbody#_forward_rcpt input {margin:0 0 4px 0; width:96%!important;}
  ._form ._type_input ._option  table tbody#_forward_rcpt img.image_addrcpt {cursor:pointer;}
  .form_errors{
  text-align:center;
  font-size:15px;
  margin:10px;
  color:#900;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  margin-bottom:20px;
  }
</style>
<form action='//jva993.activehosted.com/proc.php' method='post' id='_form_1012' accept-charset='utf-8' enctype='multipart/form-data'>
  <input type='hidden' name='f' value='1012'>
  <input type='hidden' name='s' value=''>
  <input type='hidden' name='c' value='0'>
  <input type='hidden' name='m' value='0'>
  <input type='hidden' name='act' value='sub'>
  <input type='hidden' name='nlbox[]' value='1'>
  <div class='_form'>
    <div class='formwrapper'>
      <div id='_field39'>
        <div id='compile39' class='_field _type_input'>
          <div class='_label '>
            Name
          </div>
          <div class='_option'>
            <input type='text' name='fullname' >
          </div>
        </div>
      </div>
      <div id='_field40'>
        <div id='compile40' class='_field _type_input'>
          <div class='_label '>
            Email *
          </div>
          <div class='_option'>
            <input type='email' name='email' >
          </div>
        </div>
      </div>
      <div id='_field41'>
        <div id='compile41' class='_field _type_input'>
          <div class='_option'>
            <input type='submit' value="Start Now!">
          </div>
        </div>
      </div>
    </div>
    <div class="preview_part">
      <div id="notice">
        <a href="http://www.activecampaign.com/" title="email marketing" target="_blank">email marketing</a>
        by activecampaign
      </div>
    </div>
  </div>
</form>

Here is how I tried to combine it:

CODE

<style>
.signup {
       width: 100%;
       max-width: 600px;
       margin: 0 auto;
       position: relative;
       top: 30px;
}
form{
    max-width: 100%;
    min-width: 25%;
    border-width: 0px;
    color: #3b3b3b;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}
form div{
    display: inline-block;
}
form input[type=text] {
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 9px;
    box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -moz-box-shadow: 0px 0px 5px #000;
    padding: 10px!important;  
}
form {
    font-family: 'Source Sans Pro', sans-serif;;
}

.clear{
    clear: both;
}

form input[type=submit]{
    width: 100%;
    background-color: #F7CD31;
    color: #3b3b3b;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -moz-box-shadow: 0px 0px 5px #000;
       padding: 10px!important;
       font-size: 12px;
       font-weight: bold;
text-transform: uppercase;
-webkit-appearance:none;
}
.field{
    margin: 0 6px 5px;
}
@media only screen and (max-width: 568px) {
.signup {
    top: 52px;
}
form div{
    display: block;
}
form input[type=text] {
width: 100%;
max-width: 390px;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 320px) {
form input[type=text] {
max-width: 270px;
}
}
</style>

<div class="signup">
<form action='//jva993.activehosted.com/proc.php' method='post' id='_form_1012' accept-charset='utf-8' enctype='multipart/form-data'>
  <input type='hidden' name='f' value='1012'>
  <input type='hidden' name='s' value=''>
  <input type='hidden' name='c' value='0'>
  <input type='hidden' name='m' value='0'>
  <input type='hidden' name='act' value='sub'>
  <input type='hidden' name='nlbox[]' value='1'>
  <div class='_form'>
    <div class='formwrapper'>
      <div class="_field39"><input id="inf_field_FirstName" class="_field _type_input" value="First Name..." name="_field_FirstName" type="text" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></div>
          </div>
        </div>
      </div>
      <div id='_field40'>
        <div id='compile40' class='_field _type_input'>
          
<div class="field"><input id="_field40" class="_field _type_input" value="Email Address..." name="_field_Email" type="text" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></div>
           </div>
        </div>
      </div>
      <div id='_field41'>
        <div id='compile41' class='_field _type_input'>
          <div class='_option'>
            <input type='submit' value="Start Now!">
          </div>
        </div>
      </div>
    </div>
</form>
</div>