Newsletter New Form Columns

Let's go ahead and get started with setting up our newsletter-new. We need to open up our newsletterNewForm.js and give our item's unique classNames. So let's replace sign-in-form with new-newsletter-form

newsletterNewForm.js

    return (
      <form onSubmit={handleSubmit} className="new-newsletter-form">
        <FormTitle className="new-newsletter-form__title" text="Login" />
        <Field
          className="new-newsletter-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />
        <Field
          className="new-newsletter-form__password"
          placeholder="Enter Password"
          name="password"
          type="password"
          title="Password"
          component={FormInput}
        />
        <Field
          className="new-newsletter-form__login"
          name="login"
          type="submit"
          title="Login"
          component={FormButton}
        />
        <div className='new-newsletter-form__text-links'>
            <TextLink to='/forgot' text='Forgot Password'/>
            <TextLink to='/signup' text='Not a member? Register here'/>
        </div>

      </form>
    );
  }
}

That should be good. Everything's kind of messed up but it's expanded all the way okay.

large

All we have to do is provide some template columns to fix this. We'll create a new scss file later, but for now let's do it in signin.scss, near the bottom. Let's add in our selectors and template.

signin.scss

.new-newsletter-form {
    display: grid;
    grid-template-columns: [s] 1fr [input-s] 1020px [input-e] 1fr [s];
}

Since our labels are overall the same, we can copy the grid placements from the sign-in-form and paste it down below for our newsletter.

signin.scss

.new-newsletter-form {
    display: grid;
    grid-template-columns: [s] 1fr [input-s] 1020px [input-e] 1fr [s];

    &__title {
        width: 100%;
        margin-top: 6.6rem;
        grid-column: s/e;
    }
    &__email {
        margin-top: 7.7rem;
        grid-column: input-s/input-e;
    }
    &__password {
        margin-top: 4rem;
        grid-column: input-s/input-e;
    }
    &__login {
        margin-top: 8.8rem;
        grid-column: input-s/input-e;
    }
    &__text-links {
        margin-top: 5.2rem;
        grid-column: input-s/input-e;
    }
}

Okay so that's going to place them all where they belong on a grid, but a bit wider now. What we want to do is push it over to the left of it. If you inspect the area then you'll see that we have the space on the left that we don't want we can really easily get rid of that by just getting rid of a 1fr in our template-columns.

large

.new-newsletter-form {
    display: grid;
    grid-template-columns: [s input-s] 1020px [input-e] 1fr [s];
}

Alright so it all lines up pretty nicely and looks good. Let's go ahead and just get rid of some of these forms. Specifically all of them except for email and then just renaming them because we don't want a password, we don't log in, or any text links, so get rid of that and we're going to change email so don't worry about it now because it's still the same kind of field.

Let's go into newsletterNewForm.js and let's get rid of these items.

newsletterNewForm.js

    return (
      <form onSubmit={handleSubmit} className="new-newsletter-form">
        <FormTitle className="new-newsletter-form__title" text="Login" />
        <Field
          className="new-newsletter-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />        
      </form>
    );
  }
}

Now all we have is email, and this will allow us to do what we want to do with this later.

Before we end this video just quick we fix up one of our other forms. If we go to our registration form, you'll see this one's a bit messed up, but it's going to be the same exact width as our sign in form, so this is a really easy change.

All we have to do is take these columns and go into signup.scss and place it in here and then we'll just have to quickly throw in the specific placement of these items on the grid.

signup.scss

.sign-up-form {
    display: grid;
    grid-template-columns: [s] 1fr [input-s] 629px [input-e] 1fr [e];
    justify-items: center;

    &__title {
        width: 100%;
        margin-top: 6.6rem;
        grid-column: s/e;
    }
    &__fullname {
        margin-top: 7.7rem;
        grid-column: input-s/input-e;
    }

    &__unit,
    &__email,
    &__password  {
        margin-top: 4rem;
        grid-column: input-s/input-e;
    }

    &__create-account {
        margin-top: 8.8rem;
        grid-column: input-s/input-e;
    }
    &__text-links {
        margin-top: 5.2rem;
        grid-column: input-s/input-e;
    }
}

Now it's all good. Now last thing I'd like to do before we move on is basically just move these styles into their own file. Let's go to signin.scss and scroll down and let's grab the .new-newsletter-form styles, then we'll create a new file called newsletter-new-form.scss, then let's import it into our main.scss with @import 'newsletter-new-form';, and then paste our styles into our new file.

newsletter-new-form.scss

.new-newsletter-form {
    display: grid;
    grid-template-columns: [s input-s] 1020px [input-e] 1fr [s];

    &__title {
        width: 100%;
        margin-top: 6.6rem;
        grid-column: s/e;
    }
    &__email {
        margin-top: 7.7rem;
        grid-column: input-s/input-e;
    }
}

Everything's looking good in here. All we need to do now is fill out our new form a little bit, and create one more component which is a text area input, and then we will have created some really reusable components that we'll be able to reuse, like this form.

Let's commit our code.

git status
git add .
git commit -m "newsletter-new-form and placement on grid"

See you in the next video.

Resources

Code at this stage