Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Formulario de Contacto en Blogger

HTML - Formulario de Contacto en Blogger

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Formulario de Contacto en Blogger
Tatiana (26/09/2018 20:23:20)271 visitas
0 respuesta
Imágen de perfil de Tatiana
Val: 6
Ha aumentado su posición en 24 puestos en HTML (en relación al último mes)
Gráfica de HTML

Formulario de Contacto en Blogger

Publicado por Tatiana (1 intervención) el 26/09/2018 20:23:20
Hola! tengo un problema con mi blog, quisiera saber como tengo que hacer para que los mensajes enviados a mi formulario de contacto, lleguen a mi correo electronico.
Ya he probado MAILTO: y no funciona porque se abre la app de correo electrónico y esa no es la idea...
ya he probado tambien action="mail.php"> y tampoco funciona me salta un error...
URL de la página de mi blog https://www.tatiizen.tk/p/blog-page.html
Les dejo el css/html... por si las dudas, recuerden la plataforma es blogger...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400" rel=);
* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-font-smoothing: antialiased;

  -moz-font-smoothing: antialiased;

  -o-font-smoothing: antialiased;

  font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



body {

  font-family: 'Raleway', sans-serif;

  font-weight: 100;

  font-size: 12px;

  line-height: 30px;

  color: #777;

  background: #transparent;

}



.container {

  max-width: 500px;

  width: 100%;

  margin: 0 auto;

  position: relative;

}



#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,

#contact button[type="submit"] {
  font: 400 12px/16px 'Raleway', sans-serif;

}



#contact {

  background: #F9F9F9;

  padding: 25px;

  margin: 150px 0;

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}



#contact h3 {

  display: block;

  font-size: 30px;

  font-weight: 300;

  margin-bottom: 10px;

}



#contact h4 {

  margin: 5px 0 15px;

  display: block;

  font-size: 13px;

  font-weight: 400;

}



fieldset {

  border: medium none !important;

  margin: 0 0 10px;

  min-width: 100%;

  padding: 0;

  width: 100%;

}



#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {

  width: 100%;

  border: 1px solid #ccc;

  background: #FFF;

  margin: 0 0 5px;

  padding: 10px;

}



#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {

  -webkit-transition: border-color 0.3s ease-in-out;

  -moz-transition: border-color 0.3s ease-in-out;

  transition: border-color 0.3s ease-in-out;

  border: 1px solid #aaa;

}



#contact textarea {

  height: 100px;

  max-width: 100%;

  resize: none;

}



#contact button[type="submit"] {
  cursor: pointer;

  width: 100%;

  border: none;

  background: #77B33B;

  color: #FFF;

  margin: 0 0 5px;

  padding: 10px;

  font-size: 15px;

}



#contact button[type="submit"]:hover {
  background: #77B33B;

  -webkit-transition: background 0.3s ease-in-out;

  -moz-transition: background 0.3s ease-in-out;

  transition: background-color 0.3s ease-in-out;

}



#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

}



.copyright {

  text-align: center;

}



#contact input:focus,

#contact textarea:focus {

  outline: 0;

  border: 1px solid #aaa;

}



::-webkit-input-placeholder {

  color: #888;

}



:-moz-placeholder {

  color: #888;

}



::-moz-placeholder {

  color: #888;

}



:-ms-input-placeholder {

  color: #888;

}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
  <form id="contact" action="" method="post">
    <h3>Formulario de contacto</h3>
    <h4>Contactate conmigo!</h4>
    <fieldset>
      <input placeholder="Tu nombre" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Tu E-mail" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Tu número de teléfono (opcional)" type="tel" tabindex="3" >
    </fieldset>
    <fieldset>
      <input placeholder="Tu sitio web (opcional)" type="url" tabindex="4" >
    </fieldset>
    <fieldset>
      <textarea placeholder="Tu mensaje..." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Enviando">Enviar</button>
    </fieldset>
    </form>
</div>

formulario-de-contacto
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder