HTMLだけでコンタクトフォーム(お問い合わせフォーム)を作る方法
HTML-код
- Опубликовано: 8 сен 2024
- #HTML #CSS #コンタクトフォーム #入門 #チュートリアル
★さらに深くプログラミングを学びたい方へ(Udemy割引クーポン)★
shincode.info/2...
＼ShinCode_Campで学びを加速させよう／
突き抜けたプログラミングの知識を得るためのプラットフォーム
🎁月額2500円でプログラミング講座が見放題
🎁分からない箇所は質問し放題
🎁コミュニティ機能付き
🎁いつでも解約可能
↓↓↓↓↓
code-s-school-...
🌠【募集】Web開発/Web制作を頼みたい方はこちらのリンクからお問い合わせください🌠
↓↓↓↓↓
worldhacks.co.jp/
＼Webスキルが付いたらWebエンジニアに挑戦してみよう／
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
www.wantedly.c...
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → worldhacks.co.jp/
【この動画を視聴するメリット】
・HTMLだけでコンタクトフォーム（お問い合わせフォーム）が作れる
・staticformsの使い方が理解できる
・簡易的にお問い合わせフォームを設置できる
※注意点
アクセスコードはinputをhidden属性にしてもソースコードを覗けば見られる状態になります。今のところ対策方法はありません。
セキュアなフォームを作成したい場合はphpでフォームを作った方が無難です。悪魔でも簡易的に作りたい、あとでちゃんとしたフォームに変更する！という考えの元で利用してください。ご了承ください。
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数：150以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★私が運営する公式LINEに登録してお得な情報を受け取ろう★
lin.ee/uGqCYMm
豪華登録3大特典をご用意🎁
①私が作成したUdemy講座の92%割引クーポンを全てプレゼント🎁
②新規Udemy講座発表のお知らせと92%割引クーポン配布
③未経験でもプログラミングの副業で堅実に月収＋1万円を目指せるテクニック（準備中）
①でご用意しているUdemy講座一覧👇
・React×Trelloクローン開発講座
・React×Firebaseでツイッタークローン開発講座
・Three.js入門：モダンな3Dウェブサイト開発講座
好きな講座を好きなだけお選びください。
★今回のソースコード★
github.com/Shi...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
たすかります
これやりたかったやつだ まじでありがとうございます！
分かりやすかったです。ありがとうございます。最後の｢ラジオボタンの結果｣送信方法も教えてくれると良かったのですが、それは今でも分からないですか？
拝見してとても参考になりました。HTMLで作るとなると、セキュリティ上ではあまり推奨されるものではないのでしょうか。なにか対策の方法などがあれば教えて頂けますでしょうか？よろしくお願い致します。
コメントありがとうございます。
そうですね、hidden属性はソースコードを見るとvalue属性が見えてしまいます。
なのでアクセスコードが見られてしまうことになります。それを利用して迷惑メール等を送られる可能性があるでしょう。
本来であればphpを利用してセッション変数などで管理するのが1番です。
ですので、セキュリティ対策を万全にしたいのであればphpでフォームを作るのが無難だと思います。
htmlやcss等のレイアウトはそのまま使えます。staticフォームは簡易的に素早く設置したいときに利用すると良いかもしれません。
初心者でHPを作っているので非常に助かりました。
ありがとうございます。
1つ質問なのですが、type=hiddenとした時にvalueにあるコードは外部からは見えないのでしょうか？
試しに作ってみたのですが、検証ツールでHTMLのコードを開いたら自分のPCからはvalue設定してあるキーコードが見ることが出来ました。
すみません、初心者なので変な質問でしたらごめんなさい🙇♂️
お問合せフォームを作りたかったので大変助かりました。
私の html/css の能力では、まだ着いて行けないところがありますが、有難うございます。
添付ファイル機能を付けるのは難しいですか？
motoakiさん、ご視聴ありがとうございます。
添付ファイルですとinputタグのtype属性に
type="file"と付け足すだけで実装できます。
@@programming_tutorial_youtube
早速のお返事 有難うございます。
今度はサイドバーにチャレンジします。
こんにちは、初心者でも大変助かります。ありがとうございます。
一つ質問なんですが、添付ファイルですとinputタグのtype属性にtype="file"と付け足したが、メールに届けない状態です。届ける内容はname,email,messageしかありませんが。どうすれば良いでしょうか。
ご回答の程、宜しくお願い致します。
作業しながらリロードしなくても進捗状況が更新されるのってどうやっていますか？
名前やメールアドレスのテキスト欄を、「お名前」「メールアドレス」の下に持ってくるには、どうすればいいでしょうか？
完了画面作成はどのようにしたら良いでしょうか
こんにちは。とてもタメになります。本当にありがとう御座います。
もしよろしければ、一つ教えて頂きたい事が御座います。
メール送信後の画面なのですが、
黒い画面に{"message":"Email Sent","success":true}
と表示します。送信者はホームページに戻れず困るかな、と思ったのですが。
ホームページに戻るボタンなど、自動で戻る機能などは付けられませんでしょうか。
お忙しい所すみません。
どうかご教授願います。
ホームへのリダイレクトであれば
window.location.href = "/"
のような書き方も存在しますが、どのようなフロントの設計になっているのか分からないので、お答えすることが難しいです、、すみません。
ただページを変更せずに、送信したら成功のメッセージだけを同じページに表示すれば良いと思います。
@@programming_tutorial_youtube
ご丁寧な解説を有難う御座いました。
私も送信者をホームページに戻したいと考えておりますが、上手くできません。
先に挙げられた、送信後にホームページとどまり続けるには、どうすれば良いでしょうか。
ご回答の程、宜しくお願い致します。
それなら簡単です
form内にinput type="hidden" name="redirectTo" value=" でできます
スペルミスがあったらすみません😢
飛びたいリンクにそのページのリンクでも貼ればホームページに飛ぶこともできますし"送信完了"というページに飛ばすことも可能です
メッセージ送信後の画面を変えることってできますか？
メッセージを送信しました。というように表示したいのですが…
こんにちは😊 とてもわかりやすく参考になってます！「"メッセージ："認証トークンがありませんの原因てわかられますか？😢
apiキーが正常にセットされていない可能性がありますので、ご確認いただけると良いと思います。
{"success":false,"message":"Please provide a valid access key"}と出てしまい送信できません。同じメールアドレスは使えないので、新しいアクセキーは作れません。解決方法はありますか?
アクセスキーは正常にセットしていますでしょうか。もしセットしてもダメであればアカウントをもう１つ作成してアクセスキーを取得するしかないでしょう。
今回もご視聴ありがとうございます。
これにサーバー側のスキルなしで実際に送ったりする機能を付けれたりはしますでしょうか
キーコードが送られてきません何故でしょうか？
届いたメールに予約席と質問内容がないのはなぜですか？
25:24 で解説してますよ！