Solved

Need assistance replacing form code in css and still maintain existing layout and graphics

Posted on 2015-01-19
1
56 Views
Last Modified: 2015-03-11
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

0
Comment
Question by:tamray_tech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40558154
Not going to happen.  The badly written and semantically horrible new markup does not use a structure or even the same elements as the old code.  You are not going to get the new form to look like the old form.

Throw away the old CSS and then style the new markup to get a look you like for the new layout.

Cd&
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question