Bollate

HTML

[ANSWERED] javascript – Form CCS Style Request

By

Nov 20, 2022 , , ,

Solution 1 :

Well you can achieve this with position absolute. In your example the button is over the input.

It’s not a good idea as if you write a long email the text goes ‘ behind ‘ the button.
So what you can do is add a padding-right equal to the button width.

See below

TIP: Do not share unnecessary code. 90% of what you shared is not related to your question and therefor useless. Also, please FORMAT FORMAT FORMAT your code. When you post questions and also in your own project.

.buttonContainer {
  position: absolute;
  bottom:25px;
  right:60px;
  padding:0!important;
  }
.af-body.af-standards {
position: relative;
}
.af-body.af-standards input.text {
padding: 4px 130px 4px 2px!important;
box-sizing:border-box;
}
#af-form-586791810 .af-body .af-textWrap {
  width: 98%;
  display: block;
  float: none;
}

#af-form-586791810 .af-body input.text,
#af-form-586791810 .af-body textarea {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: solid;
  color: #454545;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  font-family: Trebuchet MS, sans-serif;
}

#af-form-586791810 .af-body input.text:focus,
#af-form-586791810 .af-body textarea:focus {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: solid;
}

#af-form-586791810 .af-body label.previewLabel {
  display: block;
  float: none;
  text-align: left;
  width: auto;
  color: #454545;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#af-form-586791810 .af-body {
  padding-bottom: 15px;
  padding-top: 15px;
  background-repeat: no-repeat;
  background-position: inherit;
  background-image: none;
  color: inherit;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#af-form-586791810 .af-quirksMode {
  padding-right: 60px;
  padding-left: 60px;
}

#af-form-586791810 .af-standards .af-element {
  padding-right: 60px;
  padding-left: 60px;
}

#af-form-586791810 .buttonContainer input.submit {
  background-image: none;
  background-color: #4D0B4D;
  color: #FFFFFF;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-family: Trebuchet MS, sans-serif;
}

#af-form-586791810 .buttonContainer input.submit {
  width: auto;
}

#af-form-586791810 .buttonContainer {
  text-align: center;
}

#af-form-586791810 button,
#af-form-586791810 input,
#af-form-586791810 submit,
#af-form-586791810 textarea,
#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  float: none;
  position: static;
  margin: 0;
}

#af-form-586791810 div {
  margin: 0;
}

#af-form-586791810 form,
#af-form-586791810 textarea,
.af-form-wrapper,
.af-form-close-button,
#af-form-586791810 img {
  float: none;
  color: inherit;
  position: static;
  background-color: none;
  border: none;
  margin: 0;
  padding: 0;
}

#af-form-586791810 input,
#af-form-586791810 button,
#af-form-586791810 textarea,
#af-form-586791810 select {
  font-size: 100%;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding: 0;
}

#af-form-586791810,
#af-form-586791810 .quirksMode {
  width: 100%;
  max-width: 418px;
}

#af-form-586791810.af-quirksMode {
  overflow-x: hidden;
}

#af-form-586791810 {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: none;
}

#af-form-586791810 {
  display: block;
}

#af-form-586791810 {
  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: none;
  padding: 2px !important;
}

.af-body.af-standards input.submit {
  padding: 4px 12px;
}

.af-clear {
  clear: both;
}

.af-element label {
  text-align: left;
  display: block;
  float: left;
}

.af-element {
  padding-bottom: 5px;
  padding-top: 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 {}

#af-form-586791810 input.submit,
#af-form-586791810 #webFormSubmitButton {
  -webkit-appearance: none;
}

.af-form {
  border-radius: 12px;
}

.af-header {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

.af-header p {
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-left: 50px;
}

.af-body input.text,
.af-body textarea {
  border-radius: 4px;
}

.af-element {
  padding-top: 10px;
  padding-bottom: 10px;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding-bottom: 5px;
}

#af-form-586791810 p {
  margin: 0;
}

#af-form-586791810 .af-body .privacyPolicy {
  font-size: 9px;
  padding-top: 20px;
  padding-bottom: 10px;
}

#af-form-586791810 .af-body .poweredBy {
  font-size: 9px;
  padding-top: 0;
  padding-bottom: 0;
}

#af-form #webFormSubmitButton,
.buttonContainer input.submit,
.af-body.af-standards input.submit {
  border: none;
  border-radius: 4px;
  padding: 10px 30px;
}

.bodyText p strong {
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.af-form .af-element-radio {
  padding-bottom: 5px;
}
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank">
  <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="586791810" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="awlist5545047" />
    <input type="hidden" name="redirect" value="https://www.aweber.com/form/thankyou_vo.html" id="redirect_06888bc1326c8dabe3e277c31b9118ce" />

    <input type="hidden" name="meta_adtracking" value="My Web Form" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="email" />
    <input type="hidden" name="meta_forward_vars" value="1" />
    <input type="hidden" name="meta_tooltip" value="" />
  </div>
  <div id="af-form-586791810" class="af-form">
    <div id="af-body-586791810" class="af-body af-standards">
      <div class="af-element">
        <label class="previewLabel" for="awf_field-105496004">Email: </label>
        <div class="af-textWrap"><input class="text" id="awf_field-105496004" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
        </div>
        <div class="af-clear"></div>
      </div>
      <div class="af-element buttonContainer">
        <input name="submit" class="submit" type="submit" value="Abone Ol!" tabindex="501" />
        <div class="af-clear"></div>
      </div>
    </div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=rBxs7JyMHIwM" alt="" /></div>
</form>

Solution 2 :

Just change the class name “refat” to anyname you want.

Add the CSS and add the class name to the parent div with id af-form-586791810

Example:

// CSS

      .refat {
        display: flex;
      }
      .refat .af-element {
          padding: 0 !important;
      }
      .refat .buttonContainer {
        align-self: flex-end;
      }

// HTML

      <div id="af-form-586791810" class="af-form"><div id="af-body-586791810" class="af-body af-standards refat">

Problem :

The form right at the top of this page was made with aweber. I want to create a form like this, but I cannot get the sign up part to the right of the email field as in the example page. (mean horizontal form)

Sample page: https://www.backlinko.com/

I want to be able to do the same form you see in the sample page. How can I change where?

<!-- AWeber Web Form Generator 3.0.1 -->
<style type="text/css">
#af-form-586791810 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-586791810 .af-body input.text, #af-form-586791810 .af-body textarea{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:solid;color:#454545;text-decoration:none;font-style:normal;font-weight:normal;font-size:24px;font-family:Trebuchet MS, sans-serif;}
#af-form-586791810 .af-body input.text:focus, #af-form-586791810 .af-body textarea:focus{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:solid;}
#af-form-586791810 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#454545;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Helvetica, sans-serif;}
#af-form-586791810 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:inherit;font-size:16px;font-family:Helvetica, sans-serif;}
#af-form-586791810 .af-quirksMode{padding-right:60px;padding-left:60px;}
#af-form-586791810 .af-standards .af-element{padding-right:60px;padding-left:60px;}
#af-form-586791810 .buttonContainer input.submit{background-image:none;background-color:#4D0B4D;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Trebuchet MS, sans-serif;}
#af-form-586791810 .buttonContainer input.submit{width:auto;}
#af-form-586791810 .buttonContainer{text-align:center;}
#af-form-586791810 button,#af-form-586791810 input,#af-form-586791810 submit,#af-form-586791810 textarea,#af-form-586791810 select,#af-form-586791810 label,#af-form-586791810 optgroup,#af-form-586791810 option{float:none;position:static;margin:0;}
#af-form-586791810 div{margin:0;}
#af-form-586791810 form,#af-form-586791810 textarea,.af-form-wrapper,.af-form-close-button,#af-form-586791810 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-586791810 input,#af-form-586791810 button,#af-form-586791810 textarea,#af-form-586791810 select{font-size:100%;}
#af-form-586791810 select,#af-form-586791810 label,#af-form-586791810 optgroup,#af-form-586791810 option{padding:0;}
#af-form-586791810,#af-form-586791810 .quirksMode{width:100%;max-width:418px;}
#af-form-586791810.af-quirksMode{overflow-x:hidden;}
#af-form-586791810{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:none;}
#af-form-586791810{display:block;}
#af-form-586791810{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:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding-bottom:5px;padding-top: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 {
}
#af-form-586791810 input.submit,
#af-form-586791810 #webFormSubmitButton {
  -webkit-appearance: none;
}

.af-form {
  border-radius: 12px;
}

.af-header {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

.af-header p {
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-left: 50px;
}

.af-body input.text,
.af-body textarea {
  border-radius: 4px;
}

.af-element {
  padding-top: 10px;
  padding-bottom: 10px;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding-bottom: 5px;
}

#af-form-586791810 p {
  margin: 0;
}

#af-form-586791810 .af-body .privacyPolicy {
  font-size: 9px;
  padding-top: 20px;
  padding-bottom: 10px;
}

#af-form-586791810 .af-body .poweredBy {
  font-size: 9px;
  padding-top: 0;
  padding-bottom: 0;
}

#af-form #webFormSubmitButton,
.buttonContainer input.submit,
.af-body.af-standards input.submit {
  border:none;
  border-radius: 4px;
  padding: 10px 30px;
}

.bodyText p strong {
  letter-spacing: 0.03em;
  line-height:1.25;
}

.af-form .af-element-radio {
  padding-bottom: 5px;
  }
</style>
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="586791810" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist5545047" />
<input type="hidden" name="redirect" value="https://www.aweber.com/form/thankyou_vo.html" id="redirect_06888bc1326c8dabe3e277c31b9118ce" />

<input type="hidden" name="meta_adtracking" value="My Web Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_forward_vars" value="1" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-586791810" class="af-form"><div id="af-body-586791810" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-105496004">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-105496004" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Abone Ol!" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=rBxs7JyMHIwM" 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-586791810').parentElement.removeAttribute('target');
    }
})();
</script><script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-586791810")) {
                document.getElementById("af-form-586791810").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-586791810")) {
                document.getElementById("af-body-586791810").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-586791810")) {
                document.getElementById("af-header-586791810").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-586791810")) {
                document.getElementById("af-footer-586791810").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

<!-- /AWeber Web Form Generator 3.0.1 -->

thanks for helping

By

Related Post

HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022