Email Input Field Hides on Invalid Email Submission

[utkarshahu]

Description

From the image, it seems like the email input field hides or collapses when an invalid email is entered. This could be due to an issue with CSS or JavaScript handling the form validation.

Here’s a detailed issue report you can contribute to the repository:

---

Issue Title:

Email Input Field Hides on Invalid Email Submission

Description:

When an invalid email is entered in the subscription form, the input field disappears instead of staying visible for the user to correct their input. This affects the user experience, as users need to reload the page to access the input field again.

Steps to Reproduce:

1. Navigate to the subscription form on the website.
2. Enter an invalid email address (e.g., ee).
3. Submit the form by clicking the "Subscribe" button.

Expected Behavior:

The input field should remain visible, allowing the user to correct their input.

Actual Behavior:

The email input field hides after submission, and the error messages are displayed.

Suggested Fix:

• Check the CSS for any display: none or visibility: hidden applied to the input field upon form validation failure.
• Ensure the JavaScript handling form validation doesn't unintentionally modify the input field's visibility.
• Update the validation script to focus the input field after displaying an error message.

Environment:

• Browser: [Specify browser and version, e.g., Chrome 119.0.0]
• OS: [Specify operating system, e.g., Windows 11]
• Framework: Nightwatch.js or associated libraries.

Suggested solution

#error-message { color: red; font-size: 14px; margin-top: 4px; position: absolute; /* Prevent layout shift / } input[type="email"] { margin-bottom: 20px; / Add space for error messages */ }

Alternatives / Workarounds

No response

Additional Information

Sir, I want to contribute to this project by fixing this error. Please advise me where I can find the file for the email input field. I have searched a lot but couldn’t locate it. Please help me identify the file location so I can fix it and create a pull request.

[avanshh99]

Hey there please assign me this issue i think i got this!

[UtkarshBirla28]

Heyy can u assign me this issue

[utkarshahu]

Brother I am Not a mentor , So how I can Assign to you.

[mohyware]

I am not a mentor, but you can find the code in this repository: here in /nightwatch-docs/src/includes/footer.ejs at line 154, It's an iframe from Substack, so I am not sure how to solve it.

           <iframe
                  frameborder="0"
                  scrolling="no"
                  title="nightwatch-substack"
                  src="https://nightwatch.substack.com/embed"
                  loading="lazy"
                  height="160px"
                  style="position: relative;left: -11px;top: -20px;"></iframe>

[utkarshahu]

Thanks Brother