import { useState, Fragment } from 'react';
// Define the shape of our form data
interface FormData {
[key: string]: string | number | string[];
}
// Define the shape of a form field
interface FormField {
id: string;
label: string;
type: 'text' | 'number' | 'radio' | 'textarea';
options?: { value: string; label: string }[];
placeholder?: string;
required?: boolean;
}
// Define the shape of a step
interface FormStep {
id: string;
title: string;
description: string;
fields: FormField[];
}
const steps: FormStep[] = [
{
id: 'step1',
title: 'Sobre Você e Seus Objetivos',
description: 'Vamos começar conhecendo um pouco mais sobre você.',
fields: [
{ id: 'nome', label: 'Qual seu nome ou apelido?', type: 'text', placeholder: 'Seu nome...', required: true },
{ id: 'idade', label: 'Qual sua idade?', type: 'number', placeholder: '25', required: true },
{ id: 'genero', label: 'Qual seu gênero?', type: 'radio', required: true, options: [
{ value: 'masculino', label: 'Masculino' },
{ value: 'feminino', label: 'Feminino' },
{ value: 'nao-binario', label: 'Não-binário' },
{ value: 'prefiro-nao-dizer', label: 'Prefiro não dizer' },
]},
{ id: 'busca_relacionamento', label: 'O que você busca em um relacionamento?', type: 'radio', required: true, options: [
{ value: 'companheirismo', label: 'Companheirismo' },
{ value: 'amor-romantico', label: 'Amor romântico' },
{ value: 'amizade-colorida', label: 'Amizade colorida' },
{ value: 'casamento', label: 'Casamento' },
{ value: 'outro', label: 'Outro' },
]},
],
},
{
id: 'step2',
title: 'Experiências Passadas',
description: 'Refletir sobre o passado pode ajudar a construir o futuro.',
fields: [
{ id: 'relacionamento_serio_antes', label: 'Você já esteve em um relacionamento sério antes?', type: 'radio', required: true, options: [
{ value: 'sim', label: 'Sim' },
{ value: 'nao', label: 'Não' },
]},
{ id: 'aprendizado_passado', label: 'Se sim, o que você aprendeu com suas experiências passadas?', type: 'textarea', placeholder: 'Compartilhe seus aprendizados...', required: false },
{ id: 'desafio_anterior', label: 'Qual foi o maior desafio que você enfrentou em um relacionamento anterior?', type: 'textarea', placeholder: 'Descreva o desafio...', required: false },
],
},
{
id: 'step3',
title: 'Valores e Prioridades',
description: 'O que é fundamental para você em uma parceria?',
fields: [
{ id: 'valor_1', label: 'Valor 1: O que é essencial para você em um parceiro?', type: 'text', placeholder: 'Ex: Honestidade', required: true },
{ id: 'valor_2', label: 'Valor 2: Outro valor importante?', type: 'text', placeholder: 'Ex: Respeito', required: true },
{ id: 'valor_3', label: 'Valor 3: Um terceiro valor fundamental?', type: 'text', placeholder: 'Ex: Lealdade', required: true },
{ id: 'lidar_diferencas', label: 'Como você lida com diferenças de opinião em um relacionamento?', type: 'radio', required: true, options: [
{ value: 'dialogo-aberto', label: 'Com diálogo aberto' },
{ value: 'evito-conflitos', label: 'Evito conflitos' },
{ value: 'preciso-estar-certo', label: 'Preciso estar certo(a)' },
{ value: 'compromisso', label: 'Busco compromisso' },
]},
],
},
{
id: 'step4',
title: 'Estilo de Comunicação',
description: 'A comunicação é a chave para qualquer relacionamento saudável.',
fields: [
{ id: 'estilo_comunicacao', label: 'Como você descreveria seu estilo de comunicação?', type: 'radio', required: true, options: [
{ value: 'direto-objetivo', label: 'Direto e objetivo' },
{ value: 'empatico-cuidadoso', label: 'Empático e cuidadoso' },
{ value: 'calmo-reservado', label: 'Calmo e reservado' },
{ value: 'expressivo-emocional', label: 'Expressivo e emocional' },
]},
{ id: 'expressar_emocoes', label: 'Você se sente confortável em expressar suas emoções abertamente?', type: 'radio', required: true, options: [
{ value: 'sim-sempre', label: 'Sim, sempre' },
{ value: 'as-vezes', label: 'Às vezes' },
{ value: 'nao-dificuldade', label: 'Não, tenho dificuldade' },
]},
{ id: 'expectativa_comunicacao_parceiro', label: 'O que você espera da comunicação do seu parceiro?', type: 'textarea', placeholder: 'Ex: Clareza, escuta ativa...', required: false },
],
},
{
id: 'step5',
title: 'Tempo e Espaço Pessoal',
description: 'Como equilibrar a vida a dois com a individualidade.',
fields: [
{ id: 'frequencia_parceiro', label: 'Com que frequência você gostaria de ver seu parceiro ideal?', type: 'radio', required: true, options: [
{ value: 'todos-os-dias', label: 'Todos os dias' },
{ value: 'algumas-vezes-semana', label: 'Algumas vezes na semana' },
{ value: 'semanalmente', label: 'Semanalmente' },
{ value: 'de-vez-em-quando', label: 'De vez em quando' },
]},
{ id: 'importancia_espaco_pessoal', label: 'Qual a importância do espaço pessoal para você em um relacionamento?', type: 'radio', required: true, options: [
{ value: 'muito-importante', label: 'Muito importante' },
{ value: 'importante', label: 'Importante' },
{ value: 'nao-muito-importante', label: 'Não muito importante' },
{ value: 'indiferente', label: 'Indiferente' },
]},
{ id: 'recarregar_energias', label: 'Como você recarrega suas energias?', type: 'radio', required: true, options: [
{ value: 'sozinho', label: 'Sozinho(a)' },
{ value: 'amigos-familia', label: 'Com amigos/família' },
{ value: 'hobbies', label: 'Praticando hobbies' },
{ value: 'parceiro', label: 'Com meu parceiro' },
]},
],
},
{
id: 'step6',
title: 'Resolução de Conflitos',
description: 'Conflitos são inevitáveis; a forma como lidamos com eles define a relação.',
fields: [
{ id: 'reacao_discussoes', label: 'Como você costuma reagir a discussões ou desentendimentos?', type: 'radio', required: true, options: [
{ value: 'resolver-rapidamente', label: 'Busco resolver rapidamente' },
{ value: 'silencio-refleto', label: 'Fico em silêncio e reflito' },
{ value: 'irrito-facilmente', label: 'Me irrito facilmente' },
{ value: 'tempo-esfriar', label: 'Preciso de um tempo para esfriar a cabeça' },
]},
{ id: 'importancia_resolver_conflito', label: 'O que é mais importante para você ao resolver um conflito?', type: 'radio', required: true, options: [
{ value: 'solucao-justa', label: 'Encontrar uma solução justa' },
{ value: 'manter-paz', label: 'Manter a paz' },
{ value: 'ser-compreendido', label: 'Ser compreendido(a)' },
{ value: 'parceiro-ceder', label: 'Que o parceiro ceda' },
]},
],
},
{
id: 'step7',
title: 'Intimidade e Afeto',
description: 'A expressão de amor e conexão no relacionamento.',
fields: [
{ id: 'demonstrar_afeto', label: 'Como você demonstra afeto em um relacionamento?', type: 'radio', required: true, options: [
{ value: 'palavras-afirmacao', label: 'Palavras de afirmação' },
{ value: 'atos-servico', label: 'Atos de serviço' },
{ value: 'presentes', label: 'Presentes' },
{ value: 'tempo-qualidade', label: 'Tempo de qualidade' },
{ value: 'toque-fisico', label: 'Toque físico' },
]},
{ id: 'importancia_intimidade_fisica', label: 'Qual a importância da intimidade física para você?', type: 'radio', required: true, options: [
{ value: 'muito-importante', label: 'Muito importante' },
{ value: 'importante', label: 'Importante' },
{ value: 'neutro', label: 'Neutro' },
{ value: 'nao-muito-importante', label: 'Não muito importante' },
]},
{ id: 'o_que_e_romance', label: 'O que significa "romance" para você?', type: 'textarea', placeholder: 'Defina romance à sua maneira...', required: false },
],
},
{
id: 'step8',
title: 'Visão de Futuro',
description: 'Sonhe alto! Como você imagina seu futuro a dois?',
fields: [
{ id: 'futuro_5_anos', label: 'Onde você se vê em 5 anos em um relacionamento?', type: 'radio', required: true, options: [
{ value: 'casado', label: 'Casado(a)' },
{ value: 'morando-junto', label: 'Morando junto' },
{ value: 'namorando-firme', label: 'Namorando firme' },
{ value: 'sozinho-aberto', label: 'Sozinho(a) mas aberto(a) a algo' },
{ value: 'outro', label: 'Outro' },
]},
{ id: 'deseja_filhos', label: 'Você deseja ter filhos?', type: 'radio', required: true, options: [
{ value: 'sim', label: 'Sim' },
{ value: 'nao', label: 'Não' },
{ value: 'talvez', label: 'Talvez' },
{ value: 'ja-tenho', label: 'Já tenho filhos' },
]},
{ id: 'manter_chama_acesa', label: 'O que você faria para manter a chama acesa em um relacionamento a longo prazo?', type: 'textarea', placeholder: 'Suas ideias criativas...', required: false },
],
},
];
const RelacionamentoFormulario = () => {
const [currentStep, setCurrentStep] = useState(0);
const [formData, setFormData] = useState({});
const [isSubmitted, setIsSubmitted] = useState(false);
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const totalSteps = steps.length;
const currentStepData = steps[currentStep];
const handleChange = (e: React.ChangeEvent) => {
const { name, value, type } = e.target;
if (type === 'radio') {
setFormData((prev) => ({ ...prev, [name]: value }));
} else {
setFormData((prev) => ({ ...prev, [name]: value }));
}
// Clear error for this field as user starts typing/selecting
setErrors((prev) => {
const newErrors = { ...prev };
delete newErrors[name];
return newErrors;
});
};
const validateCurrentStep = () => {
const currentStepFields = currentStepData.fields;
let isValid = true;
const newErrors: { [key: string]: string } = {};
currentStepFields.forEach(field => {
if (field.required) {
if (!formData[field.id] || (typeof formData[field.id] === 'string' && (formData[field.id] as string).trim() === '')) {
newErrors[field.id] = `Por favor, preencha o campo "${field.label.replace(':', '')}".`;
isValid = false;
}
}
});
setErrors(newErrors);
return isValid;
};
const handleNext = () => {
if (validateCurrentStep()) {
if (currentStep < totalSteps - 1) {
setCurrentStep((prev) => prev + 1);
setErrors({}); // Clear errors when moving to the next step
}
}
};
const handlePrevious = () => {
if (currentStep > 0) {
setCurrentStep((prev) => prev - 1);
setErrors({}); // Clear errors when moving to the previous step
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validateCurrentStep()) {
console.log('Formulário Submetido:', formData);
// In a real WordPress/Elementor setup, you would send this formData
// to a custom endpoint (e.g., via AJAX/Fetch API) which then saves it
// using Elementor's form submission hooks, ACF, or a custom database table.
setIsSubmitted(true);
}
};
if (isSubmitted) {
return (
);
}
const progress = ((currentStep + 1) / totalSteps) * 100;
return (
);
};
export default RelacionamentoFormulario;
Formulário Enviado com Sucesso!
Agradecemos por compartilhar suas experiências e insights. Seus dados foram recebidos.
Formulário de Relacionamento
{/* Google Ads Placeholder */}
Espaço para Bloco de Anúncios Google Ads (728x90px ou similar)
{/* Progress Bar */}
Etapa {currentStep + 1} de {totalSteps}: {currentStepData.title}
{currentStepData.description}