Hello all.
I am currently building a lead form that needs 3 new fields than usual. (I usually just duplicate old landing pages and utilize those already built lead forms). This one needs to have the new fields of State, City, and Zipcode. Due to our leads needing a location attached to them (we are an in-person education service), I thought the best course of action was to have the city and zips filter out based on the previous fields choice. I added the pre-made state field and the following script that ChatGPT helped me with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function() {
// Fetch cities based on selected state
jq("#state").change(function() {
var stateCode = jq(this).val();
if (stateCode) {
jq.ajax({
url: "https://api.zippopotam.us/" + stateCode,
type: "GET",
success: function(data) {
var cities = data.places;
var cityField = jq("[id='cityfield']");
cityField.empty();
jq.each(cities, function(index, city) {
cityField.append(new Option(city["place name"], city["place name"]));
});
}
});
}
});
// Fetch zip codes based on selected state and city
jq("[id='cityfield']").change(function() {
var stateCode = jq("#state").val();
var city = jq(this).val();
if (stateCode && city) {
jq.ajax({
url: "https://api.zippopotam.us/" + stateCode + "/" + city,
type: "GET",
success: function(data) {
var zipCodes = data["post codes"];
var zipCodeField = jq("[id='zipcodefield']");
zipCodeField.empty();
jq.each(zipCodes, function(index, zipCode) {
zipCodeField.append(new Option(zipCode, zipCode));
});
}
});
}
});
});
</script>
Please no negativity on me utilizing a ChatGPT built script. I have no java knowledge and I am doing my best with the resources I have. Just a wee girl trying to learn things and do it her da*n self. All the field IDs match with the above and there is another script on the page already (reflected in first row).
After adding this, and publishing the page to test… I cannot drop down the State or Zipcode fields in the lead form. Furthermore, one request I had for ChaptGPT was to access an API or CRM that was free. I don’t mind creating an account, but I need a free resource. Zippopotam was that resource, and I didn’t see anything on the site about logging in to get the API key.
Any advice, next steps, troubleshooting I can do will be greatly appreciated. TYIA!
