Форма запроса стиля CCS

Question

Форма справа вверху этой страницы была сделана с помощью aweber. Я хочу создать такую ​​форму, но не могу получить часть регистрации справа от поля электронной почты, как на странице примера. (средняя горизонтальная форма)

Пример страницы: https://www.backlinko.com/

Я хочу иметь возможность использовать ту же форму, которую вы видите на странице примера. Как я могу изменить где?

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

спасибо за помощь

Answer 1

Ну, вы можете достичь этого с абсолютной позиции. В вашем примере кнопка находится над входом.

Это не очень хорошая идея, так как если вы пишете длинное электронное письмо, текст идет «за» кнопкой. Поэтому вы можете добавить отступ справа, равный ширине кнопки.

См. Ниже

СОВЕТ: Не делитесь ненужным кодом. 90% того, чем вы поделились, не имеет отношения к вашему вопросу и поэтому бесполезно. Также, пожалуйста, FORMAT FORMAT FORMAT Ваш код. Когда вы публикуете вопросы, а также в своем собственном проекте.

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

Answer 2

Просто измените имя класса "refat" на любое другое имя.

Добавьте CSS и добавьте имя класса в родительский div с идентификатором af-form-586791810

Пример:

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