CONTACT SECTIONS / FREE HTML + ASTRO

Rooms project enquiry section

An image-led interior studio contact section with an editorial introduction and carefully grouped project enquiry fields.

Responsive source
Vanilla JavaScript enhancement
MIT code · version 1.0.0

Try the design

Preview widthOpen demo ↗

Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.

Copy the source

<section
  class="fct-rooms-project-enquiry"
  data-snippet="rooms-project-enquiry"
  aria-labelledby="fct-rooms-project-enquiry-title"
>
  <div class="r-contact">
    <div class="r-contact-image">
      <img
        src="images/interior.webp"
        alt="Green sofa beneath a tall arched window"
        width="1120"
        height="747"
      />
      <div class="r-photo-label">
        <span>ROOMS / STUDIO</span><span>Spaces for everyday living.</span>
      </div>
    </div>
    <div class="r-form-column">
      <p class="r-micro">A conversation is a good beginning.</p>
      <h2 id="fct-rooms-project-enquiry-title">
        Tell us about<br /><span class="r-italic">your space.</span>
      </h2>
      <p class="r-contact-note">
        A new home, a fresh perspective, or something still taking shape. Start with a few details.
      </p>
      <form action="#" method="post" data-demo-form>
        <fieldset disabled>
          <legend class="r-visually-hidden">Project enquiry details</legend>
          <div class="r-field-pair">
            <label
              >Your name <span>(required)</span
              ><input name="name" autocomplete="name" maxlength="100" required /></label
            ><label
              >Email address <span>(required)</span
              ><input name="email" type="email" autocomplete="email" maxlength="254" required
            /></label>
          </div>
          <label
            >What are you considering? <span>(optional)</span
            ><select name="project">
              <option value="">Choose a project type</option>
              <option>Full interior project</option>
              <option>One room</option>
              <option>Consultation</option>
            </select></label
          ><label
            >A little about the project <span>(required)</span
            ><textarea
              name="message"
              rows="3"
              maxlength="3000"
              required
              placeholder="The space, the location, the possibilities…"
            ></textarea>
          </label>
          <div class="r-submit-row">
            <p>
              Or write directly:<br /><a href="mailto:studio@example.com">studio@example.com</a>
            </p>
            <button type="submit" class="r-pill">
              Send enquiry <span aria-hidden="true">↗</span>
            </button>
          </div>
        </fieldset>
        <p class="r-status" role="status">Demo only. No information is sent.</p>
      </form>
    </div>
  </div>
</section>

@font-face {
  font-family: "fct-rooms-project-enquiry-sans";
  src: url("fonts/instrument-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "fct-rooms-project-enquiry-sans";
  src: url("fonts/instrument-sans-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "fct-rooms-project-enquiry-serif";
  src: url("fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "fct-rooms-project-enquiry-display";
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.fct-rooms-project-enquiry {
  --paper: #f0eee6;
  --ink: #252a25;
  --accent: #e1e56b;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.6 "fct-rooms-project-enquiry-sans",
    Arial,
    sans-serif;
}
.fct-rooms-project-enquiry,
.fct-rooms-project-enquiry * {
  box-sizing: border-box;
}
.fct-rooms-project-enquiry :is(h2, h3, p, figure, ul) {
  margin: 0;
}
.fct-rooms-project-enquiry :is(h2, h3) {
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.055em;
}
.fct-rooms-project-enquiry a {
  color: inherit;
  text-underline-offset: 5px;
}
.fct-rooms-project-enquiry button,
.fct-rooms-project-enquiry input,
.fct-rooms-project-enquiry select,
.fct-rooms-project-enquiry textarea {
  font: inherit;
}
.fct-rooms-project-enquiry :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #285331;
  outline-offset: 4px;
}
.fct-rooms-project-enquiry .r-inner {
  max-width: 1440px;
  margin: auto;
  padding: 48px clamp(20px, 4vw, 64px);
}
.fct-rooms-project-enquiry .r-micro {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fct-rooms-project-enquiry .r-rule {
  border-top: 1px solid #252a2555;
}
.fct-rooms-project-enquiry .r-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 10px 0;
}
.fct-rooms-project-enquiry .r-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: inherit;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.fct-rooms-project-enquiry .r-italic {
  font-family: "fct-rooms-project-enquiry-serif", Georgia, serif;
  font-style: italic;
}
.fct-rooms-project-enquiry .r-muted {
  color: #565e54;
}
.fct-rooms-project-enquiry img {
  display: block;
  max-width: 100%;
  height: auto;
}
.fct-rooms-project-enquiry .r-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fct-rooms-project-enquiry .r-contact {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1600px;
  margin: auto;
}
.fct-rooms-project-enquiry .r-contact-image {
  position: relative;
  min-height: 780px;
  background: #d7d7cc;
}
.fct-rooms-project-enquiry .r-contact-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.fct-rooms-project-enquiry .r-photo-label {
  position: absolute;
  inset: auto 0 0;
  background: #252a25;
  color: #fff;
  padding: 22px 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.8125rem;
}
.fct-rooms-project-enquiry .r-form-column {
  padding: 55px clamp(24px, 4vw, 70px);
}
.fct-rooms-project-enquiry h2 {
  font-size: clamp(3rem, 5.5vw, 6rem);
  margin-top: 38px;
  line-height: 0.97;
}
.fct-rooms-project-enquiry .r-contact-note {
  max-width: 42ch;
  margin: 28px 0 35px;
  color: #565e54;
}
.fct-rooms-project-enquiry fieldset {
  display: grid;
  gap: 22px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.fct-rooms-project-enquiry label {
  display: block;
  font-size: 0.875rem;
  min-width: 0;
}
.fct-rooms-project-enquiry label > span {
  color: #565e54;
}
.fct-rooms-project-enquiry :is(input, select, textarea) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #798174;
  background: transparent;
  color: #252a25;
  padding: 11px 0;
  font-size: 1rem;
  border-radius: 0;
  outline-offset: 3px;
}
.fct-rooms-project-enquiry textarea {
  resize: vertical;
}
.fct-rooms-project-enquiry .r-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.fct-rooms-project-enquiry .r-submit-row {
  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: end;
  margin-top: 10px;
}
.fct-rooms-project-enquiry .r-submit-row p {
  font-size: 0.875rem;
}
.fct-rooms-project-enquiry button {
  background: #252a25 !important;
  color: #fff !important;
  gap: 25px;
  flex: none;
}
.fct-rooms-project-enquiry .r-status {
  font-size: 0.8125rem;
  margin-top: 22px;
  color: #565e54;
}
@media (max-width: 800px) {
  .fct-rooms-project-enquiry .r-contact {
    grid-template-columns: 1fr;
  }
  .fct-rooms-project-enquiry .r-contact-image {
    min-height: 350px;
    height: 52vw;
    max-height: 500px;
  }
  .fct-rooms-project-enquiry .r-photo-label {
    padding: 16px 20px;
    flex-wrap: wrap;
  }
  .fct-rooms-project-enquiry .r-form-column {
    padding: 38px 24px;
  }
  .fct-rooms-project-enquiry h2 {
    font-size: clamp(3.2rem, 11vw, 5rem);
    margin-top: 25px;
  }
  .fct-rooms-project-enquiry .r-field-pair {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .fct-rooms-project-enquiry .r-submit-row {
    align-items: start;
    flex-direction: column;
  }
  .fct-rooms-project-enquiry .r-contact-note {
    margin-bottom: 30px;
  }
}

(() => {
  for (const root of document.querySelectorAll('[data-snippet="rooms-project-enquiry"]')) {
    if (root.dataset.initialized) continue;
    root.dataset.initialized = "true";
    const form = root.querySelector("form");
    form.querySelector("fieldset").disabled = false;
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      form.querySelector("[role=status]").textContent =
        "Demo only: no information was sent. Connect your backend for actual enquiries.";
    });
  }
})();

---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003csection class=\"fct-rooms-project-enquiry\" data-snippet=\"rooms-project-enquiry\" aria-labelledby=\"fct-rooms-project-enquiry-title\"\u003e\u003cdiv class=\"r-contact\"\u003e\u003cdiv class=\"r-contact-image\"\u003e\u003cimg src=\"/snippet-assets/rooms-project-enquiry/images/interior.webp\" alt=\"Green sofa beneath a tall arched window\" width=\"1120\" height=\"747\"\u003e\u003cdiv class=\"r-photo-label\"\u003e\u003cspan\u003eROOMS / STUDIO\u003c/span\u003e\u003cspan\u003eSpaces for everyday living.\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"r-form-column\"\u003e\u003cp class=\"r-micro\"\u003eA conversation is a good beginning.\u003c/p\u003e\u003ch2 id=\"fct-rooms-project-enquiry-title\"\u003eTell us about\u003cbr\u003e\u003cspan class=\"r-italic\"\u003eyour space.\u003c/span\u003e\u003c/h2\u003e\u003cp class=\"r-contact-note\"\u003eA new home, a fresh perspective, or something still taking shape. Start with a few details.\u003c/p\u003e\u003cform action=\"#\" method=\"post\" data-demo-form\u003e\u003cfieldset disabled\u003e\u003clegend class=\"r-visually-hidden\"\u003eProject enquiry details\u003c/legend\u003e\u003cdiv class=\"r-field-pair\"\u003e\u003clabel\u003eYour name \u003cspan\u003e(required)\u003c/span\u003e\u003cinput name=\"name\" autocomplete=\"name\" maxlength=\"100\" required\u003e\u003c/label\u003e\u003clabel\u003eEmail address \u003cspan\u003e(required)\u003c/span\u003e\u003cinput name=\"email\" type=\"email\" autocomplete=\"email\" maxlength=\"254\" required\u003e\u003c/label\u003e\u003c/div\u003e\u003clabel\u003eWhat are you considering? \u003cspan\u003e(optional)\u003c/span\u003e\u003cselect name=\"project\"\u003e\u003coption value=\"\"\u003eChoose a project type\u003c/option\u003e\u003coption\u003eFull interior project\u003c/option\u003e\u003coption\u003eOne room\u003c/option\u003e\u003coption\u003eConsultation\u003c/option\u003e\u003c/select\u003e\u003c/label\u003e\u003clabel\u003eA little about the project \u003cspan\u003e(required)\u003c/span\u003e\u003ctextarea name=\"message\" rows=\"3\" maxlength=\"3000\" required placeholder=\"The space, the location, the possibilities…\"\u003e\u003c/textarea\u003e\u003c/label\u003e\u003cdiv class=\"r-submit-row\"\u003e\u003cp\u003eOr write directly:\u003cbr\u003e\u003ca href=\"mailto:studio@example.com\"\u003estudio@example.com\u003c/a\u003e\u003c/p\u003e\u003cbutton type=\"submit\" class=\"r-pill\"\u003eSend enquiry \u003cspan aria-hidden=\"true\"\u003e↗\u003c/span\u003e\u003c/button\u003e\u003c/div\u003e\u003c/fieldset\u003e\u003cp class=\"r-status\" role=\"status\"\u003eDemo only. No information is sent.\u003c/p\u003e\u003c/form\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e";
---
<Fragment set:html={markup} />
<style is:global>
@font-face{font-family:'fct-rooms-project-enquiry-sans';src:url('/snippet-assets/rooms-project-enquiry/fonts/instrument-sans-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'fct-rooms-project-enquiry-sans';src:url('/snippet-assets/rooms-project-enquiry/fonts/instrument-sans-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'fct-rooms-project-enquiry-serif';src:url('/snippet-assets/rooms-project-enquiry/fonts/instrument-serif-400-italic.woff2') format('woff2');font-style:italic;font-display:swap}@font-face{font-family:'fct-rooms-project-enquiry-display';src:url('/snippet-assets/rooms-project-enquiry/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}.fct-rooms-project-enquiry{--paper:#f0eee6;--ink:#252a25;--accent:#e1e56b;background:var(--paper);color:var(--ink);font:16px/1.6 'fct-rooms-project-enquiry-sans',Arial,sans-serif}.fct-rooms-project-enquiry,.fct-rooms-project-enquiry *{box-sizing:border-box}.fct-rooms-project-enquiry :is(h2,h3,p,figure,ul){margin:0}.fct-rooms-project-enquiry :is(h2,h3){line-height:1.05;font-weight:400;letter-spacing:-.055em}.fct-rooms-project-enquiry a{color:inherit;text-underline-offset:5px}.fct-rooms-project-enquiry button,.fct-rooms-project-enquiry input,.fct-rooms-project-enquiry select,.fct-rooms-project-enquiry textarea{font:inherit}.fct-rooms-project-enquiry :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #285331;outline-offset:4px}.fct-rooms-project-enquiry .r-inner{max-width:1440px;margin:auto;padding:48px clamp(20px,4vw,64px)}.fct-rooms-project-enquiry .r-micro{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}.fct-rooms-project-enquiry .r-rule{border-top:1px solid #252a2555}.fct-rooms-project-enquiry .r-link{display:inline-flex;min-height:48px;align-items:center;justify-content:space-between;gap:25px;text-decoration:none;border-bottom:1px solid currentColor;padding:10px 0}.fct-rooms-project-enquiry .r-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid currentColor;border-radius:100px;color:inherit;background:transparent;text-decoration:none;cursor:pointer}.fct-rooms-project-enquiry .r-italic{font-family:'fct-rooms-project-enquiry-serif',Georgia,serif;font-style:italic}.fct-rooms-project-enquiry .r-muted{color:#565e54}.fct-rooms-project-enquiry img{display:block;max-width:100%;height:auto}.fct-rooms-project-enquiry .r-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-rooms-project-enquiry .r-contact{display:grid;grid-template-columns:1fr 1.05fr;max-width:1600px;margin:auto}.fct-rooms-project-enquiry .r-contact-image{position:relative;min-height:780px;background:#d7d7cc}.fct-rooms-project-enquiry .r-contact-image>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.fct-rooms-project-enquiry .r-photo-label{position:absolute;inset:auto 0 0;background:#252a25;color:#fff;padding:22px 30px;display:flex;justify-content:space-between;gap:20px;font-size:.8125rem}.fct-rooms-project-enquiry .r-form-column{padding:55px clamp(24px,4vw,70px)}.fct-rooms-project-enquiry h2{font-size:clamp(3rem,5.5vw,6rem);margin-top:38px;line-height:.97}.fct-rooms-project-enquiry .r-contact-note{max-width:42ch;margin:28px 0 35px;color:#565e54}.fct-rooms-project-enquiry fieldset{display:grid;gap:22px;border:0;padding:0;margin:0;min-width:0}.fct-rooms-project-enquiry label{display:block;font-size:.875rem;min-width:0}.fct-rooms-project-enquiry label>span{color:#565e54}.fct-rooms-project-enquiry :is(input,select,textarea){display:block;width:100%;max-width:100%;min-height:48px;border:0;border-bottom:1px solid #798174;background:transparent;color:#252a25;padding:11px 0;font-size:1rem;border-radius:0;outline-offset:3px}.fct-rooms-project-enquiry textarea{resize:vertical}.fct-rooms-project-enquiry .r-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px}.fct-rooms-project-enquiry .r-submit-row{display:flex;gap:25px;justify-content:space-between;align-items:end;margin-top:10px}.fct-rooms-project-enquiry .r-submit-row p{font-size:.875rem}.fct-rooms-project-enquiry button{background:#252a25!important;color:#fff!important;gap:25px;flex:none}.fct-rooms-project-enquiry .r-status{font-size:.8125rem;margin-top:22px;color:#565e54}@media(max-width:800px){.fct-rooms-project-enquiry .r-contact{grid-template-columns:1fr}.fct-rooms-project-enquiry .r-contact-image{min-height:350px;height:52vw;max-height:500px}.fct-rooms-project-enquiry .r-photo-label{padding:16px 20px;flex-wrap:wrap}.fct-rooms-project-enquiry .r-form-column{padding:38px 24px}.fct-rooms-project-enquiry h2{font-size:clamp(3.2rem,11vw,5rem);margin-top:25px}.fct-rooms-project-enquiry .r-field-pair{grid-template-columns:1fr;gap:22px}.fct-rooms-project-enquiry .r-submit-row{align-items:start;flex-direction:column}.fct-rooms-project-enquiry .r-contact-note{margin-bottom:30px}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="rooms-project-enquiry"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';const form=root.querySelector('form');form.querySelector('fieldset').disabled=false;form.addEventListener('submit',e=>{e.preventDefault();form.querySelector('[role=status]').textContent='Demo only: no information was sent. Connect your backend for actual enquiries.';});}})();
</script>

Where this design fits

A licensed interior photograph anchors one side of the composition, with a form and project information on the other. The fields describe an initial conversation, without implying a quote, booking or delivery backend.

Licensed interior photograph
Grouped native form fields
Responsive editorial split

What is included

The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro, self-hosted fonts and asset license notes. It can be imported into an existing Astro page or layout.

Connect a real form backend

These forms demonstrate layout and native browser validation. No messages are sent. Configure the form action, remove the demo interception and disabled fieldset, then implement delivery, server validation and spam handling on your backend. Test actual success and error responses before publishing. An appointment request does not confirm availability.

Add it to an HTML website

Copy snippet.html into the relevant page section.
Load snippet.css after your existing site stylesheet. The class prefix identifies this design.
Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions.
Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website.

Use it in Astro

Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Copy the fonts and any images folders into public/snippet-assets/rooms-project-enquiry/; the component uses those public paths. Keep each generated prefix unique if you duplicate a component on one page.

Keep the section maintainable

Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes.

Keep building.

Explore full website templates ↗Open the free website tools ↗Check your customized HTML files ↗

Try the design

Copy the source

Where this design fits

What is included

Connect a real form backend

Add it to an HTML website

Use it in Astro

Keep the section maintainable

More contact sections to consider

Split office contact section

Minimal enquiry form

Project brief contact section

Appointment request form

Contact directory section

Keep building.

Your next ideacould start here.

Your next idea
could start here.