En algunos trabajos el cliente quiere tener un formulario de acceso en un área de la página, para el personal autorizado. Es conveniente saber cómo colocar los datos del formulario, que quede a tu gusto y conveniencia. Ahora veremos cómo crear un formulario usando HTML, CSS y Javascript.
Lo primero antes de comenzar es elegir una zona donde colocar el formulario, lo más práctico es en widget lateral. Posteriormente vamos a elegir el widget de HTML para poder escribir el código que deseamos. Ahora veamos el código en HTML del formulario a crear.
<div id=”container-login”>
<form method=”post” action=”/wp-login.php” id=”loginform” name=”login-form”>
<div id=”user”>
<label for=”user_nick”>Usuario o correo electrónico</label>
<input name=”log” type=”text” id=”user_nick” />
</div>
<div id=”pass”>
<label for=”user_pass”>Contraseña </label>
<input name=”pwd” type=”password” id=”user_pass” />
</div>
<div id=”login_botton”>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”Acceder”/>
<input type=”hidden” name=”redirect_to” value=”/”/>
</div>
</form>
</div>
Con este código pueden crear un formulario sin problema, pero quedaría muy rústico así que vamos también a colocar un poco de css para maquillarlo un poco, y adicionalmente para ocultarlo si ya el usuario tiene la sección activa.
body:not(.logged-in) #login-code-container a,
body.logged-in #login-code-container form
{
Diplay none;
}
#container-login
{
Width:100%;
Height:100%;
}
#user,#pass
{
Width:100%;
Height:40%;
}
Label
{
Width:30%
Font-size:80%;
}
Input[type=”text”], Input[type=”password”]
{
Width:68%;
Border-radius:5px
Border: 1px blue solid;
}
#login-botton
{
Color:white;
Background-color:blue;
Border-radius:3px;
}
Este código css puedes colocarlo en el archive style.css del tema que estás usando para crear el formulario que deseas. Puedes agregarles otros detalles como cabecera u otros colores con CSS.
A veces no se necesitan plugin ni shortcode, para crear algo solamente sencillos códigos para crear un formulario de categoría. Espero que hayan disfrutado de este tutorial y nos vemos en el siguiente tuto-tip. ?
