crear formulario de contacto en web.

fotoastur · #1 (**permalink**) 01/02/2015, 12:43

Guenas,

Quería hacer un formulario de contacto en una web pero no termina de funcionar bien.

Inserté este codigo en html

<html>
<head>
<link type="text/css" rel="stylesheet" href="estilo.css">

<title>Formulario de contacto</title>
</head>
<body>
<section class="formulario">
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="[email protected]" required="" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>

</section>
</body>
</html>

luego el css que puse es este...

label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
form {
margin:0 auto;
width:400px;
}

input, textarea {
width:380px;
height:27px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:5px;
font-size:10px;
color:#ffffff;
}

textarea {
height:150px;
}

#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}

y el php este...

<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$para = '[email protected]';
$titulo = 'ASUNTO DEL MENSAJE';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";

if ($_POST['submit']) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Mensaje enviado, muchas gracias.');
window.location.href = 'http://TUSITIOWEB.COM';
</script>";
} else {
echo 'Falló el envio';
}
}
?>

El problema es que cuando lo subo al servidor me da la sensación que se entremezcla con algún otro css y no lo veo igual que la previsualizar la web en el editor.

¿cuál será la causa?

Alguien que me eche un cable.

Gracias de antemano.

Saludos.

fotoastur · #2 (**permalink**) 01/02/2015, 12:55

Este es el css que trae insertado también la página...

@charset "utf-8";

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/*
Base

/*
* 1. Corregir el texto que cambia de tamaño de forma extraña en IE6/7 cuando el tamaño de fuente del cuerpo se establece en unidades em
* 2. Forzar la barra de desplazamiento vertical en navegadores distintos de IE
* 3. Evitar el ajuste de tamaño de texto en iOS cuando cambia la orientación del dispositivo sin que se desactive el zoom de usuario: h5bp.com/g
*/

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* Dreamweaver: anule la conversión de estos en comentarios si desea personalizar el resaltado de selección
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Repetir la declaración de la familia de fuentes monoespacio: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Mejorar la legibilidad del texto con formato preestablecido en todos los navegadores */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Colocar el contenido de subíndices y superíndices sin que se vea afectada line-height (la altura de línea): h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ================================================== ===========================
Listas
================================================== ======================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* ================================================== ===========================
Contenido incrustado
================================================== ======================== */

/*
* 1. Mejorar la calidad de imagen al aplicar escala en IE7: h5bp.com/d
* 2. Eliminar el hueco entre imágenes y bordes en los contenedores de imágenes: h5bp.com/e
*/

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
* Corregir el desbordamiento no oculto en IE9
*/

svg:not(:root) { overflow: hidden; }

/* ================================================== ===========================
Figuras
================================================== ======================== */

figure { margin: 0; }

/* ================================================== ===========================
Formularios
================================================== ======================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicar que 'label' desplaza el foco al elemento de formulario asociado */
label {
cursor: pointer;
color: #FFFFFF;
}

/*
* 1. Corregir el color que no se hereda en IE6/7/8/9
* 2. Corregir la alineación que se muestra de manera extraña en IE6/7
*/

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
* 1. Corregir el tamaño de fuente que no se hereda en todos los navegadores
* 2. Eliminar márgenes en FF3/4 S5 Chrome
* 3. Definir una visualización con alineación vertical coherente en todos los navegadores
*/

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
* 1. Definir line-height (la altura de línea) como normal para que coincida con FF3/4 (configurar mediante !important en la hoja de estilos UA)
* 2. Corregir el espaciado interno que se muestra de manera extraña en IE6/7
*/

button, input { line-height: normal; *overflow: visible; }

/*
* Reintroducir el espaciado interno en 'table' para evitar problemas de solapamiento y espacio en blanco en IE6/7
*/

table button, table input { *overflow: auto; }

/*
* 1. Mostrar cursor de mano para elementos de formulario en los que se puede hacer clic
* 2. Permitir la aplicación de estilo a los elementos de formulario en los que se puede hacer clic en iOS
*/

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
* Tamaño y aspecto coherentes para los cuadros
*/

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
* Eliminar el relleno y el borde interno en FF3/4: h5bp.com/l
*/

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
* 1. Eliminar la barra de desplazamiento vertical predeterminada en IE6/7/8/9
* 2. Permitir solo el cambio de tamaño vertical
*/

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colores para la validez del formulario */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* ================================================== ===========================
Tablas
================================================== ======================== */

table {
border-collapse: collapse;
border-spacing: 0;
color: #FFFFFF;
}
td { vertical-align: top; }

/* ==|== estilos principales ================================================== ===
Autor:
================================================== ======================== */

/* ==|== clases de aplicación auxiliar no semánticas ========================================
Defina sus estilos antes de iniciar esta sección.
================================================== ======================== */

/* Para sustitución de imagen */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Ocultar a los lectores de pantalla y los navegadores: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Ocultar solo visualmente, pero mantenerlo disponible para lectores de pantalla: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Amplía la clase .visuallyhidden para permitir que se pueda situar el foco en el elemento al navegar hasta él a través del teclado: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Ocultar visualmente y a los lectores de pantalla, pero mantener el diseño */
.invisible { visibility: hidden; }

/* Contiene cuadros flotantes: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==|== estilos de impresión ================================================== =====
Estilos de impresión.
Situados en línea para evitar la conexión HTTP requerida: h5bp.com/r
================================================== ======================== */

@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* La impresión en negro es más rápida: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* No mostrar para imágenes ni para código javascript/vínculos internos */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 {
orphans: 3;
widows: 3;
font-size: 9px;
color: #D6D6D6;
background-image: url(imagenes/fondo1.png);
}
h2, h3 { page-break-after: avoid; }
}
.fondoazul {
color: #09C;
background-color: #0494DC;
}
.fondo {
background-image: none;
}
.Fondo {
background-image: none;
}
.PIE {
background-image: url(banners/PIE.png);
text-align: center;
}
.PIE table tr th {
font-size: 10px;
text-align: left;
}
color blanco {
color: #FFF;
}
.PIE table tr th p font {
font-size: 10px;
}
.parrafo {
text-align: justify;
}
.MEDIO {
text-align: center;
}
.MEDIO font {
text-align: center;
}

No sé si tiene algo que ver, el caso que algún color se entremezcla con el otro css (estilo.css).

Un saludo.

lauser · #3 (**permalink**) 01/02/2015, 16:43

Queda mucho mejor usar highlight....

Código HTML:

Ver original<html>
<head>
<link type="text/css" rel="stylesheet" href="estilo.css">
<!-- La linea de arriba es para importar estilos CSS a nuestro formulario -->
<title>Formulario de contacto</title>
</head>
<body>
<section class="formulario">
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="[email protected]" required="" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>
 
</section>
</body>
</html>

Y ahora yo te pregunto.... donde has definido el css de form. Tan solo copias y pegas? Recuerda que no se puede duplicar nombres,,,ejje.

econiweb · #4 (**permalink**) 01/02/2015, 17:35

Hola, Econiweb recomienda JOTFORM es un sitio web donde se pueden elaborar directamente online los formularios.

fotoastur · #5 (**permalink**) 02/02/2015, 09:15

Hola Lauser,

Si la verdad, copio y pego.... tendría que mirar lo de que haya al duplicado aunque no veo na.

Econiweb, miré la web que me pasas aunque me parece que igual no encaja bien los modelos de formulario. Lo miraré mejor.

Saludos.

Cita:

Iniciado por lauser

Queda mucho mejor usar highlight....

Código HTML:

Ver original<html>
<head>
<link type="text/css" rel="stylesheet" href="estilo.css">
<!-- La linea de arriba es para importar estilos CSS a nuestro formulario -->
<title>Formulario de contacto</title>
</head>
<body>
<section class="formulario">
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="[email protected]" required="" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>
 
</section>
</body>
</html>

Y ahora yo te pregunto.... donde has definido el css de form. Tan solo copias y pegas? Recuerda que no se puede duplicar nombres,,,ejje.

Rafael · #6 (**permalink**) 02/02/2015, 11:31

Yo no te voy a poner ningún código, ya que la seguridad es importante y copiar y pegar es un riesgo para la seguridad de tus usuarios y de tu mismo sitio.

Usa un site con forms como http://www.google.com/forms/about/

No he usado el otro que te recomiendan.

fotoastur · #7 (**permalink**) 02/02/2015, 19:21

Hola,

Aquí están todos los css implicados.

@charset "utf-8";
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
form {
margin:0 auto;
width:400px;
}

input, textarea {
width:380px;
height:27px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:5px;
font-size:14px;
color:#ffffff;
}

textarea {
height:150px;
}

#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}
.BLANCO {
color: #FFF;
}

este también....

@charset "utf-8";

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Repetir la declaración de la familia de fuentes monoespacio: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Mejorar la legibilidad del texto con formato preestablecido en todos los navegadores */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Colocar el contenido de subíndices y superíndices sin que se vea afectada line-height (la altura de línea): h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ================================================== ===========================
Listas
================================================== ======================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
*/

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
* Corregir el desbordamiento no oculto en IE9
*/

svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicar que 'label' desplaza el foco al elemento de formulario asociado */
label {
cursor: pointer;
color: #FFFFFF;
}

/*
* 1. Corregir el color que no se hereda en IE6/7/8/9
* 2. Corregir la alineación que se muestra de manera extraña en IE6/7
*/

legend { border: 0; *margin-left: -7px; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

table button, table input { *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colores para la validez del formulario */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #6f6f6f; }

/* ================================================== ===========================
Tablas
================================================== ======================== */

table {
border-collapse: collapse;
border-spacing: 0;
color: #FFFFFF;
}
td { vertical-align: top; }
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Ocultar a los lectores de pantalla y los navegadores: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Ocultar solo visualmente, pero mantenerlo disponible para lectores de pantalla: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Amplía la clase .visuallyhidden para permitir que se pueda situar el foco en el elemento al navegar hasta él a través del teclado: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Ocultar visualmente y a los lectores de pantalla, pero mantener el diseño */
.invisible { visibility: hidden; }

/* Contiene cuadros flotantes: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==|== estilos de impresión ================================================== =====
Estilos de impresión.
Situados en línea para evitar la conexión HTTP requerida: h5bp.com/r
================================================== ======================== */

@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* La impresión en negro es más rápida: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* No mostrar para imágenes ni para código javascript/vínculos internos */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 {
orphans: 3;
widows: 3;
font-size: 9px;
color: #D6D6D6;
background-image: url(imagenes/fondo1.png);
}
h2, h3 { page-break-after: avoid; }
}
.fondoazul {
color: #09C;
background-color: #0494DC;
}
.fondo {
background-image: none;
}
.Fondo {
background-image: none;
}
.PIE {
background-image: url(banners/PIE.png);
text-align: center;
}
.PIE table tr th {
font-size: 10px;
text-align: left;
}
color blanco {
color: #FFF;
}
.PIE table tr th p font {
font-size: 10px;
}
.parrafo {
text-align: justify;
}
.MEDIO {
text-align: center;
}
.MEDIO font {
text-align: center;
}

y este último.

@charset "utf-8";
/* Medios fluidos sencillos
Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
background-image: none;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
width:100%;
}

/*
Propiedades de cuadrícula fluida de Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;

Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte
http://www.alistapart.com/articles/r...ive-web-design

y Golden Grid System de Joni Korpi
http://goldengridsystem.com/
*/

/* Diseño móvil: 480 px e inferior. */

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}

/* Diseño escritorio: de 769 px hasta un máximo de 1232 px. Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}

Saludos.