Contact Form

<form class="contact-form" data-contact-form>

  <div class="contact-form-row">

    <div class="contact-field">
      <label for="contact-name">Name</label>

      <input
        type="text"
        id="contact-name"
        name="name"
        placeholder="Your name"
        required
      >
    </div>

    <div class="contact-field">
      <label for="contact-email">Email</label>

      <input
        type="email"
        id="contact-email"
        name="email"
        placeholder="you@example.com"
        required
      >
    </div>

  </div>

  <div class="contact-field">
    <label for="contact-message">Message</label>

    <textarea
      id="contact-message"
      name="message"
      rows="5"
      placeholder="Write your message..."
      required
    ></textarea>
  </div>

  <button type="submit" class="contact-submit">
    <span>Send Message</span>
    <span class="contact-arrow">→</span>
  </button>

  <p class="contact-status" data-contact-status></p>

</form>

.contact-form{
  width:100%;
  max-width:650px;
}

.contact-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-field{
  margin-bottom:18px;
}

.contact-field label{
  display:block;
  margin-bottom:8px;

  color:#aab4c8;
  font-size:13px;
  font-weight:600;
}

.contact-field input,
.contact-field textarea{
  width:100%;

  padding:14px 15px;

  border:1px solid #263750;
  border-radius:9px;

  background:#0b1423;
  color:#ffffff;

  font:inherit;

  outline:none;
  resize:vertical;

  transition:.25s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:#65748b;
}

.contact-field input:focus,
.contact-field textarea:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.10);
}

.contact-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:46px;
  padding:0 20px;

  border:0;
  border-radius:9px;

  background:linear-gradient(
    135deg,
    #22d3ee,
    #7c3aed
  );

  color:#ffffff;

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  transition:.25s ease;
}

.contact-submit:hover{
  transform:translateY(-2px);

  box-shadow:
    0 10px 25px rgba(34,211,238,.18);
}

.contact-arrow{
  transition:transform .25s ease;
}

.contact-submit:hover .contact-arrow{
  transform:translateX(4px);
}

.contact-status{
  min-height:20px;
  margin:14px 0 0;

  color:#22d3ee;
  font-size:14px;
}

@media(max-width:600px){

  .contact-form-row{
    grid-template-columns:1fr;
    gap:0;
  }
}

const form = document.querySelector('[data-contact-form]');
const status = document.querySelector('[data-contact-status]');

form.addEventListener('submit', function(event) {

  event.preventDefault();

  status.textContent = 'Message submitted successfully!';

  form.reset();

});

How This Contact Form Works

This Contact Form uses a simple HTML structure with Name, Email, and Message fields followed by a Send Message button. The form itself uses the .contact-form class and has a maximum width of 650px while remaining width: 100%, allowing it to fit inside narrower parent containers.

The Name and Email fields sit inside .contact-form-row. CSS Grid creates two equal columns with grid-template-columns: 1fr 1fr and an 18px gap between them. The Message field sits below this row and uses a <textarea> with five visible rows. All three fields include the HTML required attribute, while the email field also uses type="email" so the browser can apply its built-in email-format validation before submission.

Inputs and the textarea share the same visual styling. They use 14px by 15px padding, a #263750 border, 9px rounded corners, and a dark #0b1423 background. Placeholder text uses the more muted #65748b color to remain visually separate from entered text.

When an input or textarea receives focus, its border changes to cyan #22d3ee. A three-pixel outer focus effect is added with box-shadow: 0 0 0 3px rgba(34,211,238,.10). The fields use a .25s ease transition, so this change appears gradually rather than switching instantly.

The Send Message button uses inline-flex to align its text and arrow horizontally. Its background is a 135-degree gradient from #22d3ee to #7c3aed, with a minimum height of 46px and a 9px border radius. Hovering over the button moves it upward by 2px and adds a cyan-tinted shadow. At the same time, .contact-arrow moves 4px to the right through a separate transform transition.

JavaScript controls the submission feedback. It first selects the form through [data-contact-form] and the empty status paragraph through [data-contact-status]. A submit event listener then calls event.preventDefault(), preventing the browser’s normal form submission. For more detail about this behavior, see the MDN preventDefault documentation.

After submission, JavaScript sets the status text to “Message submitted successfully!” and calls form.reset(). This clears the Name, Email, and Message values after a valid browser submission event. The status paragraph already has a minimum height of 20px, which reserves some space for the confirmation message.

The component also includes a responsive rule at max-width: 600px. At that point, .contact-form-row changes from two columns to a single 1fr column and removes the grid gap. Name and Email therefore stack vertically on smaller screens.

Customizing the Contact Form

The component uses straightforward CSS values, so its dimensions, field appearance, button styling, and responsive breakpoint can be adjusted directly.

• Change max-width: 650px on .contact-form to make the overall form narrower or wider.
• Adjust the 18px field spacing and grid gap to increase or reduce space between controls.
• Change #0b1423 and #263750 to customize the input background and border colors.
• Edit the 14px by 15px field padding or 9px border radius to change the size and shape of the controls.
• Replace #22d3ee in the focus styles to use a different active-field color.
• Modify the button gradient colors #22d3ee and #7c3aed to match another interface.
• Change the .25s transitions or translateY(-2px) and translateX(4px) transforms to adjust hover feedback.
• Modify the max-width: 600px media query to control when the two-column field row becomes a single column.

Where to Use This Contact Form

The compact structure makes this component suitable for pages where visitors need a direct way to enter basic contact details and a message.

• Portfolio contact sections
• Small business websites
• Agency and freelancer websites
• Product landing pages
• Support and enquiry interfaces
• Personal websites
• Contact page prototypes

If a form also needs to accept a file from the user, the File Upload Input is a related CodeRipple component that can provide a dedicated file-selection interface. This Contact Form currently handles only front-end feedback, so a production version would need to send the submitted data to a server, API, or another form-processing service.

Frequently Asked Questions

Does this Contact Form actually send messages?

No. The JavaScript prevents the normal submission, displays a success message, and resets the fields. It does not send the Name, Email, or Message values to a backend or external service.

Does the form include validation?

It uses native HTML validation. All three controls have the required attribute, and the Email field uses type="email". There is no additional custom JavaScript validation in the component.

What happens after the form is submitted?

The status paragraph displays “Message submitted successfully!” and form.reset() clears the form controls. The success message remains visible because the current JavaScript does not remove it afterward.

Is the Contact Form responsive?

Yes. Name and Email appear in two equal columns at larger widths. Below 600px, the media query changes that grid to a single column, placing the fields vertically.

This Contact Form keeps the implementation focused: HTML defines the fields and native validation, CSS handles layout and interaction states, and a small JavaScript handler provides submission feedback and resets the form.