Issue with EmailJS Contact Form Redirection

Support
, ,
1

I’m encountering an issue with my EmailJS contact form on a website hosted with Netlify. The form works perfectly on my local live server. However, on the uploaded website, when I press “Send,” it redirects to a URL like this:

https://michaeltsop.com/contact?name=John&email=mihalaras123%40gmail.com&subject=Subject+2&message=my+test+message

This URL leads back to the same page. If I click “Send” again on this redirected page, the message is sent successfully.

I would like to avoid this redirection behavior and have the form submit correctly on the first attempt without any additional steps.

Could you please help me resolve this issue?

My link is this:
https://michaeltsop.netlify.app

2

When you encounter this issue, if you look at the developer console in your browser you will see:

image

Because of the error the preventDefault that you have within the function never happens and the default behavior of the form occurs, making a GET request to the current page.

The reason that it works on the second go around is because a real regular browser request for the /contact page has been made.

You can also see this by going directly to https://michaeltsop.netlify.app/contact
If you do so, then fill out the form, it will work first try.

The reason for the error will be whatever is providing your ajax based animated page transitions.

As clicking on ‘Contact’ on the menu causes:

image

While a direct request of course looks like:

image

However the DOM is being replaced by the ajax’d in content, it’s not initializing the JavaScript within that page, so your sendEmail function doesn’t exist.

You will need to make sure your JavaScript code actually initializes when it’s loaded in via your page transition system. A simple way to check would be to drop a console.log or alert in there and tinker until it starts firing on page ‘load’.

1 Like
3

Hi Nathan, thank you so much for taking the time to analyze the issues for me, I really appreciate it. However, I’m still having some trouble to understand what I need to change in order to fix the issue. Can I not fix it without removing the animated transitions?

I did try to remove them completely ( both the transitions and the preloader ) and it was working fine as in every click at the menu it changed to the corresponding page. The thing is that id like to try and keep them and im quite confused in how I can achieve this.

As I see, the code for the preloader and the page transitions in the main.js looks like this:

/* -------------------------------------------
       Preloader
    ------------------------------------------- */
    let preloaderPercent = document.querySelector('.mil-percent');
    let preloaderLine = document.querySelector('.mil-preload-line');
    let preloader = document.querySelector('.mil-preloader');
    let progress = 0;

    function updatePreloader() {
        if (progress <= 100) {
            preloaderPercent.textContent = progress;
            preloaderLine.style.width = progress + "%";
            progress += 5;
        } else {
            clearInterval(preloaderInterval);
            preloader.classList.add('mil-complete');
        }
    }

    let preloaderInterval = setInterval(updatePreloader, 100);


    /* -------------------------------------------
       Page Transition
    ------------------------------------------- */
    const options = {
        containers: ['#swupMain', '#swupMenu'],
        animateHistoryBrowsing: true,
        linkSelector: 'a:not([data-no-swup])',
        plugins: [new SwupBodyClassPlugin()]
    };

    const swup = new Swup(options);

    document.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function (event) {
            const url = this.href;

            fetch(url)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    const bodyClass = doc.body.className;

                    if (bodyClass.includes('mil-fw-page')) {
                        const rightPart = document.querySelector('.mil-right-part');
                        rightPart.classList.add('mil-go');

                        setTimeout(() => {
                            rightPart.classList.remove('mil-go');
                        }, 400);
                    }
                })
                .catch(error => console.error('Помилка при завантаженні сторінки:', error));
        });
    });

    const clonedBlock = document.querySelector('.mil-cloned');
    const cloneDestination = document.querySelector('.mil-cv-clone-here');
    if (clonedBlock && cloneDestination) {
        const clonedElement = clonedBlock.cloneNode(true);
        cloneDestination.appendChild(clonedElement);

        const bannerBg = clonedElement.querySelector('.mil-banner-bg');
        if (bannerBg) {
            bannerBg.classList.add('mil-fw-banner');
        }
    }

Do you think there is a way to keep the website as is and fix this issue?
Again, thanks a lot for taking the time to assist me in this!

4

@mihalistsop Firstly, your question is actually Out of Scope for getting assistance here, since it’s an issue with your site code that is unrelated to hosting with Netlify.

Base functionality of Netlify’s build and deploy pipeline is supported, but we cannot help you debug any source code used either during build or after deployment.

That said, I already provided a hint as to what you ultimately need to do:

You’re using something called Swup, a quick google for swup javascript reveals:
https://swup.js.org/getting-started/common-issues/#scripts-on-the-next-page-are-not-executed

Read that documentation and follow the links to see various Swup specific workarounds.

You’re going to have to do the implementation yourself.