Como atualizar contas de usuários por meio de formulário de front-end
Crie uma Meta Box Adicional
Com o recurso Meta Box , você pode adicionar metacampos extras ao perfil do usuário.
Você pode pular esta etapa se já tiver criado uma metacaixa de usuário com os metacampos necessários.
Navegue até a guia WordPress Dashboard> JetEngine> Meta Boxes e clique no botão “ Adicionar novo ”. Insira o título da Meta Box e selecione a opção “Usuário” no menu suspenso Meta Box .
Na guia de configuração Condições de visibilidade , selecione a opção necessária na lista suspensa Visível em :
- Editar usuário. Ele adiciona metacampos à página Editar usuário . Como apenas administradores podem editar usuários, tais campos tornaram-se visíveis apenas para pessoas com tal função;
- Editar usuário e perfil. Esta opção adiciona metacampos à página de perfil e à página Editar usuário , que os usuários podem editar.
Você também pode clicar no botão “ + Nova Condição ” e incluir ou excluir funções de usuário para as quais os metacampos ficarão visíveis na página de perfil do usuário.
Clique no botão “ Novo metacampo ” para adicionar um novo metacampo.
Adicionamos os seguintes metacampos para usuários que desejam encontrar um novo emprego: Texto (por exemplo, apelido do usuário, nome e sobrenome, e-mail, etc.), Mídia (avatar do usuário), Data (aniversário), WYSIWYG (descrição), Campos Repetidor (habilidades e educação), Número (salário desejado) e Caixa de seleção (idiomas).
Quando terminar de criar a meta box, pressione o botão “ Adicionar/Atualizar Meta Box ”.
Vá para a guia Usuários> Todos os usuários , clique para editar qualquer usuário cuja função atenda às condições da meta box, se você definir tal, e role para baixo. Aqui, você verá a metacaixa criada com os metacampos que podem ser preenchidos.
” alt=”metacaixa do usuário na página de edição do usuário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-meta-box-on-the-edit-user-page-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Crie um formulário
Formulário JetFormBuilder
Primeiro, certifique-se de instalar e ativar o plugin JetFormBuilder .
Em seguida, siga o caminho JetFormBuilder > Adicionar novo para chegar à página de criação de formulário com três blocos: Hidden Field , Text Field e Action Button .
” alt=”criando o formulário jetformbuilder” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/creating-the-jetformbuilder-form-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Adicionando os campos do formulário
Insira o título do formulário e clique no bloco Campo Oculto . Defina a opção “Current User ID” FIELD VALUE e altere o valor do FORM FIELD NAME (por exemplo, “user_id”) nas configurações do bloco .
O bloco Campo de Texto pode ser excluído ou alterado. O botão de ação também pode ser editado de acordo com suas preferências, mas mantivemos como está.
Agora, você pode adicionar quantos blocos de campos de formulário precisar clicando no ícone “ + ”.
Para este tutorial, definimos alguns campos essenciais para mostrar o mecanismo de envio do front-end.
Primeiramente, adicionamos vários blocos de campo de texto para o apelido, nome e sobrenome do usuário.
Definimos os valores FIELD LABEL e FORM FIELD NAME e escolhemos a opção “Text” FIELD TYPE para esses blocos.
As configurações são idênticas para o bloco de campo de texto “E-mail” , mas o TIPO DE CAMPO deve ser definido como “E-mail”. Se você criar um campo para o número de telefone do usuário, esta opção deverá ser “Tel.”
Para o avatar do usuário, colocamos o bloco Media Field . Em suas configurações configuramos os campos FIELD LABEL e FORM FIELD NAME .
” alt=”bloco de campo de mídia para o avatar do usuário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/media-field-block-for-the-user-avatar-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, habilitamos a alternância Inserir anexo e definimos o VALOR DO CAMPO de acordo com as configurações do metacampo de mídia na Meta Box. Por exemplo, selecionamos a opção de formato de valor “ID de mídia” para o metacampo, então definimos o VALOR DE CAMPO “ID de anexo” para o bloco Campo de mídia . Sem essas configurações, os usuários não poderão adicionar arquivos por meio do formulário.
” alt=”metacampo de avatar do usuário na metacaixa” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/user-avatar-meta-field-in-the-meta-box-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Ao terminar de configurar os blocos de campos do formulário, certifique-se de que o botão de ação seja o último.
Configurações predefinidas
Vá para a guia de configuração do JetForm e abra a guia Configurações predefinidas . Habilite a alternância, escolha a FONTE “Usuário” e escolha a opção “Usuário Atual” no menu suspenso OBTER ID DO USUÁRIO DE .
Selecione a opção “ID do usuário” para o campo oculto com a opção “ID do usuário atual”. Para os demais campos, selecione a opção “User Meta” responsável por extrair os dados do meta campo customizado.
” alt=”configurações de formulário predefinidas” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/preset-form-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Nos campos exibidos, insira os Nomes/IDs dos metacampos da Meta Box que correspondem aos campos do formulário.
Configurações de ações pós-envio
Desdobre a seção Post Submit Actions na guia de configuração do JetForm , selecione a opção “Update User” e clique no ícone “ lápis ” para editar a ação.
No MAPA DE CAMPOS , escolha a opção “User ID (irá atualizar este usuário)” para o Campo Oculto . Para outros campos, selecione a opção “User Meta”. Nos campos exibidos, insira os Nomes/IDs dos metacampos da Meta Box que correspondem aos campos do formulário.
O campo USER ROLE deverá ser mantido sem a opção selecionada; caso contrário, as funções do usuário serão alteradas para a escolhida após o envio do formulário.
Além disso, você pode definir mensagens personalizadas nas CONFIGURAÇÕES DE MENSAGENS , se desejar.
Após definir as configurações de ação, clique no botão “ Atualizar ”.
Em seguida, pressione o botão “ + Nova ação ”, selecione a opção “Redirecionar para página” e toque no ícone de “ lápis ”.
Selecione as opções “Página Estática” REDIRECT TO e “Conta” SELECIONAR PÁGINA . Defina outras configurações de ação, se necessário, e clique no botão “ Atualizar ”.
” alt=”redirecionar para as configurações de ação de envio de postagem da página” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/redirect-to-page-post-submit-action-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Após terminar, clique no botão “ Publicar/Atualizar ” para salvar o formulário.
Formulário JetEngine
Antes de começar, certifique-se de habilitar a guia Formulários (legado) e clicar no botão “Salvar” na janela JetEngine > JetEngine > Módulos padrão .
” alt=”ativar a alternância de legado de formulários” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/enable-the-forms-legacy-toggle-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Depois, você precisa prosseguir com a criação do formulário. Vá para a guia JetEngine> Formulários e clique no botão “ Adicionar novo ”.
” alt=”adicionando nova forma de motor a jato” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/adding-new-jetengine-form-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Campos de formulário
Insira o título do formulário e clique no ícone “ lápis ” próximo ao primeiro campo do formulário para editá-lo. Escolha a opção de valor do campo “ID do usuário atual” e altere o nome e o rótulo se desejar. Lembre-se de que este campo ficará invisível no front end. Em seguida, clique no botão “ Aplicar alterações ”.
Agora, você pode criar quantos campos precisar pressionando o botão “ Adicionar Campo ”. Para este tutorial, temos alguns campos essenciais para mostrar o mecanismo de envio do front-end.
Primeiramente adicionamos vários campos do tipo “Texto” para apelido do usuário, nome e sobrenome e e-mail.
Definimos os campos Tipo “Texto” e Tipo de campo “Texto” e inserimos o Nome e o Rótulo adequados . Além disso, definimos a visibilidade do campo “Somente para usuários logados” e pressionamos o botão “ Aplicar alterações ”.
As configurações são idênticas para o campo de texto “E-mail”, mas o Tipo de campo deve ser “E-mail”. Se você criar um campo para o número de telefone do usuário, esta opção deverá ser “Tel.”
Para o avatar do usuário, escolhemos o tipo “mídia” e definimos o nome , o rótulo e o acesso do usuário .
Marcamos a caixa de seleção Inserir anexo e definimos o valor do campo de acordo com as configurações do metacampo de mídia na Meta Box. Por exemplo, selecionamos o formato de valor “ID de mídia” para o metacampo, então definimos o valor do campo “ID de anexo” para o campo de formulário. Sem essas configurações, os usuários não poderão adicionar arquivos por meio do formulário.
Em seguida, definimos a visibilidade do campo e clicamos no botão “Aplicar alterações”.
Ao terminar de criar os campos do formulário, você pode organizar sua ordem arrastando-os. Certifique-se de que o “ Botão Enviar ” seja o último.
” alt=”campos de formulário de motor a jato” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2020/01/jetengine-form-fields-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Valores predefinidos dos campos do formulário
Nos campos do formulário, marque a caixa de seleção Valores predefinidos dos campos do formulário para desdobrar um novo bloco nos campos do formulário.
Defina a opção “Usuário” para o campo Origem e escolha a opção “Usuário atual” na lista suspensa Obter ID do usuário de .
Na seção Mapa de campos , escolha a opção “ID do usuário” para o campo “Oculto”. Para os demais campos, selecione a opção “User Meta” responsável por extrair os dados do meta campo customizado.
Nos campos exibidos, insira os Nomes/IDs dos metacampos da Meta Box que correspondem aos campos do formulário.
Ações pós-envio
Role para baixo até o bloco Configurações de ações/notificações pós-envio . Aqui, você verá a ação “Enviar e-mail”. Clique no ícone “ lápis ” para editá-lo.
No bloco desdobrado, escolha o tipo “Atualizar usuário” .
Na seção Mapa de Campos , escolha a opção “ID do usuário (atualizará este usuário)” para o campo “Oculto”. Para outros campos, selecione a opção “User Meta”. Nos campos exibidos, insira os Nomes/IDs dos metacampos da Meta Box que correspondem aos campos do formulário.
O campo User Role deverá ser mantido sem a opção selecionada; caso contrário, as funções do usuário serão alteradas para a escolhida após o envio do formulário.
Depois de definir as configurações de ação, clique no botão “ Aplicar alterações ”.
Em seguida, clique no botão “ Adicionar Notificação ” e clique no ícone “ lápis ” para editar uma nova ação.
Escolha o tipo “Redirecionar para página” , as opções de página “ Redirecionar página estática para ” e “Conta” . Defina outras configurações de ação se desejar e clique no botão “ Aplicar alterações ”.
Após terminar, clique no botão “ Publicar/Atualizar ” para salvar o formulário.
Coloque o formulário no modelo de subpágina da conta
Você pode criar um modelo de subpágina com o construtor de temas Elementor ou o plugin JetEngine . O JetEngine permite criar um modelo no editor de blocos Elementor ou WordPress.
Para criar um modelo com o construtor de temas Elementor, vá para Painel do WordPress > Modelos> guia Modelos salvos na guia Elementor e clique no botão “ Adicionar novo ”.
Para criar um modelo com o plugin JetEngine , vá até o Painel do WordPress > JetEngine > guia Listagens e clique no botão “ Adicionar Novo ”.
No pop-up Configurar item de listagem , escolha a fonte de listagem “Usuários” , insira o nome do item de listagem e selecione a visualização de listagem “Elementor” ou “Blocos (Gutenberg)” .
Se você criar a subpágina no Elementor, poderá arrastar e soltar o widget Form ou JetForm na página de edição.
Lembre-se de que com o widget Formulário você pode exibir formulários criados com JetEngine e JetFormBuilder. Com o widget JetForm , você pode exibir apenas os formulários JetFormBuilder . Além disso, esses dois widgets têm configurações de conteúdo e estilo ligeiramente diferentes.
Se você colocar o widget Form , escolha o provedor “JetEngine” ou “JetFormBuilder” e defina o formulário recém-criado.
Se você colocar o widget JetForm , basta definir o formulário criado recentemente.
Agora você pode personalizar outras configurações de conteúdo e estilo de acordo com suas necessidades.
Se você definir a página Conta com o modo de modelo “Reescrever” , poderá adicionar o widget Menu de perfil à página.
Se você configurá-lo com o modo de modelo “Conteúdo” , você não precisará dele, pois o widget Menu de perfil já deve estar definido na página Conta.
Clique no botão “ Publicar/Atualizar ”.
No editor de blocos do WordPress, as configurações são as mesmas. Coloque o bloco Form ou JetForm e ajuste as configurações.
Para as configurações de estilo, você pode usar o plugin gratuito JetStyleManager .
Atribuir a subpágina à página da conta com o Profile Builder
Vá para o Painel do WordPress> JetEngine> Profile Builder> guia Página da conta e clique no botão “ + Adicionar nova subpágina ”.
Insira o título da subpágina da conta. Defina o slug clicando no campo Slug . Ele será gerado automaticamente, mas você pode alterá-lo. Durante a edição, não esqueça que o slug deve conter apenas letras latinas em minúsculas, números e caracteres `-` ou `_` em vez de espaços.
Defina o modelo que você criou no construtor Elementor. Além disso, você pode selecionar funções de usuário que podem acessar esta página no menu suspenso Disponível para a função de usuário .
Ao terminar de personalizar, clique no botão “ Salvar ” na parte inferior da página.
Verificação de conta de usuário front-end
Faça login como um dos usuários para verificar como funciona o formulário.
Abra a página Conta no front end e clique no item de menu do perfil para abrir a subpágina com o formulário.
Faça as alterações e clique no botão “ Enviar ” para testar o formulário. Por exemplo, modificamos o avatar do usuário.
Após enviar o formulário, fomos redirecionados para a página Conta, especificamente a primeira subpágina Conta com as informações do usuário. O avatar foi alterado com sucesso.
Verifique o resultado no painel do WordPress
Vamos verificar como as informações foram transferidas para o backend.
Faça login no painel do WordPress como administrador, vá para a guia Usuários e clique para editar o usuário atualizado.
O avatar do usuário foi alterado no respectivo metacampo.
Isso é tudo. As funcionalidades de formulário Profile Builder e JetEngine ou JetFormBuilder permitem que os usuários alterem as informações de suas contas no front-end. Configure vários campos e metacaixas personalizadas para criar um layout de conta de usuário exclusivo e coletar todos os dados necessários.