How do I move my form to center

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

15-Sep-17 12:51
Hello,

I am trying to create a squeeze page. I downloaded the code for my form from Aweber and placed it into my PageBreeze HTML editor. But the form is on the left side of the page. How can I move the form to the center of the page?

Also, I would like to change the color of the submit button to red, and the text to white.

Any help that you can give me will be greatly appreciated.

Thank you



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<meta content="PageBreeze Pro HTML Editor (http://www.pagebreeze.com)" name="GENERATOR" />
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
</head>
<body bgcolor="#ffffff">
<h1>&nbsp;</h1>

<h2 align="left">&nbsp;</h2>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- AWeber Web Form Generator 3.0.1 --></p>

<p>&nbsp;</p>

<form accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" class="af-form-wrapper" method="post" target="_blank">
<div style="display: none"><input name="meta_web_form_id" type="hidden" value="1991411101" /> <input name="meta_split_id" type="hidden" /> <input name="listname" type="hidden" value="awlist4806168" /> <input id="redirect_41e503e55e268d841032ed3217e9f27e" name="redirect" type="hidden" value="http://launchpointforgrowingtaller.info/thankyou.html" /> <input name="meta_adtracking" type="hidden" value="Grow_Taller_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div>

<div class="af-form" id="af-form-1991411101">
<div class="af-header" id="af-header-1991411101">
<div class="bodyText">
<p>&nbsp;</p>
</div>
</div>

<div class="af-body af-standards" id="af-body-1991411101">
<div class="af-element"><span style="font-size: 26px"><strong><span style="color: #ff0000"><label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span>

<div class="af-textWrap"><input class="text" id="awf_field-93026630" name="name" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" size="16" style="height: 34px; width: 254px" tabindex="500" type="text" /></div>

<div class="af-clear">&nbsp;</div>
</div>

<div class="af-element"><span style="font-size: 26px"><strong><span style="color: #ff0000"><label class="previewLabel" for="awf_field-93026631">Email: </label></span></strong></span>

<div class="af-textWrap"><input class="text" id="awf_field-93026631" name="email" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" style="height: 35px; width: 254px" tabindex="501" type="text" /></div>

<div class="af-clear">&nbsp;</div>
</div>

<div class="af-element buttonContainer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="af-clear">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<span style="color: #ff0000"><input class="submit" name="submit" size="1" style="height: 51px; width: 143px" tabindex="502" type="submit" value="Submit" /></span></div>
</div>

<div class="af-element privacyPolicy" style="text-align: center">
<div class="af-clear">&nbsp;</div>
</div>
</div>

<div class="af-footer" id="af-footer-1991411101">
<div class="bodyText">
<p>&nbsp;</p>
</div>
</div>
</div>

<div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></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-1991411101")) {
document.getElementById("af-form-1991411101").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1991411101")) {
document.getElementById("af-body-1991411101").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1991411101")) {
document.getElementById("af-header-1991411101").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1991411101")) {
document.getElementById("af-footer-1991411101").className = "af-footer af-quirksMode";
}
}
})();
-->
</script><!-- /AWeber Web Form Generator 3.0.1 -->

<p align="center">&nbsp;</p>
</body>
</html>


15-Sep-17 18:45
"How can I move the form to the center of the page?"


Give it a width that is less than the width of the parent, set left and right margin to auto;

"Also, I would like to change the color of the submit button to red, and the text to white."



{
background-color: red;
color: white;
}


[Edited by chrishirst on 15-Sep-17 17:46]

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

 
New posts
Old posts

Follow Elated