Form's Post-Submit is super messy due to CSS

Site URL: https://www.snorritraining.is

Hey everyone!

I have a contact form that's been translated to Icelandic using CSS (replaced "required" for "*", and "surname" to "fornafn", etc.).

After submitting the form, the message "Takk fyrir!" appears sandwiched with the translated CSS data. Does HTML come into play here?

Also, bonus points: Is there a way to translate "Fornafn" and "Eftirnafn" for the English version of my site? It seems Weglot is incapable of translating those fields.

The website is password-protected. The pass is "shrek5"

Pre-submit:

Post-submit:

Thanks in advance!

.field-list has to get display: none; upon submission.

I don't know if this is overdoing it, but you can try this in the header code injection of the page with the form. Not sure if it will work in a code block as i never use them:

<script>
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementsByClassName('form-submit-button')[0];
submitButton.addEventListener('click', function() {
const form = document.getElementsByClassName('field-list')[0];
form.style.display = 'none';
});
});
</script>

we wait till document is loaded.
we get the first of all the submit buttons
when it is clicked
we get the first of all the form containers
we set it to display-none, making it non-interactable and invisible.

 

54 minutes ago, DesignerLeo said:

.field-list has to get display: none; upon submission.

I don't know if this is overdoing it, but you can try this in the header code injection of the page with the form. Not sure if it will work in a code block as i never use them:

<script>
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementsByClassName('form-submit-button')[0];
submitButton.addEventListener('click', function() {
const form = document.getElementsByClassName('field-list')[0];
form.style.display = 'none';
});
});
</script>

we wait till document is loaded.
we get the first of all the submit buttons
when it is clicked
we get the first of all the form containers
we set it to display-none, making it non-interactable and invisible.

 

First off, thank you for the response.
This may not be a huge surprise but I'm not great with coding.

So I'm not supposed to paste this code into the "Post-Submit HTML" settings? Since I did that and it sadly doesn't work. How do I add this into the header section? Isn't that through CSS?

go to website > pages > website tools > code injection.
then paste the code into the header section, let me know if it works 🙂

Unfortunately, the previously edited CSS data is still there.

I'll be going off to work now, but I'll tinker with this when I get back if you or anyone else has more ideas.

Thanks again 🙂

Here are a few checks, could you please open inspection in your browser and see what the console log has to say? I might be able to help better.

 

<script>
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementsByClassName('form-submit-button')[0];
console.log(submitButton); //check if button is identified
if (submitButton) {
submitButton.addEventListener('click', function() {
const form = document.getElementsByClassName('field-list')[0];
console.log(form); //check if form is identified
if (form) {
form.style.display = 'none';
}
});
}
});
</script>

The log should return two objects, if it says null or undefined it means i am not identifying the elements correctly.

It returns with "SyntaxError: Unexpected token '<' ".

I hope I am correct that I'm supposed to paste this into "Console", which is a tab inside "Inspection"?

<script>
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.querySelector('.form-submit-button');
console.log(submitButton); //check if button is identified
if (submitButton) {
submitButton.addEventListener('click', function() {
const form = document.querySelector('.field-list');
console.log(form); //check if form is identified
if (form) {
form.style.display = 'none';
}
});
}
});
</script>

no the code has to go into the header code injection, but the logs will appear in the console.
I can see the problem, Uncaught TypeError: submitButton is undefined, please try to use the code above, instead.

Still coming up as a jumbled mess. I do appreciate the assistance, though.

Is this fixable? Do I need to make a new form at this point? 

No idea.
What CSS made it this way?
As a last try one, you can see if this works:
 

<script>
document.addEventListener('DOMContentLoaded', function () {
  const observer = new MutationObserver(function(mutationsList, observer) {
    mutationsList.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        // Check if the submit button has been added
        const submitButton = document.querySelector('.form-submit-button');
        if (submitButton) {
          submitButton.addEventListener('click', function() {
            const form = document.querySelector('.field-list');
            if (form) {
              form.style.display = 'none';
            }
          });
          observer.disconnect();
        }
      }
    });
  });
observer.observe(document.body, { childList: true, subtree: true });
});
</script>

It waits for the form to be added to the document before assigning the click event. If this doesn't work, I'm out of ideas, but if CSS is the cause of the issue, that's where the fix should be.