Formulario de contacto HTML CSS

6335 loader7

Abrir en el editor Publica tu código

Recomendado

19 October 2024

Portafolio de desarrolladores HTML V2

10 February 2025

Un código de bachir123

24 August 2025

InspireX: Tema web moderno (Tailwind, vídeo, galería)

HTML

CSS

* {
  box-sizing: border-box;
  }
  
  *:focus {
    outline: none;
  }
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000000; 
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  }
.button{
    display: flex;
  justify-content: center;
  align-items: center;
}
 .form-container {
  width: 420px;
  border: 1px solid #414141;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form-container button:active {
  scale: 0.95;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 12px;
}

.form-container .form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 96px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: inherit;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-submit-btn {
  font-family: inherit;
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}

Recomendado

Portafolio de desarrolladores HTML V2

Un código de bachir123

InspireX: Tema web moderno (Tailwind, vídeo, galería)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS