Contact: form with details

What you receive in Webflow

• 34 native elements and 15 classes.
• Breakpoints: mobile landscape (767px), tablet (991px).
• States: focus, hover.
• The form pastes as a native Webflow form, with a success message and an error message.
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="cf">
  <div class="cf-inner">
    <div class="cf-info">
      <h2 class="cf-title">Talk to our team</h2>
      <p class="cf-text">Questions about pricing, a custom plan or a migration? Send a message and a real person replies within one business day.</p>
      <div class="cf-item"><span class="cf-label">Email</span><a href="mailto:hello@example.com" class="cf-value">hello@example.com</a></div>
      <div class="cf-item"><span class="cf-label">Office</span><span class="cf-value">Pier 9, San Francisco, CA</span></div>
      <div class="cf-item"><span class="cf-label">Hours</span><span class="cf-value">Mon–Fri, 9am–6pm PT</span></div>
    </div>
    <form class="cf-card" name="contact">
      <div class="cf-row">
        <div class="cf-field"><label class="cf-flabel" for="cf-name">Full name</label><input class="cf-input" id="cf-name" name="name" type="text" placeholder="Jane Cooper" required></div>
        <div class="cf-field"><label class="cf-flabel" for="cf-email">Work email</label><input class="cf-input" id="cf-email" name="email" type="email" placeholder="jane@company.com" required></div>
      </div>
      <div class="cf-field"><label class="cf-flabel" for="cf-company">Company</label><input class="cf-input" id="cf-company" name="company" type="text" placeholder="Acme Inc."></div>
      <div class="cf-field"><label class="cf-flabel" for="cf-msg">How can we help?</label><textarea class="cf-input cf-area" id="cf-msg" name="message" placeholder="Tell us a little about your project" required></textarea></div>
      <button class="cf-btn" type="submit">Send message</button>
    </form>
  </div>
</section>
<style>
.cf { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #eef2ff; color: #1e1b4b; padding: 104px 24px; }
.cf-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.cf-title { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.cf-text { font-size: 17px; line-height: 1.6; color: #4338ca; margin: 0 0 36px; }
.cf-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid #c7d2fe; }
.cf-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6366f1; }
.cf-value { font-size: 17px; color: #1e1b4b; text-decoration: none; }
.cf-card { background: #ffffff; border-radius: 20px; padding: 36px; box-shadow: 0 24px 48px -24px rgba(30, 27, 75, 0.35); display: flex; flex-direction: column; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-flabel { font-size: 14px; font-weight: 700; color: #312e81; }
.cf-input { width: 100%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; color: #1e1b4b; background: #f8fafc; border: 1px solid #c7d2fe; border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease; }
.cf-input:focus { border-color: #6366f1; background: #ffffff; }
.cf-area { min-height: 132px; resize: vertical; }
.cf-btn { align-self: flex-start; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; font-weight: 700; color: #ffffff; background: #4f46e5; border: 0; border-radius: 10px; padding: 15px 26px; cursor: pointer; transition: background-color 0.2s ease; }
.cf-btn:hover { background: #3730a3; }
@media (max-width: 991px) { .cf-inner { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 767px) { .cf { padding: 72px 20px; } .cf-title { font-size: 34px; } .cf-row { grid-template-columns: 1fr; } .cf-card { padding: 24px; } .cf-btn { align-self: stretch; } }
</style>