【React】簡単なお問い合わせフォームの実装｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでお問い合わせフォームを実装する手順
- 2.1 コンタクトフォームコンポーネントを作成する
- 2.2 トップページコンポーネントを修正する
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11
chart.js:4.4.0
react-chartjs-2:5.2.0

Reactでお問い合わせフォームを実装する手順

Reactでお問い合わせフォームを実装する手順を解説します。

コンタクトフォームコンポーネントを作成する

まずはコンタクトフォームコンポーネントを作成します。

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import CircularProgress from "@mui/material/CircularProgress";

const ContactForm: React.FC = () => {
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [emailSent, setEmailSent] = useState(false);
    const [isSending, setIsSending] = useState(false);

    const sleep = (waitTime: number) => new Promise( resolve => setTimeout(resolve, waitTime));

    const handleEmailchange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setEmail(event.target.value);
    };

    const handleMessagechange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setMessage(event.target.value);
    };

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        try {
            setIsSending(true);
            // 送信する処理
            await sleep(5000);
            console.log("メールが送信されました。")
            // メール送信が終わったあと
            setEmailSent(true);
        } catch (error) {
            console.log(error);
        } finally {
            setIsSending(false);
        };
        console.log('送信されたメール：', email)
        console.log('送信されたメッセージ：', message)
    };

    return(
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Typography component="h2" variant="h2">
                        Contact
                    </Typography>
                </Grid>
                <Grid item xs={12} md={12}>
                    {emailSent ? (
                        <Box sx={{ width: "100%", textAlign: "center" }}>
                            メールが送信されました。
                        </Box>
                    ) : (
                        <Stack sx={{ width: "100%" }} component="form" spacing={2} onSubmit={handleSubmit} autoComplete="off">
                            <TextField required fullWidth label="メールアドレス" name="email" variant="outlined" value={email} onChange={handleEmailchange} />
                            <TextField required fullWidth multiline rows={4} label="お問い合わせ内容" name="message" variant="outlined" value={message} onChange={handleMessagechange} />
                            {isSending ? (
                                <Button variant="contained" color="primary">
                                    <CircularProgress />
                                </Button>
                            ) : (
                                <Button type="submit" variant="contained" color="primary">
                                    送信
                                </Button>
                            )}
                        </Stack>
                    )}
                </Grid>
            </Grid>
        </>
    );
};

export default ContactForm;

import React, { useState } from "react";

import Box from "@mui/material/Box";

import Grid from "@mui/material/Grid";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

import Stack from "@mui/material/Stack";

import TextField from "@mui/material/TextField";

import CircularProgress from "@mui/material/CircularProgress";

const ContactForm: React.FC = () => {

const [email, setEmail] = useState('');

const [message, setMessage] = useState('');

const [emailSent, setEmailSent] = useState(false);

const [isSending, setIsSending] = useState(false);

const sleep = (waitTime: number) => new Promise( resolve => setTimeout(resolve, waitTime));

const handleEmailchange = (event: React.ChangeEvent<HTMLInputElement>) => {

setEmail(event.target.value);

};

const handleMessagechange = (event: React.ChangeEvent<HTMLInputElement>) => {

setMessage(event.target.value);

};

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {

event.preventDefault();

try {

setIsSending(true);

// 送信する処理

await sleep(5000);

console.log("メールが送信されました。")

// メール送信が終わったあと

setEmailSent(true);

} catch (error) {

console.log(error);

} finally {

setIsSending(false);

};

console.log('送信されたメール：', email)

console.log('送信されたメッセージ：', message)

};

return(

Contact

</Typography>

</Grid>

{emailSent ? (

メールが送信されました。

</Box>

) : (

{isSending ? (

</Button>

) : (

送信

</Button>

)}

</Stack>

)}

</Grid>

</>

);

};

export default ContactForm;

疑似的にメール送信中であることを表現するために16行目でsleep関数を定義し、32行目で5秒待機するようにしています。

ポイントは18行目の「handleEmailchange」でEmailの入力状況をStateで状態管理、22行目の「handleMessagechange」でメッセージの入力状況をStateで状態管理しています。

あとはSubmitが推された場合に「handleSubmit」が呼び出されてメールを送信する処理が実行されますが、submitイベントの発生元であるフォームが持つデフォルトの動作をキャンセルするために「event.preventDefault();」を忘れないようにしましょう。

また、12行目の「emailSent」はメールの送信結果、13行目の「isSending」はメールの送信中であるかを状態管理しています。

その結果によって54行目以降のお問い合わせフォームの表示を切り替えられるようにしています。

トップページコンポーネントを修正する

最後にトップページコンポーネントを修正します。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"
import SkillList from "../../components/SkillList"
import ProductionList from "../../components/ProductionList"
import ProfileList from "../../components/ProfileList";
import ContactForm from "../../components/ContactForm";

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <SkillList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ProductionList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ProfileList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ContactForm />
                </Container>
            </Box>
        </>
    );
};

export default Top;

import MV from "../../assets/images/mv.jpg"

import SkillList from "../../components/SkillList"

import ProductionList from "../../components/ProductionList"

import ProfileList from "../../components/ProfileList";

import ContactForm from "../../components/ContactForm";

const Top: React.FC = () => {

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

</>

ContactFormコンポーネントをインポートし、お問い合わせコンテンツでContactFormコンポーネントを呼び出す形にしています。

おわりに

Reactでお問い合わせフォームを実装する手順を解説していきましたが、いかがだったでしょうか。

Webサイトのお問い合わせフォームはユーザーが運営側にコンタクトをとれる重要なコンテンツになりますので、入力内容のバリデーションやメール送信前に確認画面を表示させるなども検討するともっと良いかと思います。

是非、Reactでモダンでおしゃれなお問い合わせフォームを作っていきましょう。