The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How do I move my form to the center of the page?
cinque8
post Sep 16 2017, 01:50 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 30-August 12
Member No.: 17,706



Hello,

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.

[code]
<!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> </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="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" /></span></span></span></span></div>

<form accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" 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>
</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"> </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"> </div>
</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>

<div class="af-element privacyPolicy" style="text-align: center">
<p> </p>

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

<div class="af-footer" id="af-footer-1991411101">
<div class="bodyText">
<p> </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"> </p>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 17 2017, 02:04 AM
Post #2


WDG Member
********

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



Here are a couple useful resources:
http://dorward.me.uk/www/centre/
https://www.w3.org/Style/Examples/007/center.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 12th December 2017 - 01:45 AM