sebastianpetrovski

Hi,

Thanks so much for your reply.

You’re right the hustle library loads only if the first page visited has a pop-up active. But if the site session starts from a page without a pop-up assigned then the hustle library never loads.

I tried manually loading the script in the footer and that got rid of the error message in the console, but the pop-up still didn’t show.

So instead, I found a way to force the relevant pages to hard refresh so they are compatible with the hustle plugin. It makes the page load ugly, but it works.

There’s a probably a way to integrate the theme and the plugin, but I imagine it may be a lot of work! Please let me know if I’m wrong though and if it might be as simple as directing hustle to look for the newpageshown event with an m-u plugin or something.

In any case, thanks for your reply and I’m glad there’s a workaround.

Take care,

Sebastian

Hello,

Thank you for your quick reply.

Although it appears that HUI is not defined. Is there another object I should be referencing?

Kind Regards,

Sebastian

That’s awesome, thanks so much!

I just installed and tested and seems to be working fine.

Thanks again!

Sebastian

Hi,

Sorry I’m not familiar with the PHP language and I don’t understand the last statement.

I thought we were aiming for validation that was intuitive for the user and prevents recieving junk data like below:

example.com           VALID
https://example.com    VALID
https://example.com   VALID
[email protected]   NOT VALID
example               NOT VALID
https://example        NOT VALID

Please can you break down what you mean with the statement below?

…it will validate the example as a valid URL hence you can have “localhost” or just configure your local computer to point to any string like?https://example

Hello,

Sorry to waste your time on this; Your suspecion was right!

I didn’t think to check “computed” in the inspector until today.

I found the issue; my wordpress theme has the below code baked into it’s css – not sure why the developer opted for that.

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
textarea {
  /* Remove First */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

I was able to override it by marking the custom css in hustle with !important – I guess it works because hustle css is being read after theme css – pretty dirty fix, but it works!

Based on this the single line css issue is probably to do with my theme as well. It’s not a big deal, I get chatgpt to reformat it after it happens.

Hello,

Thank you! Although that is letting anything through. I can just type in “example” and it is allowed. Can you please check with the developers if there was a mistake?

Best,

Sebastian

Hello,

Thanks for your reply

Here is the export: https://drive.google.com/file/d/1YgdSeyYO5owxRl7UlnONwCfmw36ZjN2e/view?usp=sharing

Please let me know how you go.

Best,

Sebastian

I’m really stuck on something related to this…

I can’t figure out why the “Enter Email Address” and “Mobile (optional)” fields don’t have the same border and box shadow properties as the other input fields. Can you spot why?

I’ve pasted the formatted css below the image, courtesy of chatGPT – hopefully it didn’t make any mistakes while formatting – I’ve found it does sometimes.

.hustle-layout .hustle-title {
font-size: 48px;
text-align: center;
margin-bottom: 25px;
}

.hustle-layout .hustle-subtitle {
font-size: 32px;
font-family: terminal, monaco, monospace;
font-weight: bold;
text-align: center;
color: black;
text-shadow: 0px 1px 0px black, 0px -1px 0px white,
-1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa,
0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa;
margin: 10px;
}

.hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {
border: 0px white solid;
box-shadow: 0 0 10px 0px white;
position: relative;
font-size: 16px;
font-family: arial;
font-weight: normal;
text-align: center;
color: #000000;
margin-bottom: 20px;
}

.hustle-input-label span {
font-size: 16px;
font-family: arial;
font-weight: normal;
text-align: center;
color: black;
}

.hustle-button-text {
font-size: 18px;
font-family: terminal, monaco, monospace;
font-weight: normal;
text-align: center;
}

.hustle-error-message {
border-radius: 100px;
display: none;
}

.hustle-layout .hustle-error-message p {
font-size: 18px;
font-family: terminal, monaco, monospace;
font-weight: normal;
text-align: center;
}

.hustle-image {
margin-bottom: 15px;
}

.hustle-checkbox.hustle-gdpr {
align-items: center;
flex-direction: column;
width: 100%;
padding-top: 10px;
}

.hustle-checkbox.hustle-gdpr span {
color: black;
border-color: black;
background-color: cyan;
border-radius: 15px;
margin-top: 10px;
}

.hustle-group-content a {
background: white;
padding: 2px 5px;
border-radius: 25px;
}

@media (max-width: 600px) {
.hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {
font-size: 16px;
font-family: arial;
font-weight: normal;
text-align: center;
color: #000000;
margin-bottom: 10px;
}
}

@media (max-width: 600px) {
.hustle-layout .hustle-subtitle {
font-size: 18px;
font-family: terminal, monaco, monospace;
font-weight: bold;
text-align: center;
color: black;
text-shadow: 0px 1px 0px black, 0px -1px 0px white,
-1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa,
0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa;
}
}

Hello,

Thanks for your reply.

I think you got it in your last paragraph, pasted below.

Or do you mean to have some sort of validation there but in a way that will only skip prefix (like: if it’s there, it’s fine, if it’s not there it’s fine too, provided that the rest of the string appears to be an URL)?

Let me break it down again just to make sure we understand each other ??

Forminator URL validation will allow BOTH: “example.com” and “https://example.com”

Hustle URL validation will allow ONLY: “https://example.com”

I think the forminator validation is better because most people forget about https://

Best,

Sebastian

Hello,

Sorry for the late reply!

Thank you for the suggestion and the code!

However, I think it’s better to not require the “https://” prefix. Is it possible to do that?

Look forward to hearing from you.

Sebastian

Hello,

Sorry for the late reply!

This is happening in the Pop-Up module.

Here is the css:
.hustle-layout .hustle-title { font-size: 48px; text-align: center; margin-bottom: 25px; } .hustle-layout .hustle-subtitle { font-size: 32px; font-family: terminal, monaco, monospace; font-weight: bold; text-align: center; color: black; text-shadow: 0px 1px 0px black, 0px -1px 0px white, -1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa, 0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa; margin: 10px; } .hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input { border: 0px white solid; box-shadow: 0 0 10px 0px white; position: relative; font-size: 16px; font-family: arial; font-weight: normal; text-align: center; color: #000000; margin-bottom: 20px; } .hustle-input-label span { font-size: 16px; font-family: arial; font-weight: normal; text-align: center; color: black; } .hustle-button-text { font-size: 18px; font-family: terminal, monaco, monospace; font-weight: normal; text-align: center; } .hustle-error-message { border-radius: 100px; display: none; } .hustle-layout .hustle-error-message p { font-size: 18px; font-family: terminal, monaco, monospace; font-weight: normal; text-align: center; } .hustle-image { margin-bottom: 15px; } .hustle-checkbox.hustle-gdpr { align-items: center; flex-direction: column; width: 100%; padding-top: 10px; } .hustle-checkbox.hustle-gdpr span { color: black; border-color: black; background-color: cyan; border-radius: 15px; margin-top: 10px; } .hustle-group-content a { background: white; padding: 2px 5px; border-radius: 25px; } @media (max-width: 600px) { .hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input { font-size: 16px; font-family: arial; font-weight: normal; text-align: center; color: #000000; margin-bottom: 10px; } } @media (max-width: 600px) { .hustle-layout .hustle-subtitle { font-size: 18px; font-family: terminal, monaco, monospace; font-weight: bold; text-align: center; color: black; text-shadow: 0px 1px 0px black, 0px -1px 0px white, -1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa, 0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa; } }

Hi Zafer,

Thanks so much for your guidance! That really helped.

Strangely it wouldn’t work on its own, but when I combined it with a mutation observer as well it worked.

And I discovered the form.submit method appears to work by a hard refresh instead of Ajax and seems to bypasses any behaviour settings in the form.

I guess there’s more things happening in the background and form.submit is like a bruteforce.

So to get back some control I had the hacky idea of simulating a click instead and it seems to work just fine. Very pleasantly surprised.

I’ll paste the code here in case someone else wants to achieve something similar. I’ve placed the code in the footer of my site.

<script>
window.laytheme.on("newpageshown", function () {
    // Lay Theme code here

    // ...

    // Initialize and trigger Forminator-related code
    jQuery(document).on('after.load.forminator', function(e, form_id) {
        // Function to check for the presence of the "auto-submit-form" class and simulate a click event
        function checkForAutoSubmitForm() {
            var form = document.forms[0]; // Replace with the appropriate form selector if needed
            var elements = document.querySelectorAll('.auto-submit-form');

            if (elements.length > 0) {
                var options = {
                    root: null,
                    rootMargin: '0px',
                    threshold: 0.1
                };

                function autoSubmitWhenVisible(entries, observer) {
                    entries.forEach(function (entry) {
                        if (entry.isIntersecting) {
                            // Instead of form.submit(), simulate a click event
                            var submitButton = document.getElementById("forminator-submit");
                            if (submitButton) {
                                var clickEvent = new MouseEvent("click", {
                                    bubbles: true,
                                    cancelable: true,
                                    view: window
                                });
                                submitButton.dispatchEvent(clickEvent);
                            }
                            observer.unobserve(entry.target);
                        }
                    });
                }

                var observer = new IntersectionObserver(autoSubmitWhenVisible, options);

                elements.forEach(function (element) {
                    observer.observe(element);
                });
            }
        }

        // Set up a Mutation Observer to check for changes in the DOM
        var observer = new MutationObserver(checkForAutoSubmitForm);

        // Configure the observer to watch for child additions to the body
        var config = { childList: true, subtree: true };
        observer.observe(document.body, config);

        // Trigger the initial check
        checkForAutoSubmitForm();
    });

    // Trigger Forminator-related code
    setTimeout(function() {
        jQuery('.forminator-custom-form').trigger('after.load.forminator');
    }, 100);

    // ...
});


</script>

Hi Laura,

Yes, thanks so much ??

Hi Kasia,

It works! Thanks so much!

Take care,

Sebastian

Hi,

Sorry about that, I was unaware of the google docs problem.

Please try this link for the export code: https://pastebin.com/iwJCta2A

And this link for the JS: https://pastebin.com/A5D26i3n

Look forward to hearing from you.

Sebastian