PHP없이 문의 양식 작성

3670 단어 HTML
요 전날 자신의 포트폴리오를 업무 위탁처에 건네기 전에 재작성하려고 생각했습니다.
하지만 PHP로 문의 양식을 구현하는 것이 어색합니다.
PHP 파일, MAMP 시작,,,
지금의 PF로 한 후 일시 google 폼을 묻는 스타일로 했는데, 코더, 엔지니어의 PF로 하기에는 안 좋을까,, 라고.

그리고 조사해 보면 html만으로도 구현할 수 있는 방법이.

Simple HTML from your website 사용하기



Simple HTML form for your website
필요한 것은 위 사이트의 Create Access Key에서 액세스 키를 얻고 양식에 넣는 것입니다.


치트입니다. 오히려 google form보다 속임수일지도 모른다.
외형만으로도 , 라고 사람이라면 일단 이 방법이라도 좋지 않을까, , 라고 생각합니다. (하지만 한 번은 php로 만들어 보는 것이 좋다고는 생각합니다만)
<form action="https://api.staticforms.xyz/submit" method="post">
        <input type="text" name="name" placeholder="Your Name">
        <input type="text" name="email" placeholder="Your Email" />
        <textarea name="message"></textarea>
        <input type="hidden" name="accessKey" value="取得したアクセスキー">
        <input type="hidden" name="redirectTo" value="リダイレクトしたい画面のurl">
        <input type="submit" value="Submit" />
</form>

조심해야 할 것이,
리디렉션 대상을 상대 패스로 써 버리면 능숙하지 않습니다.
https~에서 써 봅시다.

리디렉션 대상은 별도로 파일을 준비했습니다.
같은 폴더 안에 success.html을 만들고 리디렉션 할 value에 넣습니다.
같은 홈으로 돌아와 JS에서 경고가 표시되도록 해도 좋을까 생각합니다.
css는 잘 써주세요.



참고로,
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>お問合せ</h1>
    <form action="https://api.staticforms.xyz/submit" method="post">
      <input type="text" name="name" placeholder="Your Name" />
      <input type="text" name="email" placeholder="Your Email" />
      <textarea name="message"></textarea>
      <input type="hidden" name="accessKey" value="取得したアクセスキー" />
      <input
        type="hidden"
        name="redirectTo"
        value="リダイレクトしたい画面のurl"
      />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

style.css
h1 {
  text-align: center;
}
form {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0 auto;
}

input,
textarea {
  margin-top: 10px;
}

success.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>送信完了</title>
  </head>
  <body>
    <p>送信が完了しました</p>
    <button class="back__btn">
      <a href="ホームのurl">戻る</a>
    </button>
  </body>
</html>

시간이 없어~! 라고 때는 시도해 주세요.
WEBrick을 사용하여 동적 html을 반환합니다 (~ GET과 POST의 차이 ~)
Github의 개인 액세스 토큰을 사용해 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage