Tutorial para crear una forma de contacto en html5, php y javascript con captcha.
En esta ocasión vamos a aprender el como realizar una forma de contacto moderna y que se vea bien para nuestras paginas web usando javascript, Ajax y PHP. Todo en la misma pagina sin recargar o enviar a otra pagina. También aprenderemos a incorporar un capcha ya sea de google o de libreria de PHP o en otro tutorial uno hecho por nosotros. Pueden poner esta forma a trabajar en cualquier hosting que tenga servidor Apache con PHP. Podran modificar la forma o la estructura para cualquier propósito a futuro una vez que entiendan los conceptos básicos del desarrollo web.
Y pues bueno, sin tanto choro vamos a empezar mostrando nuestro producto terminado:
Bien lo primero que necesitaremos sera nuestra estructura basica de html. Pueden guardar esta estructura en un template de su editor favorito o tener un archivo. Aunque realmente es mejor teclearlo si estan aprendiendo para que lo memoricen.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Forma de contacto</title>
<style>
/*aqui pondremos nuestros estilos, por cierto este es un comentario*/
</style>
<script>
//nuestro codigo, otro comentario
</script>
</head>
<body>
<!--ultimo comentario de html en el body-->
</body>
</html>
Lo siguiente es crear nuestra forma, la forma va dentro de las etiquetas body.
Primero que nada la forma tiene un id que le llamaremos forma, pero le podemos poner cualquier otro id/nombre con el cual la identificaremos por medio de javascript.
<form id="forma" onsubmit="enviar(); return false;">
<div>
Un momento mientras cargamos los comentarios
{{item.date}}
{{item.image}}
{{subitem.date}}
{{subitem.image}}