Link to home
Start Free TrialLog in
Avatar of tamray_tech
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:

#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; }

Open in new window



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>

Open in new window


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>&nbsp;</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>&nbsp;</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 -->

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial