Form Block 189 Style 01: Form with Heading

Description

• form block with background, heading, top border, name – email same line, 2 select dropdowns same line
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. You can add a Form Block with Fields like this

• Name
• Email
• Radio
• Select
• Select
• Message

#1.2. Use code to Page Header Injection (page where you use Form Block)

<!-- 10.26c19v7 Form Block 189 Style 01: Form with Heading -->
<style>
div.form-block {
  --form-bg: #e7e0d1;
  --form-dark: #171512;
  --form-light: #f2ede3;
  --form-accent: #c8401e;
  --form-border: 3px solid var(--form-dark);
  --form-gap: 24px;
  --form-half: calc(50% - var(--form-gap) / 2);
}
div.form-block .sqs-block-content {
  background-color: var(--form-bg);
  border-top: var(--form-border);
  padding: 40px;
}
div.form-block .dear-odile {
  margin-top: 0;
}
div.form-block .field-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--form-gap);
}
div.form-block .field-list > * {
  flex: 0 0 100% !important;
  min-width: 0;
}
div.form-block .field-list > .name,
div.form-block .field-list > .email,
div.form-block .field-list > .select {
  flex: 1 1 var(--form-half) !important;
}
div.form-block .form-item.name .caption {
  display: none;
}
div.form-block .form-item.name .field {
  width: 100% !important;
}
div.form-block select,
div.form-block textarea {
  padding-left: 0;
}
div.form-block form *:focus,
div.form-block form *:focus-visible {
  outline: none !important;
}
div.form-block .form-submit-button {
  background-color: var(--form-dark) !important;
  color: var(--form-light) !important;
  border-color: var(--form-dark) !important;
}
div.form-block .form-submit-button:hover {
  background-color: var(--form-accent) !important;
  border-color: var(--form-accent) !important;
}
  .form-item.fields .field .form-input-effects {
  grid-row: 1 !important;
}
</style>
<script>
window.DearOdileConfig = {
  target: 'div.form-block .sqs-block-content',
  tag: 'h2',
  className: 'dear-odile',
  text: 'Dear Odile,'
};
</script>
<script>
(function () {
  var cfg = window.DearOdileConfig;
  function run() {
    var c = document.querySelector(cfg.target);
    if (!c || c.querySelector('.' + cfg.className)) return;
    var h = document.createElement(cfg.tag);
    h.className = cfg.className;
    h.textContent = cfg.text;
    c.insertBefore(h, c.firstChild);
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run);
  } else {
    run();
  }
  window.addEventListener('mercury:load', run);
})();
</script>

#2. Customize

#2.1. To change text “Dear Odile,”, you can change this line 66

• text will inherit Heading 2 style

text: 'Dear Odile,'

#2.2. To change top border, change line 05 + line 08

--form-dark: #171512;
--form-border: 3px solid var(--form-dark);

#2.3. To change form background color, change line 04

--form-bg: #e7e0d1;

#2.4. To change form submit button background/border, change line 05

--form-dark: #171512;

change button text color, change line 06

--form-light: #f2ede3;

button hover color, change line 07

--form-accent: #c8401e;

#2.5. To change gap between Name – Email, gap between 2 Select fields, change line 09

--form-gap: 24px;