Submit Instantly! Server Actions Form without Page Reload
Prompt
Create a single HTML file with embedded CSS and JS that demonstrates a Next.js-like Server Actions form submission using a simple mock server. The form should have fields for name and email, and submit without page reload, showing a loading state and success/error messages. Use only vanilla JavaScript (no framework) but style it with Tailwind CSS via CDN. The mock server should simulate a 1.5 second delay and return a success response.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この例は、ページリロードなしでServer Actions風のフォーム送信を実演します。バニラJSでフォーム送信をインターセプトし、入力検証、ローディングスピナー表示、1.5秒の遅延シミュレーション、成功/エラーメッセージ表示を行います。Tailwind CSSでクリーンでモダンな見た目にスタイリングしています。
Prompt Overview
This example demonstrates a Server Actions-like form submission without page reload. It uses vanilla JavaScript to intercept the form submit, validate inputs, show a loading spinner, simulate a 1.5-second delay, and display success or error messages. Styled with Tailwind CSS for a clean, modern look.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選