Widget Todos os Estados e Cidades: Exibindo o menu suspenso Cidade ao lado do menu suspenso Estado

Estaou elaborando um formulário e precebi que no widget "Cidade e Estados" os campos "Estado" e "Cidade" aparecem um abaixo do outro, disperdiçando o espaço lateral disponível. Por mais que eu desative a propriedade "Comprimir", os campos permancem aparecendo assim. Existe alguma forma de configurar esse widget para que o campo "Cidade" apareça à diretira do campo "Estado"?

Olá Marcus,

Obrigado por entrar em contato conosco para pedir ajuda. Sobre a sua pergunta sobre como configurar o widget "Cidades e Estados" para que os campos "Estado" e "Cidade" apareçam lado a lado, em vez de um abaixo do outro, aqui está como fazer:

Vou te orientar no processo:

1. Abra o seu formulário no Criador de Formulários.
2. Clique no widget para selecioná-lo e, em seguida, clique no ícone de engrenagem para abrir o painel de Propriedades.
3. Vá até a aba Avançado e procure a opção chamada "Reduzir" (Shrink) e ative-a. Isso vai diminuir a largura do campo para que ele não ocupe toda a largura do formulário.
4. Repita o mesmo para o outro campo (seja "Estado" ou "Cidade"). Quando ambos os campos estiverem reduzidos, eles se alinharão automaticamente lado a lado, desde que a largura do formulário permita.

Esse método otimiza o uso do espaço horizontal e deve exibir o campo "Cidade" à direita do campo "Estado". Veja meu resultado abaixo:

Você pode dar uma olhada no meu formulário clonado aqui e também cloná-lo para testar você mesmo. Você também pode querer verificar este guia sobre Como posicionar elementos do formulário no Jotform.

Experimente e nos diga como foi.

Nesse widget, quando você seleciona um estado no campo "Estado", aparece o campo "Cidades" abaixo. O que eu desejo é que, ao invés do campo "Cidade" aparecer abaixo, que ele apareça no lado diretiro.

O que você fez foi duplicar o widget, criando dois campos "Estado":

O resultado que eu desejo é esse:

Hi Marcus,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Marcus,

Our Portuguese Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, You can automatically display the city dropdown right next to the state dropdown by injecting custom CSS into both your form and the widget itself. To apply the changes inside the widget, you'll need to replace its existing custom CSS with the new code provided below. After that, you can further customize the styling as needed. Let me show you how to do it.

1. First, copy this code:

#customFieldFrame_3 {

    width: 100% !important;         /* Make iframe take full container width */

    height: auto !important;        /* Allow height to adjust based on content */

    border: none !important;        

    max-width: none !important;     

    overflow: visible !important;   /* Allow content to overflow */

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

4. Copy the CSS codes below:

#citiesContainer{ 

position: relative!important;

left: 330px!important;

bottom: 82px!important;

bottom: 8px;

}

input#cities {

    position: relative!important;

    bottom: 10px!important;

}

button#citiesButton {

    position: relative;

    width: 120px;

}

5. Open your form in Form Builder, scroll down, and select the All States and Cities widget.

6. Click on the Wand icon on the right side of the widget to open Widget Settings.

7. Under the Custom CSS tab, remove the existing CSS codes and paste the code into the CSS Code box.

Here's the sample result:

Give it a try and let us know how it goes.