Black contact form code for React

contact-form.jsx

import './contact-form.scss';

import Button from '../components/shared/btn'

import { useState } from 'react';

export default function ContactForm() {

// set show more state

const [showMore, setShowMore] = useState(false);

const moreClick = () => {

setShowMore(!showMore);

document

.querySelector('.footer__nav')

.scrollIntoView({ behavior: 'smooth',

                        block: "end", inline: "nearest"} );

};

const htmlForm = [

<form

key='contact-form'

className='contact-form'

action='mail.php'

method='POST'

>

<div className='contact-form__name'>

<label htmlFor='name'>Name</label>

<input

minLength='3'

maxLength='30'

type='text'

name='name'

id='name'

placeholder='First Name'

required

/>

</div>

<div className='contact-form__name'>

<label htmlFor='email'>E-mail</label>

<input

type='email'

name='email'

id='email'

placeholder='your@mail.address'

required

/>

</div>

<div className='contact-form__name'>

<label htmlFor='select'>{/*empty*/}</label>

<select id='select' required>

<option value=''>Where did you find us?</option>

<option value='friends'>Friends and family</option>

<option value='youtube'>YouTube video</option>

<option value='podcast'>Podcast</option>

<option value='ad'>Facebook ad</option>

<option value='others'>Others</option>

</select>

</div>

<div className='contact-form__name'>

<label htmlFor='email-sub'>E-mail newsletter?</label>

<input

type='checkbox'

name='email-sub'

id='email-sub'

value='sign-me-up'

defaultChecked

/>

</div>

<div className='contact-form__input'>

<textarea

name='subject'

id='subject'

cols='30'

rows='5'

placeholder='Contact us! Type message here...'

></textarea>

</div>

<input className='btn' type='submit' value='Submit' />

</form>,

];

return (

<>

{htmlForm}

{showMore ? htmlForm : !htmlForm}

<Button

id={'contact'}

className={'btn--animation'}

value={'Contact Us!'}

onClick={moreClick}

/>

</>

);

}

contact-form.scss

$color-a: rgb(255, 255, 255);

$color-hover: rgb(255, 0, 0);

$color-input-textarea: rgb(80, 80, 80);

$color-outline-border: #810000;

$font-family: Arial, Helvetica, sans-serif;

$transition: all 500ms ease-in-out;

.contact-form {

margin: auto; // center form when <main> flex-direction: column

color: #999;

display: flex;

flex-wrap: wrap;

font-size: 2rem;

.contact-form__input {

text-align: center;

width: 100%;

p {

display: inline;

}

textarea {

padding: 1rem;

border-radius: 1rem;

font-size: 2rem;

width: 94%;

}

}

.contact-form__name {

margin: 0 2rem;

padding: 1rem 1rem;

width: 40%;

flex: 1 1 auto; // makes "where" inline

input {

margin: 0 1rem;

border-radius: 1rem;

font-size: 2rem;

line-height: 3rem;

width: 80%;

}

}

::placeholder {

color: $color-input-textarea;

font-family: $font-family;

opacity: 1;

text-align: center;

}

input,

textarea {

background: black;

border-color: #333;

color: rgb(220, 220, 220);

}

input:checked,

textarea:checked {

background: $color-input-textarea;

}

input:focus,

select:focus,

textarea:focus {

background: $color-input-textarea;

border-color: $color-hover;

outline: 1px solid $color-outline-border;

}

input[type='radio'],

input[type='checkbox'] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

border-radius: 50%;

border: 2px solid $color-outline-border;

width: 1.6rem;

height: 1.6rem;

margin-right: 1rem;

transition: $transition;

}

input:checked[type='radio'],

input:checked[type='checkbox'] {

border: 0.8rem solid $color-outline-border;

}

input[type='submit'] {

margin: 0 auto; // center

color: $color-a;

font-size: 2rem;

width: 50%;

}

input:active[type='submit'] {

color: $color-a;

background-color: $color-a;

box-shadow: 0 0 0.5rem 0.1rem;

}

input:hover[type='submit'] {

color: $color-hover;

transform: scale(1.2);

// background-color: $color-a;

// transition: $transition;

}

}

//////////////////////////////////////

#select {

padding: 0 0;

background-color: rgb(0, 0, 0);

border-color: #333;

border-radius: 1rem;

color: #999;

font-size: 2rem;

}

////////////////////////////// @media

@media screen and (max-width: 640px) {

.contact-form {

display: inline;

text-align: center;

.contact-form__name {

width: 100%;

input {

width: 100%;

}

}

input[type='radio'],

input[type='checkbox'] {

transform: scale(0.4);

}

input:checked[type='radio'],

input:checked[type='checkbox'] {

transform: scale(0.4);

}

}

}

https://codepen.io/bobbykorec/pen/qOGbyr

https://dev.to/amiinequ/how-to-create-a-contact-form-in-react-js-for-beginners-3571

https://herotofu.com/solutions/guides/react-contact-form

https://mailtrap.io/blog/react-contact-form/

https://nextjs.org/docs/guides/building-forms

https://react-bootstrap.github.io/forms/form-control/

https://freefrontend.com/css-contact-forms/

https://wpforms.com/beautiful-contact-form-designs-you-can-steal/