js+css实现联系我们自适应表单反馈交互效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现联系我们自适应表单反馈交互效果代码，简洁大方。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(90deg, #6190e8, #a7bfe8);
}

form {
  min-height: 40vh;  

  width: min(90%, 1190px);
  background: white;
  color: #777474;
  border-radius: 2rem;
  padding: 3rem 5rem;
  display: flex;
  position: relative;
}

.title {
  color: #6391e8;
}
.contact-right,
.contact-left {
  flex: 1;
}
.contact-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  border: none;
  outline: none;
  color: #777474;
  font-size: 1rem
}
.input-container {
  position: relative; 
  margin-bottom: 3rem;

}
.placeholder {
  position: relative;
  z-index: 1;
  pointer-events: none;
  padding: 0.3rem 0rem;
  font-size: 0.6rem;
  opacity: 0.6;
  transform-origin: left;
  font-size: .8rem
}
.line-svg {
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  opacity: 0.8;
}

.checkbox-label {
  font-size: 1rem
}
.promo-container {
  position: relative;
  display: flex;
}
.checkbox {
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.checkbox-label {
  padding-left: 0.5rem;
}
.checkbox-container {
  position: relative;
  height: 1rem;
  width: 1rem;
  border-radius: 3px;
  overflow: hidden;
}
.checkmark,
.checkbox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #c5c5c5;
}
.checkbox-fill {
  position: absolute;
  background: #6190e8;
  width: 100%;
  height: 100%;
  top: 100%;
}

.tick-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 2;
}

button {
  font-family: "Poppins" sans-serif;
  font-weight: 500;
  font-size: 1rem ; 
  background: #6190e8;
  color: white;
  border-radius: 0.2rem;
  border-style: none;
  padding: 0.5rem 2.5rem;
  cursor: pointer;
  margin-top: 1rem;
  align-self: flex-start;
}

#character {
  position: absolute;
  transform: scale(0.6) translate(0%, 30%);
  bottom: 0;
  left: 0;
  transform-origin: bottom;
}

.submitted {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #777474;
  font-size: 1rem;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
}

@media screen and (max-width: 812px) {
  form {
    width: 90vw;
    min-height: 80vh;
    flex-direction: column;
    padding: 8rem 3rem;
  }
  .line-svg {
    width: 100%;
  }
  #character {
    transform: scale(0.4) translate(0%, 30%);
  }
}
</style>
</head>


<body>
    <form>
        <!-- Left Side of the form-->
        <div class="contact-left">
            <h1 class="title">Contact Us</h1>
            <p class="description">Let's stay in touch.</br> For more information, </br> sign up. </p>
        </div>


        <!--Right side of the form-->
        <div class="contact-right">
            <div class="input-container">
                <p class="placeholder">Your Name</p>
                <input type="text" name="name" autocomplete="off" class="input-name input">
                <svg class="line-svg" width="300" height="2" viewBox="0 0 300 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="elastic-line" d="M0 0.999512C0 0.999512 60.5 0.999512 150 0.999512C239.5 0.999512 300 0.999512 300 0.999512" stroke="#D1D4DA" stroke-width="2"/>
            </svg>
            </div>
            <div class="input-container">
                <p class="placeholder">Your Email</p>
                <input type="email" name="email" autocomplete="off" class="input-email input">
                <svg class="line-svg" width="300" height="2" viewBox="0 0 300 2" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path class="elastic-line" d="M0 0.999512C0 0.999512 60.5 0.999512 150 0.999512C239.5 0.999512 300 0.999512 300 0.999512" stroke="#D1D4DA" stroke-width="2"/>
          </svg>
            </div>
            <div class="input-container">
                <p class="placeholder">Phone Number</p>
                <input type="tel" name="tel" autocomplete="off" class="input-number input">
                <svg class="line-svg" width="300" height="2" viewBox="0 0 300 2" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path class="elastic-line" d="M0 0.999512C0 0.999512 60.5 0.999512 150 0.999512C239.5 0.999512 300 0.999512 300 0.999512" stroke="#D1D4DA" stroke-width="2"/>
          </svg>
            </div>
            <div class="promo-container">
                <div class="checkbox-container">
                    <span class="checkmark"></span>
                    <div class="checkbox-fill"></div>
                    <input type="checkbox" class="checkbox">
                    <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="tick-mark">
                <path class="elastic-line" d="M2 8.5L6.5 13L17.5 2" stroke="white" stroke-width="4" />
              </svg>
                </div>
                <label class="checkbox-label">Send me promotions and offers.</label>
            </div>
            <button>Join</button>
        </div>
        <!-- --------------------------------------------------- -->
        <svg id="character" width="241" height="336" viewBox="0 0 241 336" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path
      id="Vector"
      d="M6.93007 256.814L36.743 319.182L33.0458 320.95C31.7976 321.546 30.3642 321.623 29.0604 321.162C27.7565 320.702 26.6886 319.742 26.0927 318.495L0.776193 265.535C0.180297 264.288 0.103706 262.854 0.563854 261.55C1.0247 260.246 1.98468 259.179 3.23217 258.582L6.93007 256.814Z"
      fill="#3A4279"
    />
<path
      id="Vector_2"
      d="M39.3886 242.73L18.8135 251.236L30.3562 267.559L48.5964 261.993L39.3886 242.73Z"
      fill="#FFCCB3"
    />
<path
      id="Vector_3"
      d="M26.2462 251.887C26.2462 251.887 34.279 264.295 35.4909 271.227C36.7022 278.16 40.8526 313.227 39.736 316.388C38.9333 318.66 36.0179 319.635 34.1683 319.842C33.7624 319.885 33.3531 319.801 32.9974 319.601C32.6416 319.401 32.3562 319.095 32.1822 318.726L5.11971 262.113C4.66722 261.168 4.60389 260.084 4.94222 259.093C5.28124 258.102 5.99478 257.284 6.93109 256.814C10.6749 254.933 16.4021 252.114 18.8135 251.236C22.5406 249.88 25.0008 249.888 26.2462 251.887Z"
      fill="#6392E8"
    />
<path
      id="Vector_4"
      d="M171.896 281.568L143.936 333.181C143.278 334.397 142.163 335.301 140.838 335.695C139.512 336.089 138.084 335.94 136.869 335.282L133.265 333.33L166.191 272.548L169.795 274.501C171.011 275.159 171.916 276.274 172.31 277.599C172.704 278.924 172.556 280.352 171.896 281.568Z"
      fill="#3A4279"
    />
<path
      id="Vector_5"
      d="M134.488 256.843L154.607 266.377L142.254 282.096L124.318 275.616L134.488 256.843Z"
      fill="#FFCCB3"
    />
<path
      id="Vector_6"
      d="M147.15 266.652C147.15 266.652 138.5 278.637 136.94 285.499C135.38 292.362 129.463 327.174 130.418 330.388C131.105 332.698 133.967 333.819 135.804 334.118C136.207 334.182 136.62 334.119 136.986 333.937C137.351 333.756 137.651 333.465 137.844 333.105L167.733 277.931C168.232 277.011 168.351 275.931 168.063 274.925C167.774 273.917 167.103 273.064 166.192 272.547C162.548 270.48 156.97 267.375 154.606 266.377C150.952 264.834 148.495 264.717 147.15 266.652Z"
      fill="#6392E8"
    />
<path
      id="Vector_7"
      d="M195.099 183.321C195.099 183.321 202.801 221.569 196.824 229.063L44.5191 268.062L31.5312 243.734L120.47 203.376L138.282 178.962L195.099 183.321Z"
      fill="#5E5D9A"
    />
<path
      id="Vector_8"
      d="M83.8226 181.09C83.8226 181.09 40.7559 178.754 19.4095 180.63C5.66418 181.838 0.709057 217.012 11.6781 223.411L129.4 283.687L143.272 258.619L67.3311 207.215L121.661 199.573L83.8226 181.09Z"
      fill="#5E5D9A"
    />
<path
      id="Vecto.........完整代码请登录后点击上方下载按钮下载查看