Como crear un formulario de comentarios para tu web

Esta podría ser la base de tu sistema de comentarios.

Publicado por AlbertoBSD el 2019-12-13 04:25:30

Y no es tan facil, por que hay que cuidarse de los XSS

Cosas pendientes por realizar

  • Script para previzualizar
  • Validar que sea WEB valida
  • Validar que sea Email Valido
  • Agregar Recaptcha
  • Diseñar base de datos
  • Evitar XSS y SQLi
  • etc...

Actualmente muchas de las acciones mencionadas ya la tengo implementados solo espero testearlo lo bastante para poder liberarlo en el servidor en produccion

Aqui el pequeño Snipet en HTML adaptado pra Boostrap


<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 final en IMAGEN:

please login
Login to comment
Loging with github