Position Opt-in Form

Hi Guys,

I would like my form to look like the form in this example: http://www.amyporterfield.com/

Here is the site am working on: http://www.thesupersuccessfulestateagent.co.uk/

Here is the css code:

.horizontal-optin {
margin-top: 3.2rem; /Delete this in Minimum Pro/
background: #fff;

}

.horizontal-optin .enews-widget input {
width: 35% !important;

}

I have tried a few things but nothing has worked out.

Any ideas on how to get my site looking like the example please?

Thanks

Hi sookie. Welcome to the forums. :slight_smile:

Are you going to have a name field as well? When you say ‘looking the same’, could you be more specific? Could you post a screen shot of the layout you want?

Hi Ralp,

Thanks for responding. This is what I would like my image to look like: H
Here is what I have been able to do so far:

Also here is my css code:


/* Hompage
------------------------------------------------------------ */

#optin {
	width: 960px;
	height: 381px;
	margin: 30px auto 40px auto;
	background: #484848 url(<img src="") top no-repeat;
	position: relative;
	font-family: 'Bitter', Georgia, Times, serif;
}

#optin h5 {
	font-size: 32px;
	color: #FFF;
	font-family: 'Bitter', Georgia, Times, serif;
	font-weight: 400;
	position: absolute;
	line-height: 42px;
	top: 10px;
	left: 320px;
	text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
	text-align: center;
}

#optin h5 span {
	font-family: 'Over the Rainbow';
}

#optin p.top {
	font-family: 'Bitter', Georgia, Times, serif;
	font-size: 17px;
	font-weight: 700;
	color: #FFF;
	position: absolute;
	top: 110px;
	left: 338px;
	text-shadow: 1px 2px 2px #333;
}

#optin ul {
	font-size: 18px;
	color: #FFF;
	position: absolute;
	top: 150px;
	left: 380px;
	text-shadow: 1px 2px 2px #333;
	padding-right: 15px;
}

#optin li {
	margin-bottom: 18px;
	line-height: 20px;
}

#optin p.bottom {
	font-family: 'Bitter', Georgia, Times, serif;
	font-size: 17px;
	color: #484848;
	position: absolute;
	top: 305px;
	left: 360px;
}

#optin form {
	position: absolute;
	top: 305px;
	left: 360px;
}

#optin input[type=text] {
	background: #e1dede;
	border: 1px solid #323131;
	border-radius: 0;
	padding: 10px;
	font-size: 18px;
}

#optin input[type=submit] {
	border: 1px solid #323131;
	border-radius: 2px;
	background: #d40e27;
	background: -moz-linear-gradient(top,  #d40e27 0%, #7c040c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d40e27), color-stop(100%,#7c040c));
	background: -webkit-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: -o-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: -ms-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: linear-gradient(to bottom,  #d40e27 0%,#7c040c 100%);
	font-family: 'Bitter', Georgia, Times, serif;
	font-weight: 700;
	font-size: 16px;
	padding: 9px;
	line-height: 1.6;
}

/*
input#optin-email {
	background: #e1dede;
	border: 1px solid #333333;
	position: absolute;
	font-family: 'Bitter', Georgia, Times, serif;
	color: #666;
	padding: 10px;
	top: 295px;
	left: 360px;
	width: 320px;
	font-size: 16px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#optin-submit {
	position: absolute;
	top: 297px;
	left: 720px;
	border: 1px solid #57030c;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	font-family: 'Bitter', Georgia, Times, serif;
	text-transform: uppercase;
	padding: 11px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#optin p.quote {
	font-size: 12px;
	line-height: 15px;
	font-style: italic;
	position: absolute;
	top: 350px;
	left: 360px;
	padding: 0 10px 0 0;
}
*/

/* Optin widget
------------------------------------------------------------ */

.optin-widget p {
	padding: 0 0 10px 0;
}

.optin-widget p.small {
	font-size: 11px;
	color: #666;
}

#optin-email-sidebar {
	border-radius: 0;
	-moz-border-radius: 0;
	padding: 7px;
	font-size: 14px;
	width: 180px;
}

#optin-submit-sidebar {
	border: 1px solid #a11115;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	padding: 8px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Am not sure what am doing wrong. Thanks

The main issue there is that your inputs are set to width: 100%. You could set them, say, to width: 27% to get close:

input, select, textarea {
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 5px;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
padding: 10px;
padding: 1rem;
[COLOR="#FF0000"]width: 27%;[/COLOR]
}

Or give them specific pixel widths instead for more accurate results.

Thank you, that worked perfectly. I do have one more question: when I scroll on the website the content is disappearing up, how do I stop that?

Thanks!

This is what 's happening when I scroll to the bottom of the page:

The content is disappearing. How do I fix this please? Thanks!

Your layout has a fixed header that stays visible. If you don’t want that, just remove the line in red (style.css, line 951):

.site-header {
background-color: #FFF;
border-bottom: 1px solid #EEE;
letter-spacing: 1px;
letter-spacing: 0.1rem;
[COLOR="#FF0000"]position: fixed;[/COLOR]
width: 100%;
z-index: 999;
}

Thanks so much Ralph. I really appreciate your help. Today you were my super hero! Have a lovely day!

Thanks very much, sookie. Glad I was able to help. :slight_smile:

Hi Guys,

Am trying to create a horizontal form using Aweber. Here is the site http://www.thesupersuccessfulestateagent.co.uk/

I want the form to look like this: http://www.amyporterfield.com/

Here is my css code:


#optin {
	width: 960px;
	height: 381px;
	margin: 30px auto 40px auto;
	background: #484848 url(<img src="">) top no-repeat;
	position: relative;
	font-family: 'Bitter', Georgia, Times, serif;
}

#optin h5 {
	font-size: 32px;
	color: #FFF;
	font-family: 'Bitter', Georgia, Times, serif;
	font-weight: 400;
	position: absolute;
	line-height: 42px;
	top: 10px;
	left: 320px;
	text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
	text-align: center;
}

#optin h5 span {
	font-family: 'Over the Rainbow';
}

#optin p.top {
	font-family: 'Bitter', Georgia, Times, serif;
	font-size: 17px;
	font-weight: 700;
	color: #FFF;
	position: absolute;
	top: 110px;
	left: 338px;
	text-shadow: 1px 2px 2px #333;
}

#optin ul {
	font-size: 18px;
	color: #FFF;
	position: absolute;
	top: 150px;
	left: 380px;
	text-shadow: 1px 2px 2px #333;
	padding-right: 15px;
}

#optin li {
	margin-bottom: 18px;
	line-height: 20px;
}

#optin p.bottom {
	font-family: 'Bitter', Georgia, Times, serif;
	font-size: 17px;
	background-color: #e1dede;
	position: absolute;
	top: 305px;
	left: 360px;
}

#optin form {
	position: absolute;
	top: 359px;
	left: 360px;
}

#optin input[type=text] {
	background: #e1dede;
	border: 1px solid #323131;
	border-radius: 0;
	padding: 10px;
	font-size: 18px;
        width:27%;
        
}

#optin input[type=submit] {
	border: 1px solid #323131;
	border-radius: 2px;
	background: #d40e27;
	background: -moz-linear-gradient(top,  #d40e27 0%, #7c040c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d40e27), color-stop(100%,#7c040c));
	background: -webkit-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: -o-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: -ms-linear-gradient(top,  #d40e27 0%,#7c040c 100%);
	background: linear-gradient(to bottom,  #d40e27 0%,#7c040c 100%);
	font-family: 'Bitter', Georgia, Times, serif;
	font-weight: 700;
	font-size: 16px;
	padding: 9px;
	line-height: 1.6;
}

/*
input#optin-email {
	background: #e1dede;
	border: 1px solid #333333;
	position: absolute;
	font-family: 'Bitter', Georgia, Times, serif;
	color: #666;
	padding: 10px;
	top: 295px;
	left: 360px;
	width: 320px;
	font-size: 16px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#optin-submit {
	position: absolute;
	top: 297px;
	left: 720px;
	border: 1px solid #57030c;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	font-family: 'Bitter', Georgia, Times, serif;
	text-transform: uppercase;
	padding: 11px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#optin p.quote {
	font-size: 12px;
	line-height: 15px;
	font-style: italic;
	position: absolute;
	top: 350px;
	left: 360px;
	padding: 0 10px 0 0;
}
*/

Thanks

Isn’t this the same question you already posted 12 hours ago?

Huh? I thought we sorted all this out!? Are you using a different form now? Heck, it’s pretty horrible code, I must say. An email service should provide you with just basic form code, rather than with all that div mess. :rolleyes:

Anyhow, here is some quick and dirty code you could add to the end of your style sheet:

#optin form {width: 600px;}

#optin .af-form label {position: absolute; margin-left: -9999px;}

#optin .af-form input {width: 100%; display: inline-block;}

#optin div.af-element {display: inline-block; width: 166px;}
#optin p {display: none;}

#optin div.af-element:last-child {width: 260px; position: relative; top: -2px;}

Because it hides the labels, you could partially make up for it by adding placeholder text. E.g.

<input id="awf_field-56074203" type="text" name="name" class="text" value="" tabindex="500" [COLOR="#FF0000"]placeholder ="Your Email Address"[/COLOR]>

However, that won’t work in older versions of IE, so if you need placeholder text for those browsers, let us know, and we can suggest some JS that will add placeholder text.

No, it’s different, I use infusionsoft for the form which worked well but I now have to use Aweber which isn’t appearing like before.

OK, check out my post above and see if that helps.

Thanks for that Ralph. I tried to put the placeholders and they are not showing.

May I please have the placeholder for the other browsers? Thanks

Here is the code to my Aweber form and I noticed when I tried to sign up the form isn’t working:

<!-- AWeber Web Form Generator 3.0 -->
<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="196413754" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="win-instruction" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_51e7c7a59b265d3b99f33158fb19eccf" />

<input type="hidden" name="meta_adtracking" value="sam_ashdown" />
<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-196413754" class="af-form"><div id="af-body-196413754"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-56074203">Name: </label>
<div class="af-textWrap">
<input id="awf_field-56074203" 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-56074204">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-56074204" type="text" name="email" value="" tabindex="501"  />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="SIGN UP TO MY SUPER TIPS" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jJxsLIzM7Kws" alt="" /></div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->
    </div><!-- #optin -->


Thanks

Ok sorry. It just looked like the same question :slight_smile:

If you want a background behind those input now that you’ve added Ralph’s code you could do this:


.af-form {
background:#CCCCCC;
margin-top: -53px;
padding:53px 0 0;
}
#optin input[type="submit"] {
position:relative;
top:-4px;
padding:13px 9px 12px;
}

Yikes, I tried your link again and the site is gone. :-/

As I said, that code looks pretty awful. My first suggestion would be to ditch Aweber and go for CampaignMonitor, which provides very simple, clean code for your form.

Perhaps sort that out (and your site hosting/domain) before dealing with the placeholder text.

Hi Guys,

Thank you so much for the help. I have moved domains: http://samashdown.co.uk. I now just have to figure out how to add the placeholder and make the form work! @ Ralph, I can’t ditch Aweber because it’s been paid for 12 months.

The form seems to work fine when I create a post and add the form code, but not on the homepage. Not sure why?

What can you do with the code? Are you able to add placeholder="Your Name" etc. into the inputs or not? If not, are you able to put a value into the input fields, such as <input value="Your Name">?

Try both of those options and report back. Hopefully you have access to the raw HTML.

This is my raw HTML code and am not sure where to add the placeholders:

<!-- AWeber Web Form Generator 3.0 -->
<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="196413754" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="win-instruction" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_51e7c7a59b265d3b99f33158fb19eccf" />

<input type="hidden" name="meta_adtracking" value="sam_ashdown" />
<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-196413754" class="af-form"><div id="af-body-196413754"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-56074203">Name: </label>
<div class="af-textWrap">
<input id="awf_field-56074203" 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-56074204">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-56074204" type="text" name="email" value="" tabindex="501"  />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="SIGN UP TO MY SUPER TIPS" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jJxsLIzM7Kws" alt="" /></div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

Thanks