Form 267 Style 01

by

Description

  • form block with 2 columns (Name-Email, Select-Date), text next to submit button
  • view demo – password: abc
  • buy me a coffee

10.26c21v02 Form 267 Style 01

#1. Install Code

#1.1. First you can add a Form Block with these fields

  • Your Name (Name Field, enable First Name only)
  • Email
  • Type of Events (Select)
  • Date
  • Venue & City (Text)
  • About The Event (Text area)
  • No spam, no newsletter. Just a reply (Text)

10.26c21v02 Form 267 Style 01

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

<style>
.react-form-contents{--form-gap:24px;--form-accent:#C2412B;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 100%;min-width:0}
.react-form-contents .field-list>.form-item:is(.name,.email,.select,.date){flex-basis:calc(50% - var(--form-gap)/2)}
.react-form-contents .first-name{flex:1;margin-bottom:20px}
.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>div:not(.title){width:100%}
.react-form-contents .form-item.date input{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;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-item.select svg path{fill:var(--form-accent)}
.react-form-contents :is(input,select,textarea):focus~.form-input-effects .form-input-effects-border{border-color:var(--form-accent)!important}
@media (max-width:575px){.react-form-contents .field-list>.form-item:is(.name,.email,.select,.date){flex-basis:100%}}
</style>
<script>
(function(){
  function s(){document.querySelectorAll('.react-form-contents .first-name input').forEach(function(i){if(!i.placeholder)i.placeholder='Ha Nguyen'})}
  new MutationObserver(s).observe(document.documentElement,{childList:true,subtree:true});s();
  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>

10.26c21v02 Form 267 Style 01

#1.3. Change gap between 2 columns

--form-gap:24px

#1.4. Change select red arrow color

--form-accent:#C2412B;

#1.5. Change Name field placeholder text

{if(!i.placeholder)i.placeholder='Ha Nguyen'})}

 

Buy me a coffee