Simple form

css contact form free

This css contact form free has specific design and animation, that works upon hover and input.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the cards to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting them into the code element in order to avoid FOUC as the code element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

HTML:

<section class="simple-section">
  <div class="simple-ext">
    <form class="simple-int">
      <div class="simple-field draw">
        <input
          type="text"
          id="lastname"
          class="simple-text"
          name="lastname"
          placeholder=" "
        />
        <label for="lastname" class="">Last Name</label>
      </div>
      <div class="simple-field draw">
        <input type="text" id=firstname" class="simple-text"
        name="firstname" placeholder=" ">
        <label for="first name" class="">First Name</label>
      </div>
      <div class="simple-field draw">
        <input
          type="text"
          id="email"
          class="simple-text"
          name="email"
          placeholder=" "
        />
        <label for="email" class="">Email</label>
      </div>
      <div class="simple-area draw">
        <textarea
          id="txtarea"
          class="simple-text"
          name="subject"
          placeholder=" "
        ></textarea>
        <label for="textarea" class="">Your message</label>
      </div>
      <input class="simple-btn" type="submit" value="Submit" />
    </form>
  </div>
</section>

CSS:

:root {
  --primary: #202020;
  --secondary: #9b6bf7;
  --col-txt: #fff;
}
.simple-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--primary);
  justify-content: center;
  min-height: 60vh;
  width: 100%;
  overflow: hidden;
}
.simple-ext {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 650px;
  margin: 2rem;
  min-height: 530px;
  border-radius: 15px;
  box-shadow: 20px 20px 47px #101010, -20px -20px 47px #303030;
}
.simple-field {
  position: relative;
  margin-bottom: 1.5rem;
}
.simple-area {
  position: relative;
  margin-bottom: 1.5rem;
}
.simple-int {
  display: flex;
  flex-direction: column;
  padding: 3rem;
  width: 96%;
  height: 95%;
  border-radius: 15px;
  box-shadow: inset 10px 10px 20px #101010, inset -10px -10px 20px #303030;
}
.simple-text {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 1rem;
  color: white;
  font-size: 1rem;
  border: none;
  border-top: none!important;
  border-left:none!important;
  border-right: none!important;
  border-bottom: 1px solid var(--secondary);
  transition: all 0.3s linear;
}
.simple-btn {
  position: relative;
  display: block;
  background-color: var(--primary);
  color: #ccc;
  text-align: center; 
  padding: 1rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--secondary);
  border-radius: 6px;
  transition: all 0.1s linear;
  margin-top: 2rem;
  width: 50%;
  align-self: center;
}
.simple-btn:active {
  transform: translateY(1px) scale(0.95);
}
.simple-btn:hover {
  color: white;
}
.input:focus,
textarea {
  outline: none;
  border: none;
}
label {
  position: absolute;
  transform: translate(0.3rem, -2rem);
  color: #ccc;
  transition: all 0.2s linear;
  width: max-content;
  z-index: 2;
}
textarea {
  height: 7rem;
  background-color: transparent;
  z-index: 1;
}
input {
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
}
input:focus-visible {
  outline: none;
}
.simple-text::placeholder {
  transition: all 0.3s linear;
}
.simple-field:hover label,
input:focus + label,
input:not(:placeholder-shown) + label {
  transform: translate(0.5rem, -3rem);
  font-size: 0.7rem;
  color: #808080;
  background: var(--primary);
  padding: 0 0.3rem;
}
input:focus {
  border: 1px solid var(--secondary);
}
input:not(:placeholder-shown) {
  border: 1px solid var(--secondary);
}
textarea:focus {
  border: 1px solid var(--secondary);
}
textarea:not(:placeholder-shown) {
  border: 1px solid var(--secondary);
}
.draw {
  position: relative;
}
.draw::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 1px solid transparent;
}
.draw::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1px solid transparent;
}
.draw:hover::before {
  height: 100%;
  width: 100%;
  border-left-color: var(--secondary);
  border-top-color: var(--secondary);
  transition: height 0.2s linear, width 0.2s linear 0.2s;
}
.draw:hover::after {
  height: 100%;
  width: 100%;
  border-right-color: var(--secondary);
  transition: border-color 0s linear 0.4s, height 0.2s linear 0.4s;
}
textarea + label {
  display: flex;
  transform: translate(0.5rem, -6.5rem);
  color: #ccc;
  transition: all 0.2s linear;
  width: max-content;
}
textarea:focus + label {
  transform: translate(0.5rem, -7.5rem);
  font-size: 0.7rem;
  background: var(--primary);
  padding: 0 0.3rem;
}
textarea:not(:placeholder-shown) + label,
textarea.simple-text:hover + label,
textarea.simple-area:hover + label {
  transform: translate(0.5rem, -7.5rem);
  font-size: 0.7rem;
  color: #808080;
  background: var(--primary);
  padding: 0 0.3rem;
}