Register form activating other forms

Question

So I have a contact form which shows a popup when it is submitted. I also have a registration and login form. The issue is: sometimes when a user logs in or registers an account, and you go to the contact page the popup is triggered (without filling in anything in the contact form or submitting) For the contact form I'm using the contact-form plugin.

contact form:

<form method="post" action="" accept-charset="UTF-8">
    {{ csrfInput() }}
    {{ actionInput('contact-form/send') }}
    {{ redirectInput('contact') }}

    <div class="form-group c-contact-item">
      <label for="from-name">{{ entry.labelName }}</label>
      <input class="form-control" type="text" id="from-name" name="fromName" value="" autocomplete="name" placeholder="{{ entry.placeholderName }}" required/>
    </div>
    {{ submission ? _self.errorList(submission.getErrors('fromName')) }}
    
    <div class="form-group c-contact-item">
      <label for="from-email">{{ entry.labelEmail }}</label>
      <input class="form-control" type="email" id="fromEmail" name="fromEmail" value="" autocomplete="email" placeholder="{{ entry.placeholderEmail }}" required/>
    </div>
    {{ submission ? _self.errorList(submission.getErrors('fromEmail')) }}
    
    
    <div class="form-group c-contact-item">
      <label for="from-tel">{{ entry.labelTel }}</label>
      <input class="form-control" type="fromTel" id="message[tel]" name="message[tel]" value="" autocomplete="tel" placeholder="{{ entry.placeholderTel }}" required/>
    </div>
    {{ submission ? _self.errorList(submission.getErrors('tel')) }}

    <div class="c-contact-item">
      <label for="message">{{ entry.labelBericht }}</label>
      <textarea cols="30" rows="5" class="form-control" name="message[body]" id="message" placeholder="{{ entry.placeholderBericht }}" required></textarea>
    </div>
    {{ submission ? _self.errorList(submission.getErrors('message')) }}
    <div class="c-contact-checkbox">
              <div>
                <label class="container">
                  <input class="form-check-input" type="checkbox" required/>
                  <span class="checkmark"></span>
                  {% set privacyLinkLink = privacyLink.meerInfomatieButtonLink.one() %}
                  <a href="{{ privacyLinkLink.url }}"><p style="color:#353535;">{{ privacyLink.meerInformatieButtonText }}<p></a>
                </label>
              </div>
            </div>

    <button class="c-button" type="submit" style="border: none;">{{ entry.contactButton }}</button>
</form>

log form:

<form method="post" accept-charset="UTF-8">
                    {{ csrfInput() }}
                    {{ actionInput('users/login') }}

                    <label class="c-login__label" for="loginName">{{ entry.usernameLabel }}</label>
                    {{ input('text', 'loginName', craft.app.user.rememberedUsername, {
                        id: 'loginName',
                        autocomplete: 'username',
                        class: "c-login__input"
                    }) }}

                    <label class="c-login__label" for="password">{{ entry.passwordLabel }}</label>
                    {{ input('password', 'password', null, {
                        id: 'password',
                        class: "c-login__input"
                    }) }}
                   
                    <label class="login-checkbox-label">
                        {{ input('checkbox', 'rememberMe', '1', {
                            class: 'login-checkbox',

                        }) }}
                        <span class="checkmark"></span>
                        <p>{{ entry.rememberme }}</p>
                    </label>

                    <button class="c-button c-button--secondary c-contactme__group-button login-button c-login__button" type="submit">{{ entry.loginButton }}</button>

                    {% if errorMessage is defined %}
                        <p class="password-forget">{{ errorMessage }}</p>
                    {% endif %}
                </form>

popup:

{% if craft.app.session.hasFlash('notice') %}
    <div class="popup-container">
        <div class="popup">
            <h3>{{ entry.popupSucces }}</h3>
        </div>
    </div>                   
    {% elseif craft.app.session.hasFlash('error') %}
    <div class="popup-container">
        <div class="popup">
            <h3>{{ entry.popupError }}</h3>
        </div>
    </div> 
{% endif %}

Answer 1

The registration form set's a flash message in the session, but that flash message doesn't know or care which page it came from. You're redirecting to the contact form immediately after the registration ({{ redirectInput('contact') }}), so the flash message isn't displayed on the registration page. This means that when the contact form is displayed, the flash message for the successful registration is still in the session, so it appears as a popup message.

You could argue that this is the correct behaviour. You're redirecting to the contact form immediately after a successful registration, so without any confirmation message, the user won't know whether their registration succeeded. You can make the success message more specific (to make sure there's no misunderstandings), you can include a successMessage parameter in your registration form, and it will be used for the success flash message.

If you want to avoid those flash messages displaying on the contact form, you can use a hook to clear any pending flash messages from the session after the registration.