Desenvolvi o formulário “Trabalhe Conosco” personalizado para o tema Twenty Twenty-Four. Preparei um pacote completo com o código e as instruções de instalação.
O formulário inclui campos para:
Nome, E-mail e Telefone.
Vaga de Interesse.
Upload de Currículo (PDF/DOCX).
Mensagem.
A solução utiliza o sistema de Padrões de Bloco (Block Patterns) do WordPress, permitindo que você insira o formulário em qualquer página facilmente através do editor de blocos. O processamento é feito de forma segura via PHP, enviando os dados e o anexo diretamente para o seu e-mail.
Você pode baixar o arquivo ZIP anexo com todos os arquivos necessários e seguir o guia de instalação incluído.
Instruções para Implementação do Formulário “Trabalhe Conosco”
Para implementar o formulário diretamente no tema Twenty Twenty-Four, siga os passos abaixo:
1. Registrar o Padrão de Bloco (Pattern)
Crie um arquivo chamado trabalhe-conosco.php dentro da pasta de padrões do seu tema:wp-content/themes/twentytwentyfour/patterns/trabalhe-conosco.php
Cole o conteúdo do arquivo trabalhe-conosco-pattern.php fornecido.
2. Adicionar a Lógica de Processamento
Abra o arquivo functions.php do seu tema (ou do seu tema filho, se estiver usando um):wp-content/themes/twentytwentyfour/functions.php
Copie e cole o código do arquivo trabalhe-conosco-functions.php ao final deste arquivo.
3. Criar a Página no WordPress
- Vá em Páginas > Adicionar Nova.
- Dê o título de “Trabalhe Conosco”.
- Clique no botão + (Inserir bloco) e procure por “Trabalhe Conosco” na aba de Padrões (Patterns).
- Insira o padrão e publique a página.
4. Configuração de E-mail
O formulário enviará as candidaturas para o e-mail configurado como “E-mail do Administrador” nas configurações gerais do WordPress. Se desejar alterar, modifique a variável $to no código do functions.php.
Nota: Recomenda-se o uso de um tema filho (Child Theme) para evitar que suas alterações sejam perdidas em futuras atualizações do tema Twenty Twenty-Four.
Patterns
<?php
/**
* Title: Trabalhe Conosco
* Slug: twentytwentyfour/trabalhe-conosco
* Categories: contact
* Keywords: form, work, contact
*/
?>
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":2,"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Trabalhe Conosco</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Preencha o formulário abaixo para enviar seu currículo e fazer parte da nossa equipe.</p>
<!-- /wp:paragraph -->
<!-- wp:html -->
<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" enctype="multipart/form-data" style="max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
<input type="hidden" name="action" value="process_trabalhe_conosco">
<?php wp_nonce_field('trabalhe_conosco_action', 'trabalhe_conosco_nonce'); ?>
<div style="margin-bottom: 15px;">
<label for="nome" style="display: block; margin-bottom: 5px; font-weight: bold;">Nome Completo:</label>
<input type="text" id="nome" name="nome" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="email" style="display: block; margin-bottom: 5px; font-weight: bold;">E-mail:</label>
<input type="email" id="email" name="email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="telefone" style="display: block; margin-bottom: 5px; font-weight: bold;">Telefone:</label>
<input type="tel" id="telefone" name="telefone" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="vaga" style="display: block; margin-bottom: 5px; font-weight: bold;">Vaga de Interesse:</label>
<input type="text" id="vaga" name="vaga" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="curriculo" style="display: block; margin-bottom: 5px; font-weight: bold;">Currículo (PDF ou DOCX):</label>
<input type="file" id="curriculo" name="curriculo" accept=".pdf,.doc,.docx" required style="width: 100%; padding: 8px;">
</div>
<div style="margin-bottom: 15px;">
<label for="mensagem" style="display: block; margin-bottom: 5px; font-weight: bold;">Mensagem:</label>
<textarea id="mensagem" name="mensagem" rows="4" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
</div>
<div style="text-align: center;">
<button type="submit" style="background-color: #000; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">Enviar Candidatura</button>
</div>
</form>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
Functions
<?php
/**
* Processamento do formulário Trabalhe Conosco
*/
add_action('admin_post_process_trabalhe_conosco', 'handle_trabalhe_conosco_submission');
add_action('admin_post_nopriv_process_trabalhe_conosco', 'handle_trabalhe_conosco_submission');
function handle_trabalhe_conosco_submission() {
// Verificar Nonce para segurança
if (!isset($_POST['trabalhe_conosco_nonce']) || !wp_verify_nonce($_POST['trabalhe_conosco_nonce'], 'trabalhe_conosco_action')) {
wp_die('Erro de segurança. Por favor, tente novamente.');
}
// Sanitizar dados
$nome = sanitize_text_field($_POST['nome']);
$email = sanitize_email($_POST['email']);
$telefone = sanitize_text_field($_POST['telefone']);
$vaga = sanitize_text_field($_POST['vaga']);
$mensagem = sanitize_textarea_field($_POST['mensagem']);
// Destinatário (e-mail do administrador ou definido manualmente)
$to = get_option('admin_email');
$subject = "Nova Candidatura: $vaga - $nome";
$body = "Você recebeu uma nova candidatura pelo site.\n\n";
$body .= "Nome: $nome\n";
$body .= "E-mail: $email\n";
$body .= "Telefone: $telefone\n";
$body .= "Vaga: $vaga\n";
$body .= "Mensagem:\n$mensagem\n";
$headers = array('Content-Type: text/plain; charset=UTF-8', 'Reply-To: ' . $nome . ' <' . $email . '>');
$attachments = array();
// Lidar com o upload do currículo
if (!empty($_FILES['curriculo']['name'])) {
$file = $_FILES['curriculo'];
// Verificar tipo de arquivo
$allowed_types = array('application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
if (!in_array($file['type'], $allowed_types)) {
wp_die('Tipo de arquivo não permitido. Envie apenas PDF ou DOCX.');
}
// Mover arquivo temporário para uma pasta segura ou anexar diretamente
$upload = wp_handle_upload($file, array('test_form' => false));
if (isset($upload['file'])) {
$attachments[] = $upload['file'];
}
}
// Enviar e-mail
$sent = wp_mail($to, $subject, $body, $headers, $attachments);
// Remover arquivo após envio (opcional, para não encher o servidor)
if (!empty($attachments)) {
foreach ($attachments as $at) {
@unlink($at);
}
}
// Redirecionar de volta com mensagem de sucesso ou erro
if ($sent) {
wp_redirect(add_query_arg('submission', 'success', wp_get_referer()));
} else {
wp_redirect(add_query_arg('submission', 'error', wp_get_referer()));
}
exit;
}
/**
* Exibir mensagens de feedback (opcional, pode ser adicionado ao padrão)
*/
add_action('wp_head', function() {
if (isset($_GET['submission'])) {
$msg = ($_GET['submission'] == 'success') ? 'Candidatura enviada com sucesso!' : 'Erro ao enviar candidatura. Tente novamente.';
$color = ($_GET['submission'] == 'success') ? '#4CAF50' : '#f44336';
echo "<script>alert('$msg');</script>";
}
});
Deixe um comentário