Formulaire de contact CSS

Publiez votre code

Recommandé

9 July 2025

@import "https://fonts.googleapis.com/css?family=Poppins";
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #333;
  font-family: Poppins;
  text-transform: uppercase;
  font-size: 11px;
  background: #0f0c29; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1 {
  margin: 0;
}
#contact {
  margin: 4em auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid white;
}

#contact:hover {
  background: #000000;
}
#contact:active {
  background: #444;
}

#contactForm {
  display: none;

border: 6px solid 3324be;
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius: 16px;
}

input,
textarea {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 15px;
}
textarea {
  height: 80px;
  resize: none;
}

.formBtn {
  outline: 0;
  background: #3324be;
  width: 140px;
  height: 30px;
  border: 0;
  color: #ffffff;
  font-size: 1.2em;
  border-radius: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

Formulaire de contact CSS

Recommandé

Style de carte

Diaporama (Moderne)

Un code par ytr3d3

index.html

styles.css

main.js

Recommandé

Style de carte

Diaporama (Moderne)

Un code par ytr3d3

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js