How to embed a Getresponse optin form inside image
I hope someone can help me with this :confused:
The image is this one:
http://grantesorodeica.com.pe/wp-content/uploads/57.jpg
And the html code of the form is this one:
<style type="text/css">
#WFItem187942 html {
color:#000 !important;
background:#FFF !important;
}
#WFItem187942 body, #WFItem187942 div, #WFItem187942 dl, #WFItem187942 dt, #WFItem187942 dd, #WFItem187942 ul, #WFItem187942 ol, #WFItem187942 li, #WFItem187942 h1, #WFItem187942 h2, #WFItem187942 h3, #WFItem187942 h4, #WFItem187942 h5, #WFItem187942 h6, #WFItem187942 pre, #WFItem187942 code, #WFItem187942 form, #WFItem187942 fieldset, #WFItem187942 legend, #WFItem187942 input, #WFItem187942 textarea, #WFItem187942 p, #WFItem187942 blockquote, #WFItem187942 th, #WFItem187942 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;
background-image:none !important;
}
#WFItem187942 div, #WFItem187942 dl, #WFItem187942 dt, #WFItem187942 dd, #WFItem187942 ul, #WFItem187942 ol, #WFItem187942 li, #WFItem187942 h1, #WFItem187942 h2 {
border:none !important;
background:none !important;
float:none !important;
width:auto !important;
-moz-box-shadow:0 !important;
-webkit-box-shadow:0 !important;
box-shadow:0 !important;
text-indent:inherit !important;
}
#WFItem187942 table {
border-collapse:collapse !important;
border-spacing:0 !important;
}
#WFItem187942 fieldset, #WFItem187942 img {
border:0 !important;
}
#WFItem187942 address, #WFItem187942 caption, #WFItem187942 cite, #WFItem187942 code, #WFItem187942 dfn, #WFItem187942 em, #WFItem187942 th, #WFItem187942 var {
font-style:normal !important;
font-weight:normal !important;
}
#WFItem187942 strong {
font-style:normal !important;
font-weight:bold !important;
}
#WFItem187942 em {
font-style:italic !important;
font-weight:normal !important;
position:static !important;
}
#WFItem187942 li {
list-style:none !important;
}
caption, #WFItem187942 th {
text-align:left !important;
}
#WFItem187942 h1, #WFItem187942 h2, #WFItem187942 h3, #WFItem187942 h4, #WFItem187942 h5, #WFItem187942 h6 {
font-size:100% !important;
font-weight:normal !important;
}
#WFItem187942 q:before, #WFItem187942 q:after {
content:" " !important;
}
#WFItem187942 abbr, #WFItem187942 acronym {
border:0 !important;
font-variant:normal !important;
}
#WFItem187942 sup {
vertical-align:text-top !important;
}
#WFItem187942 sub {
vertical-align:text-bottom !important;
}
#WFItem187942 input, #WFItem187942 textarea, #WFItem187942 select {
font-family:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
height:auto !important;
line-height:auto !important;
}
#WFItem187942 input, #WFItem187942 textarea, #WFItem187942 select {
*font-size:100% !important;
}
#WFItem187942 legend {
color:#000 !important;
}
#WFItem187942 .clearfix:after {
visibility: hidden !important;
display: block !important;
font-size: 0 !important;
content:" " !important;
clear: both !important;
height: 0 !important;
}
#WFItem187942 .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(https://app.getresponse.com/images/c...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;
}
#wfCloseX {
background:url(https://app.getresponse.com/images/c...lide/close.png) repeat scroll 0 0 transparent !important;
cursor:pointer !important;
height:30px !important;
position:absolute !important;
right:0 !important;
top:0 !important;
width:30px !important;
z-index:1 !important;
cursor:pointer !important;
}
#WFItem187942 .clrB {
clear:both !important;
text-align:left !important;
}
#WFItem187942 * html .clearfix {
zoom: 1 !important;
}
#WFItem187942 *:first-child+html .clearfix {
zoom: 1 !important;
}
#WFItem187942 .wf-contbox {
width:100% !important;
}
li:before {
content:"" !important;
}
#WFItem187942 form {
display:inline-block !important;
width:100% !important;
}
#WFItem187942 label {
margin:0 !important;
}
#WFItem187942 p {
line-height:18px !important;
font-size:11px !important;
}
#WFItem187942 input[type="submit"] {
cursor:pointer !important;
}
#WFItem187942 {
width:190px !important;
}
#WFItem187942 {
color:#555555 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:12px !important;
}
#WFItem187942 .wf-body li {
padding:10px 15px !important;
clear:both !important;
}
#WFItem187942 .actTinyMceElBodyContent ul li {
padding:3px !important;
list-style-type:disc !important;
}
#WFItem187942 .actTinyMceElBodyContent ol li {
padding:3px !important;
list-style-type:decimal !important;
}
#WFItem187942 .actTinyMceElBodyContent ul {
margin-left: 20px !important;
}
#WFItem187942 .actTinyMceElBodyContent ol {
margin-left: 25px !important;
}
#WFItem187942 .actTinyMceElBodyContent ol ol {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-body {
background-color:#FFF !important;
color:#bd9c62 !important;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-header {
background-color:#FFF !important;
color:#8c0001 !important;
min-height:40px !important;
background-image:url(https://app.getresponse.com/images/c...img/bg_top.jpg) !important;
background-position:top center !important;
}
#WFItem187942 .wf-header {
-webkit-border-top-left-radius: 8px !important;
-moz-border-radius-topleft: 8px !important;
border-top-left-radius: 8px !important;
-webkit-border-top-right-radius: 8px !important;
-moz-border-radius-topright: 8px !important;
border-top-right-radius: 8px !important;
-webkit-border-bottom-left-radius: 8px !important;
-moz-border-radius-bottomleft: 8px !important;
border-bottom-left-radius: 8px !important;
-webkit-border-bottom-right-radius: 8px !important;
-moz-border-radius-bottomright: 8px !important;
border-bottom-right-radius: 8px !important;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-footer {
background-color:#FFF !important;
min-height:120px !important;
background-image:url(https://app.getresponse.com/images/c...mg/bg_foot.jpg) !important;
background-position:bottom center !important;
}
#WFItem187942 .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;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-input {
border-width:1px !important;
border-style:solid !important;
border-color:#919191 !important;
}
#WFItem187942 .wf-input {
width:99% !important;
}
#WFItem187942 .wf-label {
font-family:Arial !important;
font-size:12px !important;
color:#ffffff !important;
font-weight:bold !important;
font-style:normal !important;
text-decoration:none !important;
padding-top:3px !important;
padding-bottom:3px !important;
padding-left:0 !important;
padding-right:3px !important;
display:block !important;
}
#WFItem187942 .wf-label {
color:#8c0001 !important;
font-weight:bold !important;
}
#WFItem187942 .wf-button {
font-family:Arial !important;
font-size:16px !important;
color:#565050 !important;
font-weight:bold !important;
font-style:normal !important;
text-decoration:none !important;
background-color:#fce731 !important;
border-width:1px !important;
border-color:#000000 !important;
border-style:solid !important;
padding-left:10px !important;
padding-right:10px !important;
padding-top:4px !important;
padding-bottom:4px !important;
font-size:14px !important;
font-family:Arial !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;
}
#WFItem187942 .wf-button:hover {
!important;
}
#WFItem187942 .wf-button {
background-color:#8c0001 !important;
color:#FFF !important;
font-weight:bold !important;
font-size:16px !important;
border-width:1px !important;
border-style:solid !important;
border-color:#bfbfbf !important;
}
#WFItem187942 .wf-submit {
text-align:right !important;
}
#WFItem187942 .wf-submit {
text-align:center !important;
}
#WFItem187942 .wf-labelpos {
float:none !important;
width:auto !important;
text-align:left !important;
}
#WFItem187942 .wf-labelpos {
float:left !important;
width:33% !important;
text-align:left !important;
}
#WFItem187942 .wf-labelpos {
float:none !important;
width:auto !important;
text-align:left !important;
display:block !important;
}
#WFItem187942 .wf-inputpos {
float:none !important;
width:auto !important;
}
#WFItem187942 .wf-inputpos {
float:right !important;
width:66% !important;
}
#WFItem187942 .wf-inputpos {
float:none !important;
width:auto !important;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-privacy {
color:#8c0001 !important;
text-align:center !important;
font-style:italic !important;
min-height:18px !important;
display:none !important;
}
#WFItem187942 .wf-privacyico {
padding:4px 0 0 20px !important;
background:url(https://app.getresponse.com/images/c...forms/lock.png) no-repeat left center !important;
}
#WFItem187942 .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;
}
#WFItem187942 .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;
}
#WFItem187942 .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;
}
#WFItem187942 .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;
}
#WFItem187942 .wf-text {
font-family:Arial !important;
font-size:12px !important;
color:#ffffff !important;
}
#WFItem187942 .wf-text {
color:#8c0001 !important;
}
#WFItem187942 .wf-divider {
border-top-width:1px !important;
border-color:#ffffff !important;
border-style:solid !important;
}
#WFItem187942 .wf-image {
text-align:center !important;
}
#WFItem187942 .wf-privacylink {
color:#ffffff !important;
font-style:italic !important;
}
#WFItem187942 .wf-imgbox {
overflow:hidden !important;
}
#WFItem187942 .wf-rc-reload {
display:inline-block !important;
width:16px !important;
height:16px !important;
overflow:hidden !important;
text-indent:-99999px !important;
position:relative !important;
top:3px !important;
margin-left:3px !important;
background: url(https://app.getresponse.com/images/c...captchaico.png) no-repeat 0 -32px !important;
}
#WFItem187942 .wf-rc-audio {
display:inline-block !important;
width:16px !important;
height:16px !important;
overflow:hidden !important;
text-indent:-99999px !important;
position:relative !important;
top:3px !important;
margin-left:3px !important;
background: url(https://app.getresponse.com/images/c...captchaico.png) no-repeat 0 0 !important;
}
#WFItem187942 .wf-rc-image {
display:inline-block !important;
width:16px !important;
height:16px !important;
overflow:hidden !important;
text-indent:-99999px !important;
position:relative !important;
top:3px !important;
margin-left:3px !important;
background: url(https://app.getresponse.com/images/c...captchaico.png) no-repeat 0 -16px !important;
}
#WFItem187942 #recaptcha_image {
width:200px !important;
height:38px !important;
}
#WFItem187942 #recaptcha_image img {
width:200px !important;
height:38px !important;
}
#WFItem187942 .wf-rc-boxm {
width:200px !important;
margin:0 auto !important;
overflow:hidden !important;
}
#WFItem187942 em {
color:inherit !important;
font-style:italic !important;
}
#WFItem187942 .wf-counter span {
color:#8c0001 !important;
}
</style>
<div id="WFItem187942" class="wf-formTpl">
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html"
method="post">
<div class="box">
<div id="WFIheader" class="wf-header el" style="height: 67.02px; display: none !important;">
<div class="actTinyMceElBodyContent">
<p>
<span style="font-size: 24px;">
<br />
<br />
<span style="font-size: 18px;">Suscripción Gratuita:</span>
</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-text__0" rel="q0" style="display: block !important;">
<div class="wf-contbox">
<div class="actTinyMceElBodyContent wf-text">
<p>
<span style="font-size: 14px;">Suscripción Gratuita:</span>
</p>
</div>
<em class="clearfix clearer"></em>
</div>
</li>
<li class="wf-name" rel="undefined" style="display: block !important;">
<div class="wf-contbox">
<div class="wf-labelpos">
<label class="wf-label">Tu Nombre:</label>
</div>
<div class="wf-inputpos">
<input name="name" class="wf-input wf-valid__length1to255" type="text"></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">Tu Email:</label>
</div>
<div class="wf-inputpos">
<input name="email" class="wf-input wf-req wf-valid__email" type="text"></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 name="submit" class="wf-button" style="width: 104px !important; display: inline !important;"
type="submit" value="SuscrÃbete"></input>
</div>
<em class="clearfix clearer"></em>
</div>
</li>
<li class="wf-counter" rel="undefined" style="display: none !important;">
<div class="wf-contbox">
<div>
<span class="wf-counterbox" style="background: url(https://app.getresponse.com/images/c...rtemplates.png) no-repeat left 0px; padding: 4px 6px 8px 24px;">
<span class="wf-counterboxbg" style="background: url(https://app.getresponse.com/images/c...rtemplates.png) no-repeat right -36px; padding: 4px 12px 8px 5px;">
<span class="wf-counterbox0" style="padding: 5px 0px;"></span>
<span class="wf-counterbox1 wf-counterq" style="padding: 5px;"
name="https://app.getresponse.com/display_...var=0">0</span>
<span class="wf-counterbox2" style="padding: 5px 0px;">subscribers</span>
</span>
</span>
</div>
</div>
</li>
<li class="wf-captcha" rel="undefined" style="display: none !important;">
<div class="wf-contbox wf-captcha-1" id="wf-captcha-1" wf-captchaerror="Incorrect please try again"
wf-captchasound="Enter the numbers you hear:" wf-captchaword="Enter the words above:"></div>
</li>
<li class="wf-privacy" rel="temporary" style="display: none !important;">
<div class="wf-contbox">
<div>
<a class="wf-privacy wf-privacyico" style="height: 0px !important; display: inline !important;"
href="http://www.getresponse.es/permission-seal?lang=es" target="_blank">We respect your privacy<em class="clearfix clearer"></em></a>
</div>
<em class="clearfix clearer"></em>
</div>
</li>
<li class="wf-poweredby" rel="temporary" style="display: none !important;">
<div class="wf-contbox">
<div>
<span class="wf-poweredby wf-poweredbyico" style="display: none !important;">
<a class="wf-poweredbylink wf-poweredby" style="display: inline !important;"
href="http://www.getresponse.es/" target="_blank">Email Marketing</a>by GetResponse</span>
</div>
</div>
</li>
</ul>
</div>
<div id="WFIfooter" class="wf-footer el" style="height: 120.02px; display: none !important;">
<div class="actTinyMceElBodyContent"></div>
<em class="clearfix clearer"></em>
</div>
</div>
<input type="hidden" name="webform_id" value="187942" />
</form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webf...m1=1"></script> -
JimDucharme -
[ 2 ] Thanks - 1 reply
{{ DiscussionBoard.errors[6251658].message }}-
pinterest01 -
Thanks
{{ DiscussionBoard.errors[6251766].message }} -
-
-
Alfredo Carrion -
Thanks - 1 reply
Signature[WSO] No Matter What I Try This System Just Keeps Working{{ DiscussionBoard.errors[6254804].message }}-
JimDucharme -
Thanks
{{ DiscussionBoard.errors[6255392].message }} -
-