I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this?
Relevant Code
<form className='contact-form' onSubmit={this.handleSubmit}>
Fields marked with an <span className='red'>∗</span> are mandatory.
<div className='form-item'>
<label htmlFor="name">Name <span className='red'>∗</span></label>
<input className='name'
type="text"
name="name"
value={this.state.name}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="email">Email <span className='red'>∗</span></label>
<input className='email'
type="email"
name="email"
value={this.state.email}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="subject">Subject <span className='red'>∗</span></label>
<input className='subject'
type="text"
name="subject"
value={this.state.subject}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="message">Message <span className='red'>∗</span></label>
<textarea name='message'
rows='8'
value={this.state.message}
onChange={this.handleChange}
required />
</div>
<button className='btn' type='submit' disabled={this.state.disabled}>Submit</button>
<div className={this.state.isSent ? 'message-open':'message'}>Your message has been sent.</div>
</form>