Formulário WordPress para contato usando short code

Publicado em 6 de maio de 2012 by derme| 6 Comentários

formulário wordpress com short code - dicas de WordPressNesse tutorial vamos aprender a criar um formulário de contato para WordPress que será inserido em qualquer parte das postagens ou em uma página separada. Assim eliminaremos a necessidade de instalação de algum plug in do gênero.

O nosso formulário wordpress contará com quatro partes distintas que serão unidas na função. Será elas: código css uma  função simples em javascript para validação de emails o código php para envio de emails e o formulário html.

formulario de contato para wordpress com short code

Primeiro vamos ver o código da 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

<style type="text/css">
.ct_div_ex{
width:320px;
overflow:hidden;
height:auto;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
-webkit-border-radius:14px;
border-radius: 14px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
background-color:#fab514;
padding:20px;
margin:auto;
}
.ct_div_ex div input{
width:200px;
}
.ct_div_ex div textarea{
width:300px;
height:100px;
}
.div_inline{
float:left;
width:100px;
}
.confirmado{
text-align:center;
font-size:25px;
font-weight:bold;
color:#ff0000;
}
</style>

A css é muito simples apenas para alinhamento dos campos e mensagens do formulário, apenas chamando a atenção para a primeira classe “ct_div_ex” que configura uma caixa para conteúdo usando css3, com cantos arredondados,  gradiente e sombra, efeitos que aliás não funcionam no Internet Explore, pelo menos até a versão 9, mas funcionam perfeitamente no Google Chrome, Fire Fox e Safari .

Em seguida vem a função javascript para validação de email do nosso formulário Wordpress com short code:

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

<script language="JavaScript">
function validaemail()
{
var obj = eval("document.getElementById('email')");
var txt = obj.value;
if ((txt.length != 0) && ((txt.indexOf("@") < 1) || (txt.indexOf('.') < 7)))
{
alert('Email incorreto');
obj.value="";
obj.focus();
}
}
</script>

É uma função simples que verifica a ausência de pelo menos um ponto e o sinal “@” que todo endereço de email deve conter, óbvio, e será chamada no evento onblur do campo de email e assim que o usuário sair desse campo a verificação será feita, se houver algum erro um alerta é exibido com um aviso, o campo será limpo e o foco permanecerá no campo em questão.

Agora o código php para envio de email:

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

// Coloque aqui o email do seu blog

$email_blog="colmeiaweb@gmail.com";

$seu_name=$_POST['seu_name'];
$email=$_POST['email'];
$seu_site=$_POST['seu_site'];
$assunto=$_POST['assunto'];
$menssagem=$_POST['menssagem'];
$sbc=$_POST['sbc'];
$copia=$_POST['copia'];

$menssagem = $seu_name. "\r\r". $menssagem;

if(isset($sbc)){

if($seu_name!="" && $email!="" && $menssagem!=""){

@mail($email_blog,$assunto,$menssagem,"From:$seu_name - $email")or $erro1=1;

// Enviando uma cópia para o usuário se ele fizer essa opção

// mas antes verifica se não aconteceu nenhu erro anterior

if(!isset($erro1) && isset($copia)){

@mail($email,$assunto,$menssagem,"From:$email_blog");
}

}else{
echo "<script>alert('Os campos com asteriscos são obrigatórios, tente novamente')</script>";
}
}

$PHP_SELF=$_SERVER["PHP_SELF"];

if(isset($sbc)){
// Avisa se a mensagem foi enviada ou aconteceu algum problema

if($erro==1){
$avisala= "<p class=\"confirmado\">Um erro desconhecido causou uma falha no envio, tente novamente</p>";
}else{
$avisala= "<p class=\"confirmado\"> Sua mensagem foi enviada com sucasso</p>";
}
}

Os valores enviados via POST pelos campos do formulário são capturados e atribuídos a variáveis simples.

É verificado se o formulário foi submetido, testando se a variável $sbc, que acumula o valor do botão de submit, foi setada. Caso isso tenha acontecido é feita uma segunda verificação para ver se os campos obrigatórios, que estão com asteriscos, foram preenchidos e se algum ficar vazio um alerta javascript é exibido pedindo que os campos obrigatórios seja preenchidos.

Caso esteja tudo ok, envia o formulário. Se alguma falha desconhecida acontecer seta a variável $erro1 para o valor 1 e em seguida há uma terceira verificação que irá analisar se o usuário marcou o checkbox que habilita o envio de uma cópia do email para si próprio e também irá verificar se algum erro no envio anterior do email não aconteceu.

As duas condições tem que ser satisfatórias para que a cópia do email seja enviada para o próprio usuário.

A última verificação é para exibir uma mensagem de envio positivo ou falha no envio dependendo se a variável de erro foi setada ou não.

E por fim o nosso formulário:

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

<div class="ct_div_ex">
<form method="post">
<div>
<div class="div_inline">Seu Nome:</div>
<input type="text" value="" maxlength="50" size="30" name="seu_name" />*
</div>
<div>
<div class="div_inline">Seu Email: </div>
<input type="text" value="" maxlength="50" size="30" name="email" id="email" onblur="validaemail()" />*
</div>
<div>
<div class="div_inline">Seu Site: </div>
<input type="text" value="" maxlength="100" size="30" name="seu_site"/>
</div>
<div>
<div class="div_inline">Assunto:</div>
<input type="text" value=" " maxlength="50" size="30" name="assunto"/>
</div>
<div>
<div>Sua Messagem: </div>
<textarea name="menssagem"></textarea>*
</div>
<div style="text-align:center;width:270px">
<input type="submit" name="sbc" value="Enviar mensagem"/>
</div>
<div style="width:260px;height:20px;">
<div style="display:inline;width:100px;">C&oacute;pia pra mim</div>
<div style="display:inlin"><input type="checkbox" style="width:15px; value="1" name="copia"/></div>
</div>
</form>
</div>

Agora precisamos unir as partes em uma função que cria shortcodes para o WordPress, então veja à seguir:

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266

//CONTATO SHORT CODE

function fs_contact($fsc_n) {
$fsc=$fsc_n[0];

?>
<style type="text/css">
.ct_div_ex{
width:320px;
overflow:hidden;
height:auto;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
-webkit-border-radius:14px;
border-radius: 14px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
background-color:#fab514;
padding:20px;
margin:auto;
}
.ct_div_ex div input{
width:200px;
}
.ct_div_ex div textarea{
width:300px;
height:100px;
}
.div_inline{
float:left;
width:100px;
}
.confirmado{
text-align:center;
font-size:25px;
font-weight:bold;
color:#ff0000;
}
</style>

<script language="JavaScript">
function validaemail()
{
var obj = eval("document.getElementById('email')");
var txt = obj.value;
if ((txt.length != 0) && ((txt.indexOf("@") < 1) || (txt.indexOf('.') < 7)))
{
alert('Email incorreto');
obj.value="";
obj.focus();
}
}
</script>
<?
//||||| CONFIGURAÇÕES |||||


// Coloque aqui o email do seu blog

$email_blog="colmeiaweb@gmail.com";

//||| FIM CONFIGURAÇÕES |||


$seu_name=$_POST['seu_name'];
$email=$_POST['email'];
$seu_site=$_POST['seu_site'];
$assunto=$_POST['assunto'];
$menssagem=$_POST['menssagem'];
$sbc=$_POST['sbc'];
$copia=$_POST['copia'];

$menssagem = $seu_name. "\r\r". $menssagem;

if(isset($sbc)){

if($seu_name!="" && $email!="" && $menssagem!=""){

@mail($email_blog,$assunto,$menssagem,"From:$seu_name - $email")or $erro1=1;

// Enviando uma cópia para o usuário se ele fizer essa opção

// mas antes verifica se não aconteceu nenhu erro anterior

if(!isset($erro1) && isset($copia)){

@mail($email,$assunto,$menssagem,"From:$email_blog");
}

}else{
echo "<script>alert('Preencha os campos com asteriscos')</script>";
}
}

$PHP_SELF=$_SERVER["PHP_SELF"];

if(isset($sbc)){
// Avisa se a mensagem foi enviada ou aconteceu algum problema

if($erro==1){
$avisala= "<p class=\"confirmado\">Um erro desconhecido causou uma falha no envio, tente novamente</p>";
}else{
$avisala= "<p class=\"confirmado\"> Sua mensagem foi enviada com sucasso</p>";
}
}

$fsc_cod= $avisala.'<div class="ct_div_ex">
<form method="post">
<div>
<div class="div_inline">Seu Nome:</div>
<input type="text" value="" maxlength="50" size="30" name="seu_name" />*
</div>
<div>
<div class="div_inline">Seu Email: </div>
<input type="text" value="" maxlength="50" size="30" name="email" id="email" onblur="validaemail()" />*
</div>
<div>
<div class="div_inline">Seu Site: </div>
<input type="text" value="" maxlength="100" size="30" name="seu_site"/>
</div>
<div>
<div class="div_inline">Assunto:</div>
<input type="text" value=" " maxlength="50" size="30" name="assunto"/>
</div>
<div>
<div>Sua Messagem: </div>
<textarea name="menssagem"></textarea>*
</div>
<div style="text-align:center;width:270px">
<input type="submit" name="sbc" value="Enviar mensagem"/>
</div>
<div style="width:260px;height:20px;">
<div style="display:inline;width:100px;">C&oacute;pia pra mim</div>
<div style="display:inline"><input type="checkbox" style="width:15px; value="1" name="copia"/></div>
</div>
</form>
</div>';

return $fsc_cod."<br />";

$fscot='fscon';
}

add_shortcode($fscot, 'fs_contact');

// FIM CONTATO SHORT CODE

Agora é só incluir no arquivo functions.php do seu tema no WordPress,  você pode entender como é o processo ao mesmo tempo que aprende também a criar um formulário para captação de email no wordpress, também inserido com short code: Formulário para assinar feed wordpress no meio do post com short code.

Para usar basta inserir no post esse short code:

short code wordpress formulario contato

Até a próxima.
Postado em dicas de Wordpress. Link permenente.

6 Respostas para Formulário WordPress para contato usando short code

  1. Amauri | 17 de maio de 2012 at 18:02 | Responder

    Boa Tarde!
    Conheci hj seu site e consegui tirar muitas dúvidas a respeito de css.
    Obrigado.
    Mas gostaria de saber se é possível conseguir o código do calendário com eventos que vc está usando. Acho que é o melhor que já vi pela net.
    Obrigado, de novo.
    Amauri

    • derme | 17 de maio de 2012 at 19:13 | Responder

      Olá Amaury.

      Bom, o único calendário que estou usando no blog é do próprio WordPress e ele mostra apenas as postagens de cada dia.

  2. Carlos | 24 de agosto de 2012 at 19:48 | Responder

    Olá, muito interessante. Mas bem que poderia ter um video no Youtube para nos ajudar e compreender melhor. Excelente iniciativa.

    • derme | 23 de setembro de 2012 at 23:49 | Responder

      Olá Carlos,

      Entendo que seria melhor, mas infelizmente o tempo está muito escasso, e pelo menos atualmente está um pouco difícil.

      Espero que entenda.

      Abraço.

  3. geraldo leal | 23 de setembro de 2012 at 23:11 | Responder

    derme, bom dia, peguei seus arquivos e estou tentando utilizá-los porém não sou programador php, sou somente curioso, não estou conseguindo poderia me ajudar, por exemplo, qual o nome dos arquivos que devo usar! devo colocar dentro de uma pasta! qual o nome da pasta que devo usar!qual o local que devo colocar dentro do ftp! estou precisando de algo parecido com isto que fez , porém precisa de algo mais, poderia me mandar um email! obrigado pela ajuda.

    • derme | 23 de setembro de 2012 at 23:42 | Responder

      Olá Geraldo, te mandei um Email, mas voltou!!

      Então…

      Olha só, eu dividi o código em partes apenas para explicar melhor, mas no final eu dou o código completo, é somente ele que você irá usar.

      Dentro da pasta do tema que você está usando existe um arquivo chamado functions.php, você irá inserir o código no final desse arquivo, pode baixar o arquivo para o seu computador, incluir o código e depois enviar de novo, ou fazer isso online através do editor.

      No artigo seguinte explico como inserir um código no arquivo functions.php através do editor dá uma lida: http://www.fazeromeusite.com/formulario-assinar-feed-wordpress-meio-post-shortcode

      Tenta pelo editor que é melhor.

      Atenciosamente

      Dermeval Junior

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>