tamray_tech
asked on
Need assistance replacing form code in css and still maintain existing layout and graphics
I am assisting a friend in making changes in a css . He needs to replace the existing form code in a css with new code from a different vendor, but maintain the current layout and graphics. We are both novices and have been unable to maintain the formatting when integrating the new code.
All involved code is below:
Code for the existing layout:
Existing form code:
New Form Code:
All involved code is below:
Code for the existing layout:
#optin_area { background: #6d6e71 url(http://www.ginalamorte.com/wp-content/uploads/2014/02/optin_area.png) repeat-x top; padding: 20px 0 20px; _height: 1% }
#optin_area:after { clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden }
#optin_area .page { margin: 0 auto; position: relative; width: 847px }
#optin_area h3 {
background: url(http://www.ginalamorte.com/wp-content/uploads/2014/02/tag-line.png);
float: left;
height: 30px;
margin: 10px 10px 0 0;
text-indent: -9999px;
width: 416px;
}
#imgTagline {
position: absolute; z-index:2;
top: 16px; left: 130px;
}
#field_FirstName {
position: absolute; z-index:20;
top: 5px; left: 500px;
}
#field_Email {
position: absolute; z-index:20;
top: 5px; left: 670px;
}
.submitbutton {
background: transparent url(http://www.ginalamorte.com/wp-content/uploads/2014/02/sign-up2.png) center 0px no-repeat;
border: 0px solid #FFFFFF;
display: block;
text-indent: -9999px;
height: 73px; width: 74px;
padding: 0;
position: absolute; z-index:30;
top: -12px; left: 845px;
}
.submitbutton:hover {
background-position: 0px -73px !important;
background: transparent url(http://www.ginalamorte.com/wp-content/uploads/2014/02/sign-up2.png) center 0px no-repeat !important;
}
Â
.submitbutton:hover { background-position: 0px -73px; }
Existing form code:
<form accept-charset="UTF-8" action="https://tu192.infusionsoft.com/app/form/process/01d077cf3e292a2d50b4ef93f1bfde4f" class="infusion-form" method="post" id="optin_area">
<div class="row">
<input name="inf_form_xid" type="hidden" value="01d077cf3e292a2d50b4ef93f1bfde4f" />
<input name="inf_form_name" type="hidden" value="Webform &#a;Tips Opt In" />
<input name="infusionsoft_version" type="hidden" value="1.31.0.28" />
<div class="five columns">
<img src="http://www.ginalamorte.com/wp-content/uploads/2014/02/tag-line.png" width="416" height="30" alt="Get free tips." id="imgTagline" />
</div>
<div class="infusion-field two columns" id="field_FirstName">
<input name="inf_field_FirstName" id="inf_field_FirstName"
value="First Name"
size="17"
onblur="if (this.value == '') {this.value = 'First Name';}"
onfocus="if (this.value == 'First Name') {this.value = '';}"
type="text" />
</div>
<div class="infusion-field two columns" id="field_Email">
<input name="inf_field_Email" id="inf_field_Email"
value="E-Mail"
size="17"
onblur="if (this.value == '') {this.value = 'E-Mail';}"
onfocus="if (this.value == 'E-Mail') {this.value = '';}"
type="text" />
</div>
<div class="infusion-submit two columns">
<input class="submitbutton" type="submit" value="Submit" />
</div>
</div>
</form>
New Form Code:
> <!-- AWeber Web Form Generator 3.0 -->
>
> <form method="post" class="af-form-wrapper" accept-charset="iso-8859-1" action="http://www.aweber.com/scripts/addlead.pl" >
> <div style="display: none;">
> <input type="hidden" name="meta_web_form_id" value="342555603" />
> <input type="hidden" name="meta_split_id" value="" />
> <input type="hidden" name="listname" value="awlist3728459" />
> <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_ee56c250c6597963b2e8673fdd0cd28a" />
>
> <input type="hidden" name="meta_adtracking" value="Free_Tips_sign_up_" />
> <input type="hidden" name="meta_message" value="1" />
> <input type="hidden" name="meta_required" value="name,email" />
>
> <input type="hidden" name="meta_tooltip" value="" />
> </div>
> <div id="af-form-342555603" class="af-form"><div id="af-header-342555603" class="af-header"><div class="bodyText"><p> </p></div></div>
> <div id="af-body-342555603" class="af-body af-standards">
> <div class="af-element">
> <label class="previewLabel" for="awf_field-69373426">Name: </label>
> <div class="af-textWrap">
> <input id="awf_field-69373426" type="text" name="name" class="text" value="" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
> </div>
> <div class="af-clear"></div></div>
> <div class="af-element">
> <label class="previewLabel" for="awf_field-69373427">Email: </label>
> <div class="af-textWrap"><input class="text" id="awf_field-69373427" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
> </div><div class="af-clear"></div>
> </div>
> <div class="af-element buttonContainer">
> <input name="submit" id="af-submit-image-342555603" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://aweber.com/images/forms/plain/buttons/grey.png" tabindex="502" />
> <div class="af-clear"></div>
> </div>
> <div class="af-element privacyPolicy" style="text-align: center"><p>We respect your email privacy</p>
> <div class="af-clear"></div>
> </div>
> <div class="af-element poweredBy" style="text-align: center; font-size: 9px;"><p>Powered by AWeber Email Marketing Software</p>
> <div class="af-clear"></div>
> </div>
> </div>
> <div id="af-footer-342555603" class="af-footer"><div class="bodyText"><p> </p></div></div>
> </div>
> <div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=zCxMrKysbAzM" alt="" /></div>
> </form>
>
>
> <!-- /AWeber Web Form Generator 3.0 -->
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.