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="Vector_9"
      d="M23.0297 226.405C35.7482 226.405 46.0587 216.095 46.0587 203.376C46.0587 190.657 35.7482 180.347 23.0297 180.347C10.3105 180.347 0 190.657 0 203.376C0 216.095 10.3105 226.405 23.0297 226.405Z"
      fill="#5E5D9A"
    />
<path
      id="Vector_10"
      d="M192.998 229.379C205.717 229.379 216.028 219.069 216.028 206.349C216.028 193.631 205.717 183.32 192.998 183.32C180.279 183.32 169.969 193.631 169.969 206.349C169.969 219.069 180.279 229.379 192.998 229.379Z"
      fill="#5E5D9A"
    />
<path
      id="Vector_11"
      d="M141.342 109.706C149.635 106.928 154.106 97.9532 151.329 89.6601C148.551 81.367 139.576 76.8957 131.283 79.6733C122.99 82.4509 118.518 91.4262 121.296 99.7193C124.074 108.012 133.049 112.484 141.342 109.706Z"
      fill="#6392E8"
    />
<path
      id="Vector_12"
      d="M139.933 122.545C139.517 120.042 138.686 115.035 137.792 110.472L133.037 88.3867C133.037 88.3867 145.806 107.259 151.689 120.404C156.046 130.255 161.1 140.295 161.936 148.789L151.903 136.822L141.172 124.033L139.933 122.545Z"
      fill="#3A4279"
    />
<path
      id="Vector_13"
      d="M223.729 59.417L230.689 46.5684L223.729 59.417Z"
      fill="#E56441"
    />
<path
      id="Vector_14"
      d="M228.289 61.4987L235.874 49.5327L228.289 61.4987Z"
      fill="#E56441"
    />
<path
      id="Vector_15"
      d="M233.708 63.7991L238.043 56.5522L233.708 63.7991Z"
      fill="#E56441"
    />
<path
      id="Vector_16"
      d="M222.009 70.7293C221.972 66.2809 219.303 60.897 219.303 60.897L222.009 70.7293Z"
      fill="#E56441"
    />
<g id="hand">
<path
        id="Vector_17"
        d="M129.913 97.6787C127.487 85.7009 133.193 86.01 135.092 84.1054C135.092 84.1054 142.215 78.2313 147.643 83.7071C153.388 89.499 186.322 134.491 186.322 134.491L165.715 153.443L161.842 148.821L151.808 136.855L141.077 124.065L139.744 122.609L125.267 106.211C125.267 106.211 131.285 103.984 129.913 97.6787Z"
        fill="#6392E8"
      />
<path
        id="Vector_18"
        d="M206.904 83.8368C211.801 74.906 209.448 73.3898 211.531 68.308C213.583 63.3494 209.939 51.0583 213.428 52.734C216.916 54.4103 217.995 58.8642 217.995 58.8642C220.381 54.6442 222.578 46.8794 228.288 45.9904C234 45.1015 234.506 46.8989 237.743 49.5554C246.355 56.7207 235.373 67.4893 233.54 71.5903C232.361 74.1604 223.696 81.9969 222.736 83.7101L218.375 90.0359L206.904 83.8368Z"
        fill="#FFCCB3"
      />
<path
        id="Vector_19"
        d="M223.729 59.417L230.689 46.5684"
        stroke="#E56441"
        stroke-width="0.94666"
        stroke-linecap="round"
      />
<path
        id="Vector_20"
        d="M228.289 61.4987L235.874 49.5327"
        stroke="#E56441"
        stroke-width="0.94666"
        stroke-linecap="round"
      />
<path
        id="Vector_21"
        d="M233.708 63.7991L238.043 56.5522"
        stroke="#E56441"
        stroke-width="0.94666"
        stroke-linecap="round"
      />
<path
        id="Vector_22"
        d="M222.009 70.7293C221.972 66.2809 219.303 60.897 219.303 60.897"
        stroke="#E56441"
        stroke-width="0.94666"
        stroke-linecap="round"
      />
<path
        id="Vector_23"
        d="M165.542 134.132L207.445 78.3291C207.711 78.0012 208.091 77.784 208.508 77.7193C208.926 77.6539 209.354 77.7458 209.707 77.9776L220.68 85.2334C221.201 85.5871 221.572 86.1217 221.722 86.7329C221.872 87.3448 221.788 87.9908 221.488 88.5443L187.791 150.688L165.542 134.132Z"
        fill="#6392E8"
      />
</g>
<path
      id="Vector_24"
      d="M175.722 157.701C183.472 157.701 189.754 151.419 189.754 143.669C189.754 135.92 183.472 129.637 175.722 129.637C167.972 129.637 161.689 135.92 161.689 143.669C161.689 151.419 167.972 157.701 175.722 157.701Z"
      fill="#6392E8"
    />
<path
      id="Vector_25"
      d="M113.496 71.77C113.496 71.77 137.01 77.9928 141.047 79.6079C145.084 81.2222 145.352 87.681 145.622 92.256C145.89 96.8304 144.987 199.573 144.987 199.573L92.9462 197.572L54.0278 174.79C54.0278 174.79 55.7194 93.2682 56.2583 89.5007C56.7964 85.7332 52.5673 82.4885 57.1514 80.5922L86.619 72.8.........完整代码请登录后点击上方下载按钮下载查看