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

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

<meta content="PageBreeze Pro HTML Editor (" name="GENERATOR" />
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
<body bgcolor="#ffffff">

<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>


<form accept-charset="UTF-8" action="" 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="" /> <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">

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

<div class="af-footer" id="af-footer-1991411101">
<div class="bodyText">

<div style="display: none"><img alt="" src="" /></div>
<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>

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]

So long, and thanks for all the fish.

New posts
Old posts

Follow Elated