En este tutorial construiremos un formulario de contacto funcional y validado desde cero, en esta primera parte veremos como hacer la estructura en HTML y los estilos en CSS.
Actualización: Acabo de publicar un tutorial para usuarios avanzados de como hacer un formulario de contacto similar a este, capaz de enviar mensaje sin recargar la pagina usando AJAX, todo en un solo tutorial.
Resultado Final
Estructura HTML
Vamos a empezar con una estructura HTML base y guardamos este archivo como index.html:
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
</head>
<body>
<form class='contacto'>
<div><label>Tu Nombre:</label><input type='text' value=''></div>
<div><label>Tu Email:</label><input type='text' value=''></div>
<div><label>Asunto:</label><input type='text' value=''></div>
<div><label>Mensaje:</label><textarea rows='6'></textarea></div>
<div><input type='submit' value='Envia Mensaje'></div>
</form>
</body>
</html>
Hoja de Estilos
Vamos a crear una hoja de estilos, le ponemos de nombre estilos.css y la ubicamos en la misma carpeta en donde esta el .html
Empezamos con el siguiente código que define las propiedades de fuente, color de fondo y longitud del body:
*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
body{
width: 400px;
margin: auto;
background-color: #E2ECEE;
}
Formulario
Hacemos un selector para el formulario (.contacto) y le definimos border, border-radius, padding, margin, y color de fondo:
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
En esta linea estoy definiendo dos sombras: una externa y otra interna que da la apariencia de un borde interior.
Luego hacemos selectores para label y div y ponemos el siguiente código:
.contacto label{
display: block; /* esto es para que el label se sobreponga a la caja de texto */
font-weight: bold;
}
.contacto div{
margin-bottom: 15px; /* esto los separara un poco */
}
Cajas de texto
Para las cajas de textos usamos selectores multiples, para los input y para el textarea:
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px; /* una longitud definida */
border: 1px solid #CED5D7;
resize: none; /* esta propiedad es para que el textarea no sea redimensionable */
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none; /* reset especifico para Chrome/Safari */
box-shadow:0 0 0 3px #dde9ec;
}
Nota que en la linea 26 y 34 se usa el selector input[type=’text’](selector de atributo) esto es para que no se mezcle con el otro input[type=’submit’] (el boton de envio).
Boton de Envio
Por ultimo para el boton de envio usaremos estilos similares a los de las cajas de textos, pero ademas va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3:
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6; /* fallback para navegadores que no soporten degradados */
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
El boton debe ir quedando así, en sus tres estados:
Código final CSS
*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
body{
width: 400px;
margin: auto;
background-color: #E2ECEE;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
display: block;
font-weight: bold;
}
.contacto div{
margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
Si no entendiste una parte o tienes alguna duda, házmela saber en los comentarios, no olvides suscribirte por correo electrónico para que seas notificado cuando se publiquen las continuaciones de este tutorial.
Muchas gracias Josue, solo falta programarlo en php para hacerlo en el metodo POST y listo queda guapo el formulario, me sirvió mucho en un proyecto que tengo
Si claro, pero falta hacer la validación del lado del cliente y del servidor antes de hacerlo funcionar con PHP 🙂
Jeje.. ok 😉 , men me gustaria que hicieras un tutorial de seguridad o validacion ^_^, ya he hecho el formulario con radiobuttons, checkbuttons, pero kisiera darle seguridad o validar y que si alguna casilla esta sin llenar ke te avise, creo que ya esta validacion seria con js o me equivoco? :$
Saludos Ochoa (Y)
oye muy bueno tutorial y diseño.
una pregunta ya me descarge el contacto pero para poderlo hacer funcionar en mi pagina web tengo que hacer un php no?
me podrias ayudar con eso por favor?
Claro, estos tutoriales que te dejo aquí son la continuación de este, uno es para validarlo con jquery y el ultimo para hacerlo funcionar con PHP, espero te sirvan.
https://tursos.com/tutoriales/javascript/como-hacer-un-formulario-de-contacto-ii-validar-con-jquery
https://tursos.com/tutoriales/php/como-hacer-un-formulario-de-contacto-iii-validar-y-enviar-con-php
Hola mira me encanta este pedazo de formulario, me gustaría que me explicases como puedo hacer para que cuando le den al botón enviar mensaje, me llegue a mi email
El tutorial no termina alli, te dejo la continuación:
https://tursos.com/tutoriales/javascript/como-hacer-un-formulario-de-contacto-ii-validar-con-jquery
https://tursos.com/tutoriales/php/como-hacer-un-formulario-de-contacto-iii-validar-y-enviar-con-php
Hola, muy interesante! pero no funciona en IE, sabrás que cambios se debe hacer en la hoja de estilos para que funcione? Gracias!
Utiliza PIE: http://css3pie.com/ es un script que hace funcionar CSS3 en IE.
Buenas Josue, he incorporado a cada una de las reglas la sentencia behavior apuntando al htc como dice en el tutorial de PIE pero aún así no lo consigo, nada cambia, debo modificar la sintaxis de las reglas? Si es así, me podrías dar como ejemplo una de las reglas de tu hoja de estilos modificada? Gracias!!
Intenta hacerlo con PIE JS
http://css3pie.com/documentation/pie-js/
Hola Buenas, me gusta mucho el formulario pero tengo un problema 🙁 no me funciona en IE8. que puedo hacer? muchas gracias
Intenta usar PIE: http://css3pie.com/ es un script que hace funcionar CSS3 en IE.
Josue buenaas, perdona la insistencia, pero he intentado con lo que me dices : http://css3pie.com/ y no me funciona o es que talvez no estoy haciendo lo incorrecto, te agradeceria muchisimo si me explicas que es lo
que que tengo que hacer con «behavior: url(/PIE.htc);»
Muchas gracias anticipadas!!1
Si, es un poco complicado hacerla con el behavior, mira hay otro método mas sencillo y es hacerlo con JavaScript http://css3pie.com/documentation/pie-js/
Si me podrías ayudar para hacer funcionar este formulario pero con asp.net muchas gracias
Lo siento, no se ASP.
Excelente tutorial mi hermano..!!!!
Soy super principainte tengo un mes que empece a Bregar con el diseno web y quisiera saber como puedo adaptar este formulario a una plantilla de Joomla 1.5 y que me envié la información a mi correo.. Se que este no es para principiantes pero si tiene alguna manera que me pueda ayudar se lo agradecería..
Saludos desde Rep. Dominicana,
Hola, gracias por tu comentario, la verdad es que no se mucho de Joomla no sabria como ayudarte.
ok mi hermano gracias.. seguiré viendo los otros tutoriales para ver como puedo insertarlo..
te felicitooooooooo me ayudo bastante! muchas gracias y gud vibs en todo!!!
Mensaje
Estupendo tutorial pero tengo una duda, ¿donde hay que poner la dirección de email a la que mandar los datos del formulario?
Creo que se paso por alto o no logro encontrarlo.
Gracias.
El formulario esta dividido en 3 te dejo las continuaciones
https://tursos.com/tutoriales/javascript/como-hacer-un-formulario-de-contacto-ii-validar-con-jquery
https://tursos.com/tutoriales/php/como-hacer-un-formulario-de-contacto-iii-validar-y-enviar-con-php
Hola, cuando me mandan un correo, no me llega el correo que carga el destinatario, y no me puedo comunicar para contestar porque no llega mas que «Silvina@mx2920.godns.net».. tenes idea de que puede ser?
Hola, ya encontre el el error faltaba un signo < "From: $nombre \r\n».
Gracias por el tutorial, está genial!
Me alegra que te haya servido, gracias por comentar 🙂
Ola Josue. Mi duda como lo puedo poner en lmi blogger q tengo q hacer?
Creo que no se puede poner, ya que este formulario usa PHP para enviar, blogger a lo mucho te permite poner HTML propio creo, te recomiendo http://wufoo.com/ como una alternativa, eso si lo puedes embeber en Blogger
Muchas Gracias
Estimado Josue Ochoa:
A pesar de ser bastante simple el estilo, ese estilo era justo lo que necesitaba para un sitio, así es que te pido o solicito tu permiso y autorización para poder usarlo en dicho sitio. Me gusto muchisimo tu pagina. Esperare tu respuesta. Saludos.
Claudio.
Claro que puedes claudio, tomalo con toda libertad.
Saludos.
No he visto ningún post mejor hecho. Enhorabuena!
Tengo una duda, cómo puedo hacer para que envíe a dos direcciones?
He probado duplicando $dest = «»; //Email de destino pero no va.
Muchas Muchas gracias
Ponle una coma:
$dest = "email1@gmail.com, email2@gmail.com";
Espero haberte ayudado.
Muchas gracias, es genial que respondas a todas las dudas.
He solucionado el problema y he incluido, con retoques, tu formulario en mi web. No se me ven las ñ pero dudo que tenga que ver con el PHP.
Gracias de nuevo por la ayuda.
Para Pablo y su comentario del 31 de marzo, 2012:
Puedes incluir después de la la siguiente marca o viñeta para cuando estés creando tu index.html ok, te servirá para que reconozca las eñes y también los acentos ( estos últimos si tienes que se teclados tal cual su ortografía ) así te ahorras colocar …ció… pero de vez en cuando no esta demás acordarse como se hace!!
Para Pablo y su comentario del 31 de marzo, 2012:
Puedes incluir después de la la siguiente marca o viñeta para cuando estés creando tu index.html ok, te servirá para que reconozca las eñes y también los acentos ( estos últimos si tienen que ser teclados tal cual su ortografía ) así te ahorras colocar …ció… pero de vez en cuando no esta demás acordarse como se hace!!
Logre instalarlo y hacerle más parametros como Telefono…
Lo malo es que no tengo idea como hacer que solo ese campo acepte número solamente y no letras.
Checa este post https://tursos.com/tutoriales/html-css/10-novedades-de-html5-que-puedes-empezar-a-aprovechar-ahora-mismo, especificamente en el punto 9, puedes usar HTML5 para hacer que el usuario solo pueda ingresar números:
Okey…. intentare con ese…
Habia intentado con
<?php
if(isset($_POST['boton'])){
if($_POST['nombre'] == ''){
$error1 = 'Ingrese su nombre’;
}else if($_POST[‘email’] == » or !preg_match(«/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/»,$_POST[‘email’])){
$error2 = ‘Ingrese un email correcto’;
}else if($_POST[‘asunto’] == »){
$error3 = ‘Ingrese un asunto’;
}else if($_POST[‘mensaje’] == »){
$error4 = ‘Ingrese un mensaje’;
}
else if($_POST[‘fono’] == » or preg_match(«/^\d{9}+$/»,$_POST[‘fono’])){
$error5 = ‘Solo digita numeros’;
}
else{
$dest = «michel.leiva@gmail.com»; //Email de destino
$nombre = $_POST[‘nombre’];
$email = $_POST[‘email’];
$fono = $_POST[‘fono’];
$asunto = $_POST[‘asunto’]; //Asunto
$mensaje = $_POST[‘mensaje’]; //Cuerpo del mensaje
…..etc
Funciona, pero a la hora de colocar numeros y luego borrarlos y dejarlo en blanco… me sale el error del Asunto en vez de no salir nada (y lo raro es que aparece en el lugar del fono) intentare con esta nueva
Hola, primero que nada muy buen tutorial hasta ahora a ido todo bien, espero no te moleste pero he creado uno modificando valores y demás siguiendo el tutorial, soy principiante pero con ánimos de aprender.
He estado intentando y buscando la manera de como poder cambiar solo el tamaño del cuadro donde escribes el mensaje, hay alguna manera de hacerlo, de antemano, muchas gracias.
Usa las propiedades width y height de CSS para modificar las dimensiones del textarea:
textarea{
width: 400px;
height: 120px;
}
Gracias por la respuesta tan rápida, solo que tengo una duda como la implemento, por que no tengo idea de como implementarla, me puedes dar un ejemplo de como se haría en el cogido que mostraste, te antemano gracias.
Agregalo en tu hoja de estilos o en un elemento style:
Muchas gracias ya pude hacerlo.
Hola Ochoa un gran tutorial. y una consulta como se puede hacer para que tengo un tipo de seguridad como Captcha o algo por el estilo. Soy todavía principiante en esto y Muchas Gracias por el Hermoso Tutorial.
Tal vez este tutorial te sirva
https://tursos.com/tutoriales/php/como-hacer-un-sistema-captcha-con-php
Muchas Gracias
HOLA BUENAS TARDES… realmente esto no es lo mio.. y entiendo muy poco.
Soy diseñador grafico de profesion y se mu ypoco de web, simplemente necesito un formularios de contacto HTML, para poner en un sitio, y descargue este que esta publicado.. Lo que no se es donde poner la direccion de email a la que ira el formulario.
MUCHAS GRACIAS A LOS QUE PUEDAN AYUDARME!!!!!!
Eso esta en la tercera parte del tutorial.
Muchas Gracias!!!!!
acabo de implementarlo en mi sitio y se ve realmente bien y funcional, les dejo a los que les interese el php ya listo para usarse con la css desde mi nube de dropbox :
https://dl.dropbox.com/u/63684812/contacto.php
Saludos cordiales
Hola, como puedo hacer para que los label no vayan encima sino al costado izquierdo de los text pero todos los text a la misma altura (margen izquierdo igual)
Gracias,
Tendrias que hacer un poco de floating
esta bueno pero tantos div usas? me parece un exceso
Porque? lo que pasa es que no puedo dejar a los label e input sueltos, entonces uso div para encerrarlos, luego al div le aplico CSS y queda bien, no es algo negativo usar un elemento en exceso, a excepcion de los headings o tablas.
las nuevas etiquetas del html5 pueden reducir la cantidad de divs que usamos, ¿en este caso se podria reemplazar por ? Gracias por la respuesta, estare probandolo =). Saludos.
perdon quise decir si se podria reemplezar los divs por p (etiqueta parrafo).
Se podria reemplazar por section tal vez, pero habria que incluir el html5shiv para que funcione en IE y eso seria salirnos del tema del tutorial 🙂
p tambien es una opcion pero prefiero usar ese elemento unicamente cuando contiene texto.
Josue Ochoa, quería escribirte simplemente para agradecer por el tiempo que le dedicas a este blog y felicitarte por la manera profesional en la que lo haces, explicando y detallando cada aspecto de forma clara y concreta. Es un placer encontrar gente como tu en la web.
Saludos!
Hola, Me sirvio perfectamente el Formulario, te lo agradezco mucho
entra a http://www.azulganweb.com.ar para ver como me quedo, SI QUERES.
Che te hago una pregunta, si quiero achicarlo el formulario o cambiarlo a la derecha izquierda ?
Saludos y gracias de antemano.. NOse si me van a responder si sigue activa esta web nose jaja
Si quieres achicarlo, achicas el tamaño de la fuente, reduces el padding, y si quieres alinearlo a la derecha o a la izquierda, lo haces mediante float: left o float: right.
Como Colocar Este Formulario En Una Tabla Sin Que Se Pierda El CSS???
como podria hacer que en mi pag. de html me dejen comentarios saludos
La solucion mas rapida seria con un widget de comentarios, tienes el de Facebook, Disqus, Intensedebate, etc.
Hola Josue,
Excelente tu publicación, wow… , es muy buena.
Como puedo hacer para que la informacion me la guarde en una base de datos en mysql?
Y de casualidad no tienes una entrada donde expliques como adjuntar un pdf en el formulario y lo guarde en la base de datos?
Te agradezco mucho tu ayuda y de nuevo felicitaciones por tan excelente entrada 🙂
Estoy haciendo una continuacion tocando esa parte de guardar en base de datos, sobre lo del pdf no puedes guardar un archivo en si en una db, lo que puedes guardar es un link a donde se aloje de forma remota, puedes usar el codigo de este tutorial para eso.
Del formulario en html de Contactenos, donde pongo el email del destinario?? En qué parte?
El formulario esta dividido en 3 partes, en la tercera parte es donde se define el correo destinatario.
Hola! te hago una consulta, en el archivo php (le cambie el nombre, le puse enviar.php) me sale esto:
http://juegoydesarrollo.com.ar/enviar.php
Warning: require(conexion.php) [function.require]: failed to open stream: No such file or directory in /home/jyd/public_html/enviar.php on line 11
Fatal error: require() [function.require]: Failed opening required ‘conexion.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/jyd/public_html/enviar.php on line 11
que es?
tuve que agregar esto tambien
El error te lo dice claramente, el archivo conexion.php no existe.
La calidad de este tutorial es realmente asombrosa (cabe aclarar que ya leí las cuatro partes de éste).
Ahora web.tursos.com tiene un fiel lector más 😉
Me alegra que te haya gustado, muchas gracias por tu comentario 🙂
Hola quisiera que me ayudes como puedo hacer para validar numeros por ejemplo numeros telefonicos en caso quiera colocar numero telefonico por ejemlo no espero tu respuesta muchas gracias
Hola, felicitaciones por el tutorial, realmente me costo encontrar uno decente y definitivamente este es uno de los mejores, muchas gracias por compartirlo.
Buen bien explicado y muy buenos tutoriales! Gracias! Me ha ayudado mucho!
me encantó el formulario!, una preguntilla, a menudo tengo que hacer formularios para introducir muchos datos entonces tengo que poner muchos input y label, el problema es que los suelo meter en textfield y no quedan digamos alineados… tengo que estar cambiando a ojo las medidas de cada input y cuando se maximiza la pantalla se desordenan, ¿se podría organizar de alguna manera con divs?
ya lo solucioné con divs flotantes ^^
che donde pongo mi e mail para recibir los correos ?????
Lee el resto de los tutoriales.
Que buen tutorial Josue, mis felicitaciones!!!
hola amigo primeramente te doy las gracias por el tutorial esta exelente solo tengo una duda porque aun no e probado si me funciono adonde coloco el $dest = » correo@mail»; para poner el mail adonde quiero que se vaya el mensaje por ahora lo e colocado en
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset
$dest = » correo@mail»;
}
espero puedas corregirme gracias saludos!
Lee las 3 partes, el correo va en la parte de PHP.
Muy buen tutorial bastante ordenado por partes y comentado…Gracias..
Gracias
EL AJAX TENGO QUE TENERLO EN MI PC
COMO LO BAJO
wufoo.com
ESTOY HACIENDO MI PAGINA PERO EN CONTACTOS NO SE COMO HACER
NO QIERO IR POR PHP OTROS
ALGO SENCILLO
hola!. he logrado hacerlo!. muchas gracias!
Tengo una consulta, modifique el formulario para que en vez de que diga Asunto, diga Teléfono.
Ahora en el asunto del mail me asigna el teléfono, cómo hago para agregar el asunto predeterminado y que no lo tengan que completar quienes completan el formulario?
Quiero que siempre sea el mismo asunto.
Gracias!!
Cambia la caja de texto por un menu desplegable (select):
Contacto
gracias, lo probe pero no era lo que necesitaba.
Lo que yo quiero es que se envíe directamente con un asunto, que no aparezca en el formulario.
ahi lo logre!. lo comparto por si alguien lo necesita:
agregue una linea: $nombre = «Contacto»;
«Contacto» sería el asunto, lo reemplazan por lo que necesitan que diga.
y cambie la variable de esta forma:
if(mail($dest,$nombre,$cuerpo,$headers)){
donde en $nombre va a aparecer «Contacto»
Hola Josue, muchas gracias por el tutorial, excelente y muy claro.
Lo utilice y funciona perfecto, pero necesito sumar campos en mi formulario php y que estos campos se sumen en el cuerpo del email que recibo, pero al sumar campos el cuerpo llega vacio, como deberia hacerse?
Prueba asi:
$mensaje .= «Campo 1: «.$campo1.»»;
$mensaje .= «Campo 2: «.$campo2.»»;
$mensaje .= «Campo 3: «.$campo3;
Fijate el «.=» eso hace que en $mensaje se vallan concatenando los demas valores, cosa que al final tienes todos los datos en una sola variable, la cual es la que envias.
Hola Josué, genial el tuto, muy claro y el resultado final sensacional.
Muchas gracias!
Hola!!.. me funciona de maravilla, ahora me surgió una consulta.
Cómo hago para que el mensaje de envío correcto me aparezca en una nueva ventana??.
necesito que sea en una nueva para poder agregarle el código de la campaña de google que estoy haciendo.
alguien puede ayudarme?
gracias!
Sabri
Mira este tutorial https://tursos.com/4-formas-de-redireccionar-una-pagina-web/, la redireccion la tendrias que aplicar en la parte de PHP.
Hola, como estas Josue?! Esta muy buena la plantilla que has hecho y tus explicaciones pero lo que no entendi es, en donde se inserta el correo electronico adonde llegan las consultas vertidas en el «Formulario de Contacto»?
Porque ya cree la .html y tiene la plantilla pero no se como hacerla funcionar
Muchas gracias!!
Asi tengo la .html donde esta insertada una .css
Ocean Blue – Contact Page
function clearText(field)
{
if (field.defaultValue == field.value) field.value = »;
else if (field.value == ») field.value = field.defaultValue;
}
$(function() {
$(‘#map a’).lightBox();
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
Ocean Blue Free CSS Templates
Contactenos
Utilice el siguiente formulario para realizar una consulta, contacto general o para la solicitud de información acerca de nuestros productos y servicios
Formulario de Contacto
Nombre
Email y Telefono
Asunto
Mensaje
Map
Our Address
Company Name
380-260 Vitae urna blandit est egestas,
Pulvinar sit amet convallis eget, 12880
Lorem ipsum dolor
Tel: 020-040-4400
Fax: 020-040-8800
Copyright © 2048 Your Company Name –
Designed by Free CSS Templates
Hola Paddy y Maicolrecord. Para hacer «funcionar» el formulario necesitas un servidor que soporte la función mail. Teniendo esto listo, puedes mandar los valores a través de php y es todo. Asegúrate de codificar bien los datos que envías para que no te aparezcan letras extrañas con caracteres en español como «á, é, í ó, ú y ñ»
Saludos.
Lo Mismo Quisiera Saver
Hola Josue, ante todo agradezco como otros visitantes la profesionalidad como desplegas tus conocimientos.
Instale este form en un servidor y funciona ok, pero al querer hacerlo en otros dos sites los forms me tiran el ok del envio pero los mails nunca llegan.
Que caracteristicas/permisos deben tener estos servidores para que los solicite.
Muchas Gracias por adelantado.
Josue la consulta que hice al servidor me contesto esto respecto de lo que soporta y lo que NO.
Los lenguajes que acepta el Hosting Corporativo son los siguientes:
Usa ASP.NET 2.0 y PHP 5.2.6
Html, Flash,
Componente de SA file-up que permite indexar archivos a una página.
FormMail de Perl para uso de formularios hechos en CGI.
ASPEmail y Cdont´s siempre utilizando autenticación de SMTP
Bases de datos en SQL por ODBC (versión 2000) y Microsoft Access 2003 / 2007.
Upload de archivos por SA-FileUp
Sobre La nueva plataforma soporta PHP
Características no soportadas:
PHP NUKE
Postgres SQL
Subir páginas a través del FrontPage o Dreamweaver a través de la herramienta de Publicar que poseen dichos programas.
Streaming para ver Videos Online.
SSL para conexiones seguras.
Contadores JavaScript.
Estadísticas detalladas.
Utilización base de Datos MySQL.
Los otros 2 sites estan en el mismo servidor?
hola , quiero insertar el formulario en mi sitio , pero quiero conservar el estándar de la pagina, como hago para insertar el formulario en una de mis paginas donde conserve el logo el menú y lo estándar y que el cuadro del formulario quede en el centro de esta pagina?
mil fgracias
gracias parcero
Gracias! me sirvio perfectamente.
Hola, como estas Josue?! Esta muy buena la plantilla que has hecho y tus explicaciones pero lo que no entendi es, en donde se inserta el correo electronico adonde llegan las consultas vertidas en el «Formulario de Contacto»?
Porque ya cree la .html y tiene la plantilla pero no se como hacerla funcionar
Mira la tercera parte del tutorial:
https://tursos.com/tutoriales/php/como-hacer-un-formulario-de-contacto-iii-validar-y-enviar-con-php
hola y gracias por responder tan pronto el link que me mandio es de un php y yo lo estoy en html
tu me podrias redirigir el link por favor Gracias
El formulario necesita de PHP para funcionar.
Hola Josue, realmete genial la plantilla. Pero a la hora de lincarlo con el php, no puedo o no se,..tengo el doc. contacto.html, donde tengo integrado el css dentro del mismo doc. no tengo una hoja de ccs a parte. Y por otro lado tengo el index.php,…pero no se me envia el from. por ke puede ser eso¿? o ke me dejo?¿, gracias por la ayuda.
P.D. Soy especialmente nuevo en esto de maketar con css, asi ando bastante perdido 🙂
oye me ayudar ???? tengo que hacer un estilo carrusel ooo bueno un slider y no me sale , si copio uno que esta publicado en cualquier otro blog no me sale please denme un codigo