Tutorial: Formulário de Informações do Imóvel

Este tutorial vai te guiar passo a passo no preenchimento do formulário de informações do imóvel, incluindo detalhes da planta, envio de imagens e adição de vídeos. Vamos começar!

Tutorial: Seleção de Quartos do Imóvel

1. Selecionar o Número de Quartos

Você pode escolher quantos quartos deseja que o imóvel tenha.

• Selecionar quartos: No campo de seleção de quartos, use os botões “+” ou “-” para aumentar ou diminuir o número de quartos.

  Ação: Clique no botão “+” para adicionar um quarto ou no botão “-” para remover um quarto. O número total de quartos será exibido em tempo real.

  Ajuda: O número de quartos deve ser um valor inteiro e não pode ser negativo. Se você tentar definir um número de quartos inválido, uma mensagem de erro será exibida.

2. Validação do Campo de Quartos

É importante garantir que você selecione um número válido de quartos.

• Campo obrigatório: O campo de seleção de quartos é obrigatório. Se você deixar esse campo vazio e tentar enviar o formulário, uma mensagem de erro aparecerá.

  Ação: Ao tocar no campo e tentar enviar, você receberá um alerta informando que a seleção do número de quartos é necessária.

  Ajuda: Certifique-se de que o campo não esteja vazio antes de tentar enviar o formulário.

3. Visualização e Estilo dos Botões

Os botões de seleção de quartos são projetados para serem intuitivos e atraentes.

• Estilo dos botões: Os botões “+” e “-” são destacados com cores diferentes para indicar suas funções. O botão de incremento (adicionar) é verde, enquanto o botão de decremento (remover) é vermelho.

  Ação: Clique nos botões para ajustar o número de quartos de forma visualmente agradável.

  Ajuda: Se você não estiver vendo as mudanças nos números, verifique se o seu navegador está atualizado e sem extensões que possam interferir.

4. Finalizar a Seleção de Quartos

Depois de definir o número de quartos desejados, você estará pronto para prosseguir.

• Verificação final: Antes de enviar o formulário, revise a quantidade de quartos selecionada para garantir que está correta.

  Ação: Após verificar, clique no botão “Enviar” para finalizar o formulário.

  Ajuda: Caso a seleção de quartos esteja correta e você ainda esteja recebendo erros, verifique os outros campos do formulário para assegurar que não há erros.

Conclusão

Ao seguir estes passos, você será capaz de selecionar facilmente o número de quartos para o imóvel no formulário. A validação e as mensagens de erro ajudarão a garantir que a entrada seja precisa e que a experiência do usuário seja a melhor possível.

1. Detalhes do Imóvel 

O primeiro passo é preencher os detalhes básicos do imóvel.

• Abrir a aba ‘Mais Informações’: Expanda a aba do acordeão com o título “Mais Informações” para acessar os campos de detalhes do imóvel.

• Nome da Planta:

  • Campo: “Nome/Planta da Casa”
  • Ação: Insira o nome ou o título da planta da casa no campo de texto. Por exemplo: “Planta Luxo A”.
  • Ajuda: Um texto de ajuda será exibido abaixo do campo, sugerindo: “Entre com o nome da planta da casa”.

• Descrição da Planta:

  • Campo: “Descrição”
  • Ação: No campo de texto, escreva uma descrição detalhada da planta da casa. Por exemplo: “Planta com 3 quartos, 2 banheiros e ampla área de lazer”.
  • Ajuda: Um texto de ajuda será exibido: “Entre com a descrição da planta da casa”.

• Número de Quartos:

  • Campo: “N° Quartos”
  • Ação: Utilize o seletor de número para definir quantos quartos o imóvel possui. O campo permite aumentar ou diminuir a quantidade clicando nos botões “+” e “-“.
  • Ajuda: Um texto de ajuda será exibido: “Entre com o número de quartos”.

• Número de Banheiros:

  • Campo: “N° Banheiros”
  • Ação: Da mesma forma, utilize o seletor de número para definir a quantidade de banheiros.
  • Ajuda: “Entre com o número de banheiros”.

2. Enviar Fotos do Imóvel

Agora, vamos adicionar fotos do imóvel.

• Arraste e solte as fotos: Na aba “Arraste”, você pode arrastar e soltar as imagens diretamente na área designada ou clicar para navegar e selecionar os arquivos de imagem.

  • Ação: Arraste ou selecione as imagens do imóvel que deseja enviar.
  • Visualizar e excluir fotos: As fotos selecionadas serão exibidas em miniatura. Se necessário, você pode remover uma imagem clicando no botão “✖” ao lado de cada foto.

• Upload de imagens: Na aba “Botão Upload”, você pode fazer o upload das fotos clicando no botão de upload. Após selecionar as imagens, elas aparecerão na lista de “Fotos Selecionadas” para visualização.

  • Ação: Clique no botão “Upload” e selecione as imagens que deseja enviar. Elas aparecerão abaixo para confirmação.
  • Remover fotos: Para excluir uma foto já selecionada, clique no botão “✖” ao lado da miniatura.

3. Conversor de Imagem (Opcional)

Caso necessário, você pode utilizar o conversor de imagens para ajustar as imagens antes de enviá-las.

• Abrir conversor de imagem: Caso habilitado, o componente de conversão de imagens permitirá que você ajuste as imagens antes de enviá-las.
  • Ação: Utilize o conversor de imagens conforme necessário.

4. Adicionar Vídeos do Imóvel

Além das fotos, você pode adicionar vídeos para melhorar a apresentação do imóvel.

• Incluir vídeos: No campo de vídeos, clique no botão “Adicionar Vídeo” para inserir links de vídeos.

  • Ação: No campo “Nome/Vídeo”, insira o nome ou descrição do vídeo. No campo “Link”, insira o link do vídeo (YouTube, Vimeo ou um arquivo .mp4).
  • Ajuda: Certifique-se de que o link seja válido. Se o link estiver incorreto, uma mensagem de erro será exibida.

• Excluir vídeos: Se desejar remover um vídeo adicionado, clique no botão “✖” ao lado do vídeo para excluí-lo.

5. Finalizar e Enviar

Após preencher todas as informações e adicionar fotos e vídeos, o último passo é enviar o formulário.

• Botão de envio:
  • Ação: Clique no botão “Enviar” para concluir o processo. Certifique-se de que todos os campos obrigatórios estão preenchidos corretamente.