1
respuesta

Challenge Portfolio: Seccion Contacto

por Guillermo Topp
| 33.6k xp | 28 posts
Fotógrafo Freelance

Hice un formulario básico de contacto pero al querer darle el formato de figma pude notar que en figma el campo nombre es de 2 renglones, dejando el placeholder fijo en el primer renglon con el texto en gris "nombre", busque en los archivos de ejemplo de github pero solo encontre un formulario básico, me gustaria darle a mi formulario el formato de figma en el campo nombre. ¿Pueden ayudarme ?

                <br>
                <input type="email" id="email" name="email" required placeholder="email"><br>

                <br>
                <input type="text" id="asunto" name="asunto" required placeholder="asunto"> <br>

                <br>
                <textarea id="mensaje" name="mensaje" rows="4" required placeholder="Escribir el mensaje aqui"></textarea><br>

                <input type="submit" value="Enviar">
            </form>
            
            ![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad](https://cdn1.gnarususercontent.com.br/6/603062/68f2a18b-65ef-425d-b5d9-740271795301.png)
1 respuesta
por Bruno Botelho de Souza
| 3906.9k xp | 14848 posts
Alura Scuba Team Scuba Team | Front-end

¡Hola Guillermo!

Para lograr esto, puedes utilizar CSS para ajustar el tamaño del campo y el estilo del placeholder. Aquí tienes un ejemplo de cómo podrías hacerlo:

#nombre {
  width: 200px; /* Ajusta el ancho según tus necesidades */
  height: 40px; /* Ajusta la altura según tus necesidades */
  padding: 10px; /* Ajusta el relleno según tus necesidades */
}

#nombre::placeholder {
  color: #999; /* Cambia el color del placeholder según tus necesidades */
  font-size: 14px; /* Ajusta el tamaño de fuente del placeholder según tus necesidades */
  line-height: 20px; /* Ajusta el interlineado del placeholder según tus necesidades */
}

Puedes ajustar los valores de width, height, padding, color, font-size y line-height según las especificaciones de tu diseño en Figma. Recuerda que también puedes utilizar otras propiedades CSS para lograr el formato deseado.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!