Submitted about 2 months ago

newsletter-sign-up-with-success-message-main

zbuli-t•190

@zbuli-t

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

i'm happy to use javascript to generate a new page of html and button it took me a while to figure out how to achieve this i think i can write faster over time

What challenges did you encounter, and how did you overcome them?

i am struck at positioning the Invalid email required message to be inline with Email address label. At the end of the project i still can't make it what a pity

What specific areas of your project would you like help with?

i am struck at positioning the Invalid email required message to be inline with Email address label. At the end of the project i still can't make it what a pity

Community feedback

James.•220

@JimztechPosted about 2 months ago

Hey zbuli, nice work.

How I got mine to work for the positioning of ur email address, here's how I went about mine.

.form-container span:first-of-type {
    position: absolute;
    left: 0;
    top: -25px;
}
.form-container .error {
    position: absolute;
    right: 0;
    top: -30px;
    text-align: right; /* Ensures the text is aligned to the far right */
    white-space: nowrap; 
}

Then I placed my email inside of a span element instead of label.

<label for="mail">
            <span>Email address</span>
            <input type="email" id="mail" name="mail" required minlength="8" placeholder="[email protected]">
            <span class="error" aria-live="polite"></span>
          </label>

Super impressive work zbuli-t

Marked as helpful

zbuli-t•190

@zbuli-tPosted about 2 months ago

@Jimztech super thanks for your help and support!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord