contact-cta-form

Summary

The closing CTA section pairs a large diagonal "Let's start creating together" headline with a logo carved by four animated cross-hair lines. Below sits a contact form with two text inputs, two nice-select dropdowns (Interest and Budget), and a project-details field.

HTML structure (minimal)

<section class="section-cta flat-spacing" id="contactScroll">
  <div class="bg-img"><img src="assets/images/item/bg-3.png" alt=""></div>
  <div class="s-header d-block">
    <div class="container"><div class="row">
      <div class="col-2 offset-lg-2 col-lg-2">
        <a href="index.html" class="logo-custom">
          <div class="logo-site-sv">
            <svg width="34" height="41" viewBox="0 0 34 41"><path d="…" fill="#07C42C"/></svg>
          </div>
          <span class="line-vertical left"></span>
          <span class="line-vertical right"></span>
          <span class="line-horizontal top"></span>
          <span class="line-horizontal bottom"></span>
        </a>
      </div>
      <div class="col-10 col-lg-6">
        <h2 class="text-display-2 text-end effectFade fadeUp">Let's start<br>creating together</h2>
      </div>
    </div></div>
  </div>
  <div class="container">
    <div class="row"><div class="col-lg-8 mx-auto">
      <form class="form-cta">
        <div class="form-content">
          <div class="tf-grid-layout sm-col-2">
            <fieldset class="tf-field">
              <input class="tf-input" type="text" placeholder required>
              <label class="tf-lable">Name <span class="text-primary">*</span></label>
            </fieldset>
            <fieldset class="tf-field">
              <input class="tf-input" type="email" placeholder required>
              <label class="tf-lable">Email <span class="text-primary">*</span></label>
            </fieldset>
          </div>
          <div class="tf-grid-layout sm-col-2">
            <div class="nc-wrap">
              <div class="nice-select">
                <span class="current">You are interested in</span>
                <ul class="list">
                  <li class="option disabled">-- Select an option --</li>
                  <li class="option">Web Development</li>
                  <li class="option">UI/UX Design</li>
                  <li class="option">Digital Marketing</li>
                </ul>
              </div>
            </div>
            <div class="nc-wrap"><div class="nice-select"><!-- Budget --></div></div>
          </div>
          <fieldset class="tf-field">
            <input class="tf-input" type="text" placeholder required>
            <label class="tf-lable">Project details</label>
          </fieldset>
        </div>
        <div class="form-action">
          <button type="submit" class="tf-btn"><span class="text-caption">SUBMIT MESSAGE</span></button>
          <p class="text-body-1">say hello - <a href="#" class="text-primary">davies@gmail.com</a></p>
        </div>
      </form>
    </div></div>
  </div>
</section>

Key SCSS tokens

.section-cta {
  .logo-custom {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px; height: 96px;
    .line-vertical, .line-horizontal {
      position: absolute;
      background: var(--white-16);
    }
    .line-vertical { width: 1px; height: 100%; top: 0; }
    .line-vertical.left { left: 0; }
    .line-vertical.right { right: 0; }
    .line-horizontal { height: 1px; width: 100%; left: 0; }
    .line-horizontal.top { top: 0; }
    .line-horizontal.bottom { bottom: 0; }
  }

  .tf-field {
    position: relative;
    .tf-input {
      width: 100%;
      padding: 16px 0;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--white-16);
      color: var(--white);
    }
    .tf-lable {
      position: absolute;
      left: 0;
      top: 16px;
      pointer-events: none;
      transition: 0.2s ease;
    }
    .tf-input:focus ~ .tf-lable,
    .tf-input:not(:placeholder-shown) ~ .tf-lable {
      transform: translateY(-20px) scale(0.85);
      color: var(--white-64);
    }
  }
}

Animation logic

// jquery.nice-select replaces native <select> markup; in this template the dropdowns are
// already rendered as the "nice" markup (.nice-select with ul.list), so the plugin only
// handles open/close state on click.

Notable details

• Floating labels use :placeholder-shown to detect the empty state — placeholder (no value) is required as a hack.
• Custom 4-line frame on the logo creates a "centre-cross" visual without an SVG container, scalable to any size by changing wrapper dimensions.
• The dropdowns are rendered statically as styled nice-select markup, not native <select> — gives total visual control at the cost of accessibility (no keyboard select wrapping).

Use when

• Hero contact forms where the headline diagonal-aligns with a logo motif.
• When you need styled dropdowns whose options are simple, non-searchable.

Caveats

• The form has no action and no submit handler — purely visual.
• nice-select markup does not include native <select> fallback; screen-reader experience needs additional ARIA wiring.
• placeholder attribute without a value is non-standard; some linters complain.