how do i adjust the name and email fields to put them in line with the text on the left and button o-CodePudding

The page in question is https://a-digitallife.com - i have put an aweber sign up form at the top in the header. I have managed to get the form to be horizontal with CSS, but as you can see it is not properly aligned. How do i do that? All of the Aweber forms and a standard vertical format, but i would like a horizontal one that goes across the top of the page. I can get the form into a horizontal position but tweaking the final positions has proved difficult. I cannot find how to separate the name and email field boxes from the rest of the form and adjust it to be a bit lower, so everything is in a line. The form also has to be responsive so that it will show properly on smaller screens. Many thanks for reading this.

Thank you David PS The code for the form is :-

<!-- AWeber Web Form Generator 3.0.1 -->
<style type="text/css">
    #af-form-894706910 .af-body .af-textWrap {width:98%;display:block;float:left;}      /*{width:600px;}*/             /*{width:98%;display:block;float:none;} */
#af-form-894706910 .af-body a{/*width:900px;*/color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-894706910 .af-body input.text, #af-form-894706910 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-body input.text:focus, #af-form-894706910 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-894706910 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:13px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-body{padding-bottom:1px;padding-top:0px;padding-right:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-quirksMode .bodyText{padding-top:-20px;padding-bottom:-20px;}
#af-form-894706910 .af-quirksMode{padding-right:5px;padding-left:5px;}
    #af-form-894706910 .af-standards .af-element {float:left;padding-left:5px;padding-bottom:20px;}                 /*{padding-right:15px;padding-left:15px;} */
    #af-form-894706910 .bodyText p {margin:0.5em 0;}       /*{margin:1em 0;}*/
#af-form-894706910 .buttonContainer input.submit{background-image:url("https://forms.aweber.com/images/auto/gradient/button/6b2.png");background-position:top left;background-repeat:repeat-x;background-color:#469b02;border:1px solid #469b02;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-894706910 .af-body a{color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-894706910 .af-body input.text, #af-form-894706910 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-body input.text:focus, #af-form-894706910 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-894706910 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:13px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-body{padding-bottom:35px;padding-top:20px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-894706910 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-894706910 .af-quirksMode{padding-right:0px;padding-left:15px;}
#af-form-894706910 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-894706910 .bodyText p{margin:1em 0;}
#af-form-894706910 .buttonContainer input.submit{background-image:url("https://forms.aweber.com/images/auto/gradient/button/6b2.png");background-position:top left;background-repeat:repeat-x;background-color:#469b02;border:1px solid #469b02;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-894706910 .buttonContainer input.submit{width:auto;}
#af-form-894706910 .buttonContainer{text-align:right;}
#af-form-894706910 body,#af-form-894706910 dl,#af-form-894706910 dt,#af-form-894706910 dd,#af-form-894706910 h1,#af-form-894706910 h2,#af-form-894706910 h3,#af-form-894706910 h4,#af-form-894706910 h5,#af-form-894706910 h6,#af-form-894706910 pre,#af-form-894706910 code,#af-form-894706910 fieldset,#af-form-894706910 legend,#af-form-894706910 blockquote,#af-form-894706910 th,#af-form-894706910 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-894706910 button,#af-form-894706910 input,#af-form-894706910 submit,#af-form-894706910 textarea,#af-form-894706910 select,#af-form-894706910 label,#af-form-894706910 optgroup,#af-form-894706910 option{float:none;position:static;margin:0;}
#af-form-894706910 div{margin:0;}
#af-form-894706910 fieldset{border:0;}
#af-form-894706910 form,#af-form-894706910 textarea,.af-form-wrapper,.af-form-close-button,#af-form-894706910 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-894706910 input,#af-form-894706910 button,#af-form-894706910 textarea,#af-form-894706910 select{font-size:100%;}
#af-form-894706910 p{color:inherit;}
#af-form-894706910 select,#af-form-894706910 label,#af-form-894706910 optgroup,#af-form-894706910 option{padding:0;}
#af-form-894706910 table{border-collapse:collapse;border-spacing:0;}
#af-form-894706910 ul,#af-form-894706910 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-894706910,#af-form-894706910 .quirksMode{width:100%;max-width:1200px;}
#af-form-894706910.af-quirksMode{overflow-x:hidden;}
#af-form-894706910{background-color:#FFFFFF;border-color:#CFCFCF;border-width:none;border-style:none;}
#af-form-894706910{display:block;}
#af-form-894706910{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.submit{white-space:inherit;}
.af-body input.text{width:100%;float:left;padding:2px!important;}
.af-body.af-standards input.submit{padding:10px 10px;}
    .af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding-bottom:5px;padding-top:5px;padding-right:5px;}
.af-form-wrapper{text-indent:0;}
.af-form{box-sizing:border-box;text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post"  accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="894706910" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist5551121" />
<input type="hidden" name="redirect" value="https://www.aweber.com/thankyou.htm?m=default" id="redirect_e7bb7b8b4db95b7cb8415a9090150709" />

<input type="hidden" name="meta_adtracking" value="My_Web_Form_3" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />

<input type="hidden" name="meta_tooltip" value="name||Enter Your Name,,email||Enter Your Email" />
</div>
<div id="af-form-894706910" ><div id="af-body-894706910" >
<div >
<div ><p> <span style="font-size: 14px;"><strong>3 Steps to Go From Zero to Hero Online</strong></span></p></div><div ></div>
</div>
<div >
<label  for="awf_field-114630643"></label>
<div >
<input id="awf_field-114630643" type="text" name="name"  value="Enter Your Name"  onfocus=" if (this.value == 'Enter Your Name') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter Your Name';} " tabindex="500" />
</div>
<div ></div></div>
<div >
<label  for="awf_field-114630644"></label>
<div ><input  id="awf_field-114630644" type="text" name="email" value="Enter Your Email" tabindex="501" onfocus=" if (this.value == 'Enter Your Email') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter Your Email';} " />
</div><div ></div>
</div>
<div >
<input name="submit"  type="submit" value="Download Your FREE Copy" tabindex="502" />
<div ></div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=HJws7AxsnIwM" alt="" /></div>
</form>
<script type="text/javascript">
// Special handling for in-app browsers that don't always support new windows
(function() {
    function browserSupportsNewWindows(userAgent) {
        var rules = [
            'FBIOS',
            'Twitter for iPhone',
            'WebView',
            '(iPhone|iPod|iPad)(?!.*Safari\/)',
            'Android.*(wv|\.0\.0\.0)'
        ];
        var pattern = new RegExp('('   rules.join('|')   ')', 'ig');
        return !pattern.test(userAgent);
    }

    if (!browserSupportsNewWindows(navigator.userAgent || navigator.vendor || window.opera)) {
        document.getElementById('af-form-894706910').parentElement.removeAttribute('target');
    }
})();

        (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-894706910")) {
                document.getElementById("af-form-894706910").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-894706910")) {
                document.getElementById("af-body-894706910").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-894706910")) {
                document.getElementById("af-header-894706910").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-894706910")) {
                document.getElementById("af-footer-894706910").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

CodePudding user response：

I think you answer here should be to just display the whole form as Flex within af-body-894706910 and then align them vertically like so :

af-body-894706910{
display:flex;
align-items:center;}

CodePudding user response：

This does help to make the form responsive. In addition, I found adjusting the margin for the "bodyText p" moves the text on the left. Making the margin:0.3em; works for me. My mistake has been looking at padding when i should have looking at the margins. Thanks for your help