How to replace the new Getresponse Opt-In Button with an image?

by lacruz
1 replies
  • WEB DESIGN
  • |
Hey!

I got the following code from my getresponse webform center:

<style type="text/css">#WFItem45363 html{color:#000 !important;background:#FFF !important;} #WFItem45363 body, #WFItem45363 div, #WFItem45363 dl, #WFItem45363 dt, #WFItem45363 dd, #WFItem45363 ul, #WFItem45363 ol, #WFItem45363 li, #WFItem45363 h1, #WFItem45363 h2, #WFItem45363 h3, #WFItem45363 h4, #WFItem45363 h5, #WFItem45363 h6, #WFItem45363 pre, #WFItem45363 code, #WFItem45363 form, #WFItem45363 fieldset, #WFItem45363 legend, #WFItem45363 input, #WFItem45363 textarea, #WFItem45363 p, #WFItem45363 blockquote, #WFItem45363 th, #WFItem45363 td{margin-left:0 !important;margin-right:0 !important;margin-top:0 !important;margin-bottom:0 !important;padding-left:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-top:0 !important;width:auto !important;} #WFItem45363 div, #WFItem45363 dl, #WFItem45363 dt, #WFItem45363 dd, #WFItem45363 ul, #WFItem45363 ol, #WFItem45363 li, #WFItem45363 h1, #WFItem45363 h2{border:none !important;background:none !important;float:none !important;width:auto !important;} #WFItem45363 table{border-collapse:collapse !important;border-spacing:0 !important;} #WFItem45363 fieldset, #WFItem45363 img{border:0 !important;} #WFItem45363 address, #WFItem45363 caption, #WFItem45363 cite, #WFItem45363 code, #WFItem45363 dfn, #WFItem45363 em, #WFItem45363 th, #WFItem45363 var{font-style:normal !important;font-weight:normal !important;} #WFItem45363 strong{font-style:normal !important;font-weight:bold !important;} #WFItem45363 em{font-style:italic !important;font-weight:normal !important;position:static !important;} #WFItem45363 li{list-style:none !important;}caption, #WFItem45363 th{text-align:left !important;} #WFItem45363 h1, #WFItem45363 h2, #WFItem45363 h3, #WFItem45363 h4, #WFItem45363 h5, #WFItem45363 h6{font-size:100% !important;font-weight:normal !important;} #WFItem45363 q:before, #WFItem45363 q:after{content: " " !important;} #WFItem45363 abbr, #WFItem45363 acronym{border:0 !important;font-variant:normal !important;} #WFItem45363 sup{vertical-align:text-top !important;} #WFItem45363 sub{vertical-align:text-bottom !important;} #WFItem45363 input, #WFItem45363 textarea, #WFItem45363 select{font-family:inherit !important;font-size:inherit !important;font-weight:inherit !important;height:auto !important;line-height:auto !important;} #WFItem45363 input, #WFItem45363 textarea, #WFItem45363 select{*font-size:100% !important;} #WFItem45363 legend{color:#000 !important;} #WFItem45363 .clearfix:after { visibility: hidden !important; display: block !important; font-size: 0 !important; content: " " !important; clear: both !important; height: 0 !important; } #WFItem45363 .clearer { clear:both !important; font-size:0.1px !important; height:0.1px !important; line-height:0.1px !important; width:100% !important; } #WFWrapper .close { background:url(http://www.getresponse.com/images/co...lide/close.png) repeat scroll 0 0 transparent !important; cursor:pointer !important; height:30px !important; position:absolute !important; right:-15px !important; top:-15px !important; width:30px !important;z-index:1 !important; } #WFItem45363 .clrB {clear:both !important;text-align:left !important;} #WFItem45363 * html .clearfix { zoom: 1 !important; } #WFItem45363 *:first-child+html .clearfix { zoom: 1 !important; } #WFItem45363 .wf-contbox { width:100% !important; } li:before {content: "" !important;} #WFItem45363 form { display:inline-block !important; width:100% !important; } #WFItem45363 label { margin:0 !important; } #WFItem45363 p { line-height:18px !important; font-size:11px !important; } #WFItem45363 {width:230px !important;} #WFItem45363 { color:#555555 !important; font-family:Arial,Helvetica,sans-serif !important; font-size:12px !important;} #WFItem45363 .wf-body li { padding:10px 15px !important; clear:both !important; } #WFItem45363 .actTinyMceElBodyContent ul li { padding:3px !important; list-style-type:disc !important; } #WFItem45363 .actTinyMceElBodyContent ol li { padding:3px !important; list-style-type:decimal !important; } #WFItem45363 .actTinyMceElBodyContent ul { margin-left: 20px !important; } #WFItem45363 .actTinyMceElBodyContent ol { margin-left: 25px !important; } #WFItem45363 .actTinyMceElBodyContent ol ol { margin-top: 0 !important; margin-bottom: 0 !important; } #WFItem45363 .wf-body { background-color:#a6979b !important; background-image:none !important; background-position:left top !important; background-repeat:no-repeat !important; border-color:#92757d !important; border-width:0px !important; border-style:None !important; padding-left:0 !important; padding-right:0 !important; padding-top:0 !important; padding-bottom:0 !important; -webkit-border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; border-bottom-right-radius: 0px !important; } #WFItem45363 .wf-body { background-color: transparent !important; } #WFItem45363 .wf-header { color:#ffffff !important; background-color:#6b6262 !important; background-image:none !important; background-position:left top !important; background-repeat:no-repeat !important; border-color:#6b6262 !important; border-width:0px !important; border-style:None !important; padding-left:10px !important; padding-right:10px !important; padding-top:10px !important; padding-bottom:10px !important; display:block !important; min-height:42px !important; -webkit-border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; border-bottom-right-radius: 0px !important; } #WFItem45363 .wf-header { background-color: transparent !important; background-image: none !important; padding-right: 0 !important; min-height:75px !important; color: #303030 !important; } #WFItem45363 .wf-footer { color:#ffffff !important; background-color:#6b6262 !important; background-image:none !important; background-position:left top !important; background-repeat:no-repeat !important; border-color:#6b6262 !important; border-width:0px !important; border-style:None !important; padding-left:10px !important; padding-right:10px !important; padding-top:10px !important; padding-bottom:10px !important; display:block !important; min-height:25px !important; -webkit-border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; border-bottom-right-radius: 0px !important; } #WFItem45363 .wf-footer { background-color: transparent !important; min-height:20px !important; } #WFItem45363 .wf-input { padding:2px 0 !important; font-family:Arial !important; font-size:12px !important; color:#000000 !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; background-color:#FFFFFF !important; border-width:1px !important; border-color:#919191 !important; border-style:solid !important; width:100% !important; -webkit-border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; border-bottom-right-radius: 0px !important; } #WFItem45363 .wf-input { font-family:Arial !important; font-size:12px !important; color:#000000 !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; background-color:#FFFFFF !important; border-width:1px !important; border-color:#919191 !important; border-style:solid !important; width:100% !important; -webkit-border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; border-bottom-right-radius: 0px !important; } #WFItem45363 .wf-label { font-family:Arial !important;font-size:14px !important;color: #303030 !important;font-weight:bold !important;font-style:normal !important;text-decoration:none !important;padding-top:3px !important;padding-bottom:3px !important;padding-right:3px !important;display:block !important;} #WFItem45363 .wf-button { font-family:Arial !important;font-size:14px !important;color: inherit !important;font-weight:bold !important;font-style:normal !important;text-decoration:none !important;background-color: #ddd !important;border-width:1px !important;border-color:#707070 !important;border-style:solid !important;padding-left:10px !important;padding-right:10px !important;padding-top:4px !important;padding-bottom:4px !important;-webkit-border-top-left-radius: 0px !important;-moz-border-radius-topleft: 0px !important;border-top-left-radius: 0px !important;-webkit-border-top-right-radius: 0px !important;-moz-border-radius-topright: 0px !important;border-top-right-radius: 0px !important;-webkit-border-bottom-left-radius: 0px !important;-moz-border-radius-bottomleft: 0px !important;border-bottom-left-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important;-moz-border-radius-bottomright: 0px !important;border-bottom-right-radius: 0px !important;} #WFItem45363 .wf-submit { text-align:right !important; } #WFItem45363 .wf-submit { text-align:right !important; } #WFItem45363 .wf-labelpos { float:none !important; width:auto !important; text-align:left !important; } #WFItem45363 .wf-labelpos { float:left !important; width:33% !important; text-align:left !important; } #WFItem45363 .wf-inputpos { float:none !important; width:auto !important; } #WFItem45363 .wf-inputpos { float:right !important; width:66% !important; } #WFItem45363 .wf-privacy { font-family:Arial !important; font-size:12px !important; color:#ffffff !important; font-weight:normal !important; font-style:italic !important; text-decoration:none !important; text-align:center !important; } #WFItem45363 .wf-privacy { background: none !important; padding: 0 !important; text-align: center !important; color: #303030 !important; } #WFItem45363 .wf-privacyico { padding:4px 0 0 20px !important; background:url(http://www.getresponse.com//images/c...forms/lock.png) no-repeat left center !important; } #WFItem45363 .wf-counter { font-family:Arial !important; font-size:12px !important; color:#44454f !important; font-weight:bold !important; font-style:normal !important; text-decoration:none !important; text-align:center !important; } #WFItem45363 .wf-poweredby { font-family:Arial !important; font-size:10px !important; color:#ffffff !important; font-weight:normal !important; font-style:italic !important; text-decoration:none !important; text-align:center !important; } #WFItem45363 .wf-link { font-family:Arial !important; font-size:12px !important; color:#ffffff !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; } #WFItem45363 .wf-link:hover { font-family:Arial !important; font-size:12px !important; color:#ffffff !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; } #WFItem45363 .wf-text { font-family:Arial !important; font-size:12px !important; color:#ffffff !important; } #WFItem45363 .wf-text { color:#85369a !important; } #WFItem45363 .wf-divider { border-top-width:1px !important; border-color:#ffffff !important; border-style:solid !important; } #WFItem45363 .wf-image { text-align:center !important; } #WFItem45363 .wf-privacylink { color:#ffffff !important; font-style:italic !important; } #WFItem45363 .wf-imgbox { overflow:hidden !important; } </style><div id="WFItem45363" class="wf-formTpl"><form accept-charset="utf-8" action="http://www.getresponse.com/add_contact_webform.html" method="post"> <div class="box"><div id="WFIheader" class="wf-header el" style="height: 75px; display: none !important;"> <div class="actTinyMceElBodyContent"><p><span style="font-size: 24px;"><br></br></span></p></div> <em class="clearfix clearer"></em></div><div id="WFIcenter" class="wf-body"><ul class="wf-sortable" id="wf-sort-id"> <li class="wf-name" rel="undefined" style="display: block !important;"><div class="wf-contbox"> <div class="wf-labelpos"> <label class="wf-label">Name:</label> </div> <div class="wf-inputpos"> <input type="text" class="wf-input wf-valid__length1to255" name="name"></input> </div> <em class="clearfix clearer"></em> </div></li><li class="wf-email" rel="undefined" style="display: block !important;"><div class="wf-contbox"> <div class="wf-labelpos"> <label class="wf-label">E-Mail:</label> </div> <div class="wf-inputpos"> <input type="text" class="wf-input wf-req wf-valid__email" name="email"></input> </div> <em class="clearfix clearer"></em> </div></li><li class="wf-submit" rel="undefined" style="display: block !important;"><div class="wf-contbox"> <div class="wf-inputpos"> <input type="submit" style="width: 143px ! important; display: inline !important;" class="wf-button" name="submit"></input> </div> <em class="clearfix clearer"></em> </div></li><li class="wf-counter" rel="temporary" style="display: none !important;"><div class="wf-contbox"><div><span style="padding: 4px 6px 8px 24px;" class="wf-counterbox"><span class="wf-counterboxbg" style="padding: 4px 12px 8px 5px;"><span class="wf-counterbox0" style="padding: 5px 0pt;"></span><span style="padding: 5px;" name="http://www.getresponse.com/display_subscribers_count.js?campaign_name=xxx_squ eeze_1&var=0" class="wf-counterbox1 wf-counterq">0</span><span style="padding: 5px 0pt;" class="wf-counterbox2"> subscribers</span></span></span></div><em class="clearfix clearer"></em></div></li><li class="wf-privacy" rel="temporary" style="display: none !important;"><div class="wf-contbox"><div><a style="width: 0px ! important; display: inline !important;" class="wf-privacy wf-privacyico" href="http://www.getresponse.com/permission-seal">Persönliche Daten werden vertraulich behandelt!</a></div><em class="clearfix clearer"></em></div></li><li class="wf-poweredby" rel="temporary" style="display: none !important; text-align: center;"><div class="wf-contbox"><div><span style="display: none !important;" class="wf-poweredby wf-poweredbyico"><a style="display: inline !important;" class="wf-poweredbylink wf-poweredby" href="http://www.getresponse.com/">Email Marketing</a> by GetResponse</span></div></div></li><li class="wf-image__0" rel="q0 temporary" style="display: none !important; text-align: center;"><div class="wf-contbox"><div class="wf-imgbox"><img src="http://www.getresponse.com/images/common/webforms/1/59/1/img/bg.png"></img></div><em class="clearfix clearer"></em></div></li> </ul></div><div id="WFIfooter" class="wf-footer el" style="height: 20px; display: none !important;"> <div class="actTinyMceElBodyContent"></div> <em class="clearfix clearer"></em></div></div> <input type="hidden" name="webform_id" value="45363"/></form></div><script type="text/javascript" src="http://www.getresponse.com/view_webform.js?wid=45363&mg_param1=1"></script>

I want to replace the "submit" button with my own submit graphic and can't quite figure how to get it linked so that the form will work. any suggestion?
#button #getresponse #image #optin #replace

Trending Topics