Form 01 Style 01: 2 Columns, Extra Text (next to Button)

Description

• form block with 2 columns, optional text, extra text next to button
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use these fields

• Your Name (Name, hide Last Name)
• Partner’s Name (Text)
• Email (Email)
• Your Phone (Text)
• I’m Interested In (Select)
• Date (Date)
• Location or Venue (Text)
• Tell me about your two (Text Area)
• SubmitButtonText (Text)

#1.2. You can enter text optional/if known, like this

#1.3. You can enter text in Description of SubmitButtonText field

#1.4. Next, use this code to Page Header Injection

<!-- 10.26c29v04 Form 01 Style 01: 2 Columns, Extra Text (next to Button) -->
<style>
.react-form-contents{
  --form-gap:20px;
  --opt-size:12px;
  --opt-opacity:.7;
  --opt-gap:4px;
  display:flex!important;flex-wrap:wrap;align-items:center;column-gap:var(--form-gap)}
.react-form-contents>div:first-child{flex:0 0 100%}
.react-form-contents .field-list{display:contents}
.react-form-contents .field-list>.form-item{flex:0 0 calc(50% - var(--form-gap)/2);min-width:0;align-self:flex-end}
.react-form-contents .field-list>.form-item:is(.textarea,.text:has(+.textarea)){flex-basis:100%}
.react-form-contents .first-name{flex:1}
.react-form-contents .first-name .caption{display:none}
.react-form-contents .first-name>input,.react-form-contents .first-name>.form-input-effects{grid-row:1/2!important;grid-column:1/-1!important}
.react-form-contents .form-item.date{grid-template-columns:minmax(0,1fr)!important}
.react-form-contents .form-item.date>*{grid-column:1/-1!important;min-width:0!important}
.react-form-contents .form-item.date>div:not(.title){width:100%}
.react-form-contents .form-item.date input{min-width:0!important;width:100%!important;max-width:none!important;cursor:pointer}
.react-form-contents .form-item.date .form-input-effects{width:auto!important;max-width:none!important;right:0!important}
.react-form-contents .form-item.text:not(:has(~.form-item)){flex:1 1 0;align-self:center;margin-bottom:0!important}
.react-form-contents .form-item.text:not(:has(~.form-item))>:is(label,input,.form-input-effects){display:none!important}
.react-form-contents .form-item.text:not(:has(~.form-item)) .description{margin:0!important;padding:0!important}
.react-form-contents .form-button-wrapper{flex:0 0 auto;margin:0}
.react-form-contents .form-opt{margin-left:var(--opt-gap);font-size:var(--opt-size);opacity:var(--opt-opacity);text-transform:none;letter-spacing:0}
@media (max-width:640px){.react-form-contents .field-list>.form-item{flex-basis:100%}}
</style>
<script>
(function(){
  function o(){document.querySelectorAll('.react-form-contents .title span:not([data-o])').forEach(function(s){if(s.children.length)return;s.setAttribute('data-o','');var m=s.textContent.match(/^(.*\S)\s*(\([^)]*\))$/);if(!m)return;s.textContent=m[1];var x=document.createElement('span');x.className='form-opt';x.setAttribute('data-o','');x.textContent=m[2];s.after(x)})}
  new MutationObserver(o).observe(document.documentElement,{childList:true,subtree:true});o();
  document.addEventListener('click',function(e){
    var d=e.target.closest&&e.target.closest('.react-form-contents .form-item.date');
    if(!d)return;
    var i=d.querySelector('input[type=date]');
    if(i&&i.showPicker){try{i.showPicker()}catch(x){}}
  });
})();
</script>