Help - Search - Members - Calendar
Full Version: How do I move my form to the center of the page?
HTMLHelp Forums > Web Authoring > General Web Design

I am trying to create a landing page. I downloaded the code for my form from Aweber and placed it into my PageBreeze HTML editor. But the form is sitting on the left side of the page. How would I go about moving the form to the center of the page.

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

I have attached the code, and 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">
<h1> </h1>

<div style="display: none"><span style="font-size: 72px"><span style="color: #ff0000"><span style="font-size: 36px"><span style="color: #0000ff"><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" /></span></span></span></span></div>

<form accept-charset="UTF-8" action="" class="af-form-wrapper" method="post" target="_blank">
<div class="af-form" id="af-form-1991411101">
<div class="af-header" id="af-header-1991411101">
<div class="bodyText">
<p> </p>

<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"> </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"> </div>

<div class="af-element buttonContainer">                   
<div class="af-clear">                 <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">
<p> </p>

<div class="af-clear"> </div>

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

<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"> </p>
Darin McGrew
Here are a couple useful resources:
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.