Como hacer un formulario adaptable a cualquier dispositivo (Responsive).
En este post aprenderás a como realizar este sencillo formulario con ayuda de HTML y CSS.
Puedes hacer uso de este diseño de formulario ya sea que integres a una pagina web o simplemente para ampliar tus conocimientos en HTML, este formulario es adaptable a dispositivos móviles.

Puedes hacer uso de editores de texto como SublimeText, Atom, Brackets o Dreamweaver.

Lo primero que realizaras es una carpeta con el nombre que desees y dentro de ella crearas dos carpetas mas una para la imagen de fondo y la otra para la hoja de estilo CSS. El código en HTML se encuentra en la parte de abajo.

Código en HTML
Este código va dentro de una archivo con extensión .HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>FormularioHTML</title>
        <link rel="stylesheet" href="estilosCSS/formulario.css">
    </head>
    <body>
        <form>
            <h1>Contacto</h1>
            <h4>*Nombre:</h4><input type="text" name="Cont_Nombre" placeholder="Ingrese su nombre" required>
            <h4>Apellidos:</h4><input type="text" name="Cont_Apellidos" placeholder="Ingrese sus apellidos">
            <h4>*Correo:</h4><input type="email" name="Cont_Correo" placeholder="alguien@ejemplo.com" required>
            <h4>Sitio Web:</h4><input type="text" name="Cont_Website" placeholder="www.ejemplo.com">
            <h4>*Asunto:</h4><input type="text" name="Conc_Asunto" placeholder="Asunto" required>
            <h4>*Mensaje</h4><textarea name="Cont_Msj" placeholder="Escriba aqui su mensaje" required></textarea>
            <input type="submit" id="btnEnviar" value="ENVIAR">
        </form>
    </body>
</html>

Estilo CSS
El siguiente codigo va dentro de la carpeta de estilo CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/******Formato Responsive Moviles******/

body {
    background-image: url(../fondo/fondo.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}
   
form {
    width: 95%;
    margin: auto;
    background: rgba(0,0,0,0.5);
    padding: 10px 20px;
    border-radius: 20px;
    transition: all 0.9s;
}

 form h1 {
    text-align: center;
    color: #FFF;
    font-size: 35px;
    margin-bottom: 20px;
}

 form h4 {
    text-align: left;
    color: #FFF;
    margin-bottom: 10px;
}

 input {
    width: 100%;
    border: none;
    padding: 7px;
    margin-bottom: 10px;
    font-size: 15px;
}

 textarea {
    max-width: 100%;
    min-width: 100%;
    max-height: 150px;
    min-height: 100px;
    margin-bottom: 15px;
    font-size: 17px;
}

 #btnEnviar {
    background: #3766DC;
    color: #FFF;
    padding: 15px;
}

/******Formato Responsive Tamaño Tablet******/
@media (min-width: 768px) {
    form {
        width: 65%;
    }
}

/******Formato Para Navegador******/
@media (min-width: 1024px) {
    form {
        width: 450px;
    }
    form h1 {
        font-size: 50px;
       
    }
    #btnEnviar:hover {
        background: #E6344A;
        cursor: pointer;
    }
}

Resultado final

Así se muestra en una pantalla de 480px o móviles.
Así se muestra en una pantalla de 768px o Tablets.
Así se muestra en una pantalla de 1024px o navegadores de escritorio.