Fetch to JSON field path

Hi,

UPDATE: Please make sure to move the Code Block element inside a Color Section element. Let us know of the result.

Best regards,
Ismael

Hi,
As I understand your test site outer box shadow works good:

but your live site is not:

I first note that in your code block you have HEAD & BODY tags please don’t add these, I also note that your page is not published, the WordPress preview will not always display the page correctly, I also see that your HTML in the code block adds css for “.container” & “body” that targets the page and not just the code block element.
So I remove the HEAD & BODY tags, change “.container” to “.zip-container” and publish, and now it is mostly correct:

the corrected code:

<script>
var gform;gform||(document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,initializeOnLoaded:function(o){gform.domLoaded&&gform.scriptsLoaded?o():!gform.domLoaded&&gform.scriptsLoaded?window.addEventListener("DOMContentLoaded",o):document.addEventListener("gform_main_scripts_loaded",o)},hooks:{action:{},filter:{}},addAction:function(o,n,r,t){gform.addHook("action",o,n,r,t)},addFilter:function(o,n,r,t){gform.addHook("filter",o,n,r,t)},doAction:function(o){gform.doHook("action",o,arguments)},applyFilters:function(o){return gform.doHook("filter",o,arguments)},removeAction:function(o,n){gform.removeHook("action",o,n)},removeFilter:function(o,n,r){gform.removeHook("filter",o,n,r)},addHook:function(o,n,r,t,i){null==gform.hooks[o][n]&&(gform.hooks[o][n]=[]);var e=gform.hooks[o][n];null==i&&(i=n+"_"+e.length),gform.hooks[o][n].push({tag:i,callable:r,priority:t=null==t?10:t})},doHook:function(n,o,r){var t;if(r=Array.prototype.slice.call(r,1),null!=gform.hooks[n][o]&&((o=gform.hooks[n][o]).sort(function(o,n){return o.priority-n.priority}),o.forEach(function(o){"function"!=typeof(t=o.callable)&&(t=window[t]),"action"==n?t.apply(null,r):r[0]=t.apply(null,r)})),"filter"==n)return r[0]},removeHook:function(o,n,t,i){var r;null!=gform.hooks[o][n]&&(r=(r=gform.hooks[o][n]).filter(function(o,n,r){return!!(null!=i&&i!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][n]=r)}});

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('zipcodeForm');
    const input = document.getElementById('zipcodeInput');
    const errorMessage = document.getElementById('errorMessage');

    fetch('https://welsbpo.net/wp-content/uploads/zipcodes.json')
        .then(response => response.json())
        .then(zipcodeData => {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const zipcode = input.value.trim();

                if (zipcodeData[zipcode]) {
                    window.location.href = zipcodeData[zipcode];
                } else {
                    errorMessage.textContent = 'Zipcode not found. Please try again.';
                }
            });
        })
        .catch(error => {
            console.error('Error fetching zipcode data:', error);
            errorMessage.textContent = 'An error occurred. Please try again later.';
        });
});
</script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: #f0f0f0;
        }

        .zip-container {
            background-color: white;
            padding: 2rem !important;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h3 {
            margin-bottom: 1rem;
        }

        form {
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        input {
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px;
        }

        button {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .error {
            color: red;
        }
    </style>
    <div class="zip-container">
        <h3>Zipcode Redirect</h3>
        <form id="zipcodeForm">
            <input type="text" id="zipcodeInput" placeholder="Enter zipcode" required>
            <button type="submit">Go</button>
        </form>
        <p id="errorMessage" class="error"></p>
    </div>

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike