I’m have been trying to create a form with cities and states but these items need to be selected and not written. I tried to embed the code (javascript) and the json in the custom code option but is not really working here, because when i put the code in the custom option he is showing the code in the head.
here is some of codes that i’m trying to use on the form:
Html + Javascript and Json (with the cities and states)
Another code:
//jquery var do select dos estados
var $selectUf = $("#selectUf");
//jquery var do select das cidades
var $selectCidades = $("#selectCidade");
//será atribuido um valor nessa variável sempre que ele escolher um UF
var estadoSelecionado;
var cidadeSelecionada;
//uma função que pega os estados da API e o parametro dela recebe uma função que lida com essa resposta
var getEstados = function(responseFunction){
$.ajax({
method: "GET",
url: "http://api.londrinaweb.com.br/PUC/Estados/BR/0/10000",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
async:false,
success: responseFunction
});
}
//mesma ideia da função de cima porém nessa pegaremos a cidade de acordoo com a UF escolhida
var getCidades = function(estadoSelecionado,responseFunction){
$.ajax({
method: "GET",
url: "http://api.londrinaweb.com.br/PUC/Cidades/"+estadoSelecionado+"/BR/0/10000",
dataType: "jsonp",
success: responseFunction
});
}
//função que lida com a resposta da api e lista os estados no select
var populandoSelectUf = function(response) {
$.each(response,function(i,item){
$selectUf.append('<option value="'+item.UF+'"> '+item.UF+' </option>');
})
}
//essa função só é chamada quando escolhe algum estado da UF
var populandoSelectCidades = function(response){
//limpando o html do select
$selectCidades.html("");
$.each(response,function(i,item){
$selectCidades.append('<option value="'+item+'">'+item+'</option>')
});
}
getEstados(populandoSelectUf);
//sempre quando escolher uma UF coloca o valor selecionado na variavel estado selecionado
//e depois disso lista as cidades correspodente a UF Escolhida
$selectUf.change(function(){
estadoSelecionado = $(this).val();
alert("voce selecionou: "+estadoSelecionado);
getCidades(estadoSelecionado,populandoSelectCidades);
});
$selectCidades.change(function(){
cidadeSelecionada = $(this).val();
alert("voce selecionou: "+cidadeSelecionada);
});
I created one code that works good on my html test, but in the webflow i got this msg “Custom Code cannot exceed 10000 characters” There is some way to improve my code? maybe with GTM?
In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above upfront before someone has to ask.
If you require urgent assistance, you can also hire me here.
Thank you for reaching out. The Webflow team is dedicated to helping all of you incredible designers in any way they possibly can.
Forum Usage
Everyone is welcome to ask for our help on the forum, where the community can help one another and share tips and experiences with using Webflow. There is also a Freelance category if your design or custom code issues are broad or urgent in nature, and would be more suited for a professional Designer or Developer to assist you with.
Email Support
With Priority Support, the Webflow team prioritizes email support requests for account, billing, or technical related that come from those with Professional or Team plans ahead of those from Starter plan or free accounts. But if there is ever a bug, please do post in the Bugs category and tag @waldo and/or @cyberdave and they will do everything to address the bug as soon as possible and resolve that issue to make sure that you’re able to continue using Webflow as normal. If you are unable to post it in the forum for any reason, you can also email Webflow support at support@webflow.com and they will look into it during office hours.
Statement of Support
Please also note that Webflow staff are limited to what they are allowed to support via email and forums. Due to the highly variable nature of design or custom code related issues (including external plugins) that can occur in the Webflow Designer, they fall outside of Webflow’s statement of support as they can be resolved by making design changes to a site or removing/editing custom code in a site. The Webflow’s statement of support describes the kind of issues the Webflow team can help you with from the support desk.
Thank you for your understanding.
Sam
Disclaimer: I’m NOT Webflow staff, just a normal guy like you
Hello I had the same problem and wanted to share my solution with future readers.
I used ChatGPT to whip up a little tool that will generate a native Webflow select input from a comma-separated list. I published the tool and it’s free for anyone to use.
Here’s the link to the tool.
It should help any future readers get around the pesky 10k character limit in custom embeds.
Hi @DuncanHamra Duncan! Great link and thank you for sharing!
By any chance, would you also have an option or maybe some knowledge when it comes to Country & City select fields? Where the city field would be dependent on the choice of country?
Hey Bianca How many countries are you listing in your form? Assuming it’s more than 3 or 4, I think you’re going to need something more automated than what’s possible using my tool
I would guess a database of sorts that can pull in a current list of cities when you give it a country. I’m afraid this isn’t something I’ve done before
I had the same problem and wanted to share my solution with future readers.
