The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to Insert Opt-in Form in Background
Scarlet
post Jan 31 2012, 06:55 PM
Post #1





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



Hello,

I am trying to figure out how to insert my opt-in form into an image that I created in "Paint." With a little help from the "Warrior Forum", I noticed that couldn't put my opt-in form code inside of an image. I noticed that the person who helped me changed the image to a background and then inserted my opt-in form code. The image can be found here:

http://www.teen-babble.com/images/facebook/fans.png

He sent me the html for everything. When I pulled in up in my html editor, the image as well as the opt-in form were present. However, the opt-in form covered up the arrow image that I had inserted at the bottom of the image. I would like for the opt-in form to be place to the right of the red arrow. He gave me this code here that includes the javascript for the form:

<html><head>
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
.optinzone{width:517px; height:580px; margin:10px auto 10px auto;padding:0px;
background-image:url(fans.png);border:1px solid white
}
.optinbox{width:250px; height:auto; margin:440px auto 0px auto;padding:5px;
border:0px solid black;
}

#af-form-1244754986 .af-body .af-textWrap{width:70%;display:block;float:right;}
#af-form-1244754986 .af-body input.text, #af-form-1244754986 .af-body textarea{background-color:#FFFFFF;border-color:#FFFFFF;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body input.text:focus, #af-form-1244754986 .af-body textarea:focus{background-color:#FFFFFF;border-color:#FFFFFF;border-width:5px;border-style:solid;}
#af-form-1244754986 .af-body label.previewLabel{display:block;float:left;width: 25%;text-align:right;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body{padding-bottom:5px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-quirksMode{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .af-standards .af-element{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .buttonContainer input.submit{background-color:#c2290e;background-image:url("http://forms.aweber.com/images/forms/mail-icon/red/button.png");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1244754986 .buttonContainer input.submit{width:auto;}
#af-form-1244754986 .buttonContainer{text-align:right;}
#af-form-1244754986 button,#af-form-1244754986 input,#af-form-1244754986 submit,#af-form-1244754986 textarea,#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{float:none;position:static;margin:0;}
#af-form-1244754986 div{margin:0;}
#af-form-1244754986 form,#af-form-1244754986 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1244754986 img{float:none;color:inherit;position:static;backg round-color:none;border:none;margin:0;padding:0;}
#af-form-1244754986 input,#af-form-1244754986 button,#af-form-1244754986 textarea,#af-form-1244754986 select{font-size:100%;}
#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{padding:0;}
#af-form-1244754986,#af-form-1244754986 .quirksMode{width:206px;}
#af-form-1244754986.af-quirksMode{overflow-x:hidden;}
#af-form-1244754986{background-color:#F8893E;border-color:#C2290E;border-width:2px;border-style:solid;}
#af-form-1244754986{display:block;}
#af-form-1244754986{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!impor tant;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>

</head>
<body>
<div class="optinzone">
<div class="optinbox">
<script type="text/javascript" src="http://forms.aweber.com/form/86/1244754986.js"></script>
</div>
</div>

</body></html>


This code here includes the raw html for the form:

<html><head>
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
.optinzone{width:517px; height:580px; margin:10px auto 10px auto;padding:0px;
background-image:url(fans.png);border:1px solid white
}
.optinbox{width:250px; height:auto; margin:440px auto 0px auto;padding:5px;
border:0px solid black;
}



#af-form-1244754986 .af-body .af-textWrap{width:70%;display:block;float:right;}
#af-form-1244754986 .af-body input.text, #af-form-1244754986 .af-body textarea{background-color:#FFFFFF;border-color:#FFFFFF;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body input.text:focus, #af-form-1244754986 .af-body textarea:focus{background-color:#FFFFFF;border-color:#FFFFFF;border-width:5px;border-style:solid;}
#af-form-1244754986 .af-body label.previewLabel{display:block;float:left;width: 25%;text-align:right;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body{padding-bottom:5px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-quirksMode{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .af-standards .af-element{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .buttonContainer input.submit{background-color:#c2290e;background-image:url("http://forms.aweber.com/images/forms/mail-icon/red/button.png");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1244754986 .buttonContainer input.submit{width:auto;}
#af-form-1244754986 .buttonContainer{text-align:right;}
#af-form-1244754986 button,#af-form-1244754986 input,#af-form-1244754986 submit,#af-form-1244754986 textarea,#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{float:none;position:static;margin:0;}
#af-form-1244754986 div{margin:0;}
#af-form-1244754986 form,#af-form-1244754986 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1244754986 img{float:none;color:inherit;position:static;backg round-color:none;border:none;margin:0;padding:0;}
#af-form-1244754986 input,#af-form-1244754986 button,#af-form-1244754986 textarea,#af-form-1244754986 select{font-size:100%;}
#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{padding:0;}
#af-form-1244754986,#af-form-1244754986 .quirksMode{width:206px;}
#af-form-1244754986.af-quirksMode{overflow-x:hidden;}
#af-form-1244754986{background-color:#F8893E;border-color:#C2290E;border-width:2px;border-style:solid;}
#af-form-1244754986{display:block;}
#af-form-1244754986{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!impor tant;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>



</head>
<body>
<div class="optinzone">
<div class="optinbox">
<!-- optin aweber code -->

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1244754986" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="teen-babble" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_dbe94b7b997eaa2a5eb93e8e76e9a590" />

<input type="hidden" name="meta_adtracking" value="Facebook_Web_Form" />
<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-1244754986" class="af-form"><div id="af-body-1244754986" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-30541798">Name: </label>
<div class="af-textWrap">
<input id="awf_field-30541798" type="text" name="name" class="text" value="" tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-30541799">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-30541799" type="text" name="email" value="" tabindex="501" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" id="af-submit-image-1244754986" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.aweber.com/images/forms/mail-icon/red/button.png" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jEwsLOysLJwcbA==" alt="" /></div>
</form>
<script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-1244754986")) {
document.getElementById("af-form-1244754986").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1244754986")) {
document.getElementById("af-body-1244754986").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1244754986")) {
document.getElementById("af-header-1244754986").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1244754986")) {
document.getElementById("af-footer-1244754986").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
<!-- optin aweber code ->


</div>
</div>

</body></html>


He told me to take this part...

.optinbox{width:250px; height:auto; margin:440px auto 0px auto;padding:5px;
border:0px solid black;
}


and change margin:440px auto 0px auto; to margin:440px 20px (or whatever I like) 0px auto;

He said changing from "auto" to a different number, in this case 20px, would shift the opt-in form to the right. Well, that didn't work for me. So, I need help (desperately) on how to shift my opt-in form to the right some more. Any help would be appreciated.

Thanks,

Scarlet
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2012, 08:05 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No, that would shift it to the left. The order of the margin values are top-right-bottom-left. So if you want to move the box to the right it's the last value you should change to the number of pixels you want it moved by. About 150px, from what it looks like.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scarlet
post Jan 31 2012, 09:34 PM
Post #3





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



QUOTE(pandy @ Jan 31 2012, 08:05 PM) *

No, that would shift it to the left. The order of the margin values are top-right-bottom-left. So if you want to move the box to the right it's the last value you should change to the number of pixels you want it moved by. About 150px, from what it looks like.


OMG!!! You are amazing. I wish I would have come here first instead of spending days on Youtube and Google. I don't know how to thank you. You have no idea what I've been through. Thanks so much, I greatly appreciate it.

But I realized I have another problem. Maybe you can help me with it. I tried entering the code into facebook for the fan page. However, Facebook is telling me that I'm using relative urls and that I need to use absolute urls. Is there a way for this to work using absolute urls and if so how? Here's the code:

<html><head>
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
.optinzone{width:517px; height:580px; margin:10px auto 10px auto;padding:0px;
background-image:url(fans.png);border:1px solid white
}
.optinbox{width:250px; height:auto; margin:440px auto 0px 150px;padding:5px;
border:0px solid black;
}



#af-form-1244754986 .af-body .af-textWrap{width:70%;display:block;float:right;}
#af-form-1244754986 .af-body input.text, #af-form-1244754986 .af-body textarea{background-color:#FFFFFF;border-color:#FFFFFF;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body input.text:focus, #af-form-1244754986 .af-body textarea:focus{background-color:#FFFFFF;border-color:#FFFFFF;border-width:5px;border-style:solid;}
#af-form-1244754986 .af-body label.previewLabel{display:block;float:left;width: 25%;text-align:right;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-body{padding-bottom:5px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Trebuchet MS, sans-serif;}
#af-form-1244754986 .af-quirksMode{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .af-standards .af-element{padding-right:9px;padding-left:9px;}
#af-form-1244754986 .buttonContainer input.submit{background-color:#c2290e;background-image:url("http://forms.aweber.com/images/forms/mail-icon/red/button.png");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1244754986 .buttonContainer input.submit{width:auto;}
#af-form-1244754986 .buttonContainer{text-align:right;}
#af-form-1244754986 button,#af-form-1244754986 input,#af-form-1244754986 submit,#af-form-1244754986 textarea,#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{float:none;position:static;margin:0;}
#af-form-1244754986 div{margin:0;}
#af-form-1244754986 form,#af-form-1244754986 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1244754986 img{float:none;color:inherit;position:static;backg round-color:none;border:none;margin:0;padding:0;}
#af-form-1244754986 input,#af-form-1244754986 button,#af-form-1244754986 textarea,#af-form-1244754986 select{font-size:100%;}
#af-form-1244754986 select,#af-form-1244754986 label,#af-form-1244754986 optgroup,#af-form-1244754986 option{padding:0;}
#af-form-1244754986,#af-form-1244754986 .quirksMode{width:206px;}
#af-form-1244754986.af-quirksMode{overflow-x:hidden;}
#af-form-1244754986{background-color:#F8893E;border-color:#C2290E;border-width:2px;border-style:solid;}
#af-form-1244754986{display:block;}
#af-form-1244754986{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!impor tant;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>



</head>
<body>
<div class="optinzone">
<div class="optinbox">
<script type="text/javascript" src="http://forms.aweber.com/form/86/1244754986.js"></script>
</div>
</div>

</body></html>


Thanks

Scarlet
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 31 2012, 09:39 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Sure. Just figure out what the relative URLs refer to and use the absolute URLs instead. Please see the FAQ entry How can I avoid using the whole URL?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scarlet
post Jan 31 2012, 09:56 PM
Post #5





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



QUOTE(Darin McGrew @ Jan 31 2012, 09:39 PM) *

Sure. Just figure out what the relative URLs refer to and use the absolute URLs instead. Please see the FAQ entry How can I avoid using the whole URL?


Hi,

I tried replacing...

background-image:url(fans.png); with background-image:url <http://www.teen-babble.com/images/facebook/fans.png> and all I could see was the opt-in form and not the image. I'm not an expert with html, so is there something I'm missing here? I know I'm doing something wrong.

Scarlet
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2012, 10:04 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You aren't supposed to change anything but the URL.

See the difference?
CODE
(fans.png)

CODE
<http://www.teen-babble.com/images/facebook/fans.png>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scarlet
post Jan 31 2012, 10:12 PM
Post #7





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



QUOTE(pandy @ Jan 31 2012, 10:04 PM) *

You aren't supposed to change anything but the URL.

See the difference?
CODE
(fans.png)

CODE
<http://www.teen-babble.com/images/facebook/fans.png>



Hi,

I only changed the url. This is how I'm entering it into Facebook...

<style type="text/css">
.optinzone{width:517px; height:580px; margin:10px auto 10px auto;padding:0px;
background-image:url (http://www.teen-babble.com/images/facebook/fans.png);border:1px solid white
}
.optinbox{width:250px; height:auto; margin:440px 50px 0px 150px;padding:5px;
border:0px solid black;
}


Is this not correct?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2012, 11:06 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



That is correct, but it's not what you first posted. What version did you really use at FB?

This is what you posted the first time
CODE
<http://www.teen-babble.com/images/facebook/fans.png>

and this is what you posted just now.
CODE
(http://www.teen-babble.com/images/facebook/fans.png)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scarlet
post Feb 1 2012, 12:43 PM
Post #9





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



QUOTE(pandy @ Jan 31 2012, 11:06 PM) *

That is correct, but it's not what you first posted. What version did you really use at FB?

This is what you posted the first time
CODE
<http://www.teen-babble.com/images/facebook/fans.png>

and this is what you posted just now.
CODE
(http://www.teen-babble.com/images/facebook/fans.png)



Hi Again,

I see what you're saying. I was entering it in wrong and it wasn't showing. That was my mistake. I have corrected it and everything appears to show as it's supposed to. I want to thank every one within this thread for their help, especially Pandy. I wouldn't have been able to do this without you.

I do have one more question. Once the code is placed and I view it in Firefox, it looks great! When I view it in IE, my opt-in box is pushed below the background, so it's not even within the image. Is there a fix to if readers view my fan page in IE then they can view it normal?

Thank you,

Scarlet

This post has been edited by Scarlet: Feb 1 2012, 01:06 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2012, 01:27 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No. This is a third version. There shouldn't be a space between 'url' and the parathereses.

CODE
url(http://...)

not
CODE
url (http://...)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2012, 01:30 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You edited your post. I replied to the first version....

About the IE problem, I don't know. Depends on what causes the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 1 2012, 01:39 PM
Post #12


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



There is general advice in the FAQ entry Why does my page display fine in one browser but incorrectly or not at all in another? For more specific advice, we'll need the URL (address) of a document that demonstrates the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Scarlet
post Feb 2 2012, 12:30 PM
Post #13





Group: Members
Posts: 6
Joined: 31-January 12
Member No.: 16,366



QUOTE(Darin McGrew @ Feb 1 2012, 01:39 PM) *

There is general advice in the FAQ entry Why does my page display fine in one browser but incorrectly or not at all in another? For more specific advice, we'll need the URL (address) of a document that demonstrates the problem.


Hi,

This issue seems to only happen when I enter the code into facebook and view it in IE. When I take the code by itself and view it in IE, it's fine. It's just when I enter the code into Facebook, while in IE and then view what it will look like, is to when the opt-in form is pushed outside of the image.

I could let you view my facebook fan page if you like. This way you could possibly see what the issue is. Are you up for that?

Thanks,

Scarlet
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:29 PM