Como crear un formulario de comentarios para tu web

[AlbertoBSD]

Funte: Como crear un formulario de comentarios para tu web

Pues nada lo primero es tener el Formulario en HTML.
Posterior mente el javascript para validar el formulario antes de enviarlo
El script en el Backend para volver a validar los datos.
El metodo de almacenamiento del comentario (Base de datos)
Un sistema para evitar que saturen de comentarios basura
Y al final pero mas importante EVITAR SER HACKEADO (xss, sql, file inclusion etc etc etc etc etc)

El codigo en HTML para el formulario utilizando Boostrap:

Código (html4strict) [Seleccionar] Expandir


<h4>Deja un comentario</h4>
<p></small>Tu dirección de correo electrónico no será publicada. <b>Los campos obligatorios están marcados con *</b></small></p>
<div class="form-group">
<label for="exampleInputUsername">Nombre *</label>
<input type="text" class="form-control" id="exampleInputUsername" aria-describedby="usernameHelp">
<small id="usernameHelp" class="form-text text-muted">Nombre para mostrar, este campo si va a ser mostrado</small>
</div>
<div class="form-group">
<label for="exampleInputEmail">Correo Electronico *</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">Tu direccion de correo electronico no sera publicada</small>
</div>
<div class="form-group">
<label for="exampleInputWEB">WEB *</label>
<input type="text" class="form-control" id="exampleInputWEB" aria-describedby="webHelp">
<small id="webHelp" class="form-text text-muted">Direccion WEB Segura valida ejemplo: https://www.example.com/</small>
</div>
<div class="form-group">
<label for="exampleTextAreaComentario">Comentario *</label>
<textarea class="form-control" id="exampleTextAreaComentario" rows="5" aria-describedby="comentarioHelp"></textarea>
<small id="comentarioHelp" class="form-text text-muted">Todos los comentarios seran moderados antes de ser publicados</small>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheckboxSubscribe">
<label class="form-check-label" for="exampleCheckboxSubscribe">Recibir notificaciones de Respuestas a tus comentarios</label>
</div>
<button type="button" class="btn btn-primary">Publicar Comentario</button>
<button type="button" class="btn btn-secondary">Vista Previa</button>
<div id="comentario_vista_previa">
</div>




Resultado: