BlueGriffon で簡単な お問い合わせフォーム の作り方
BlueGriffon で簡単な お問い合わせフォーム の作り方を紹介します。
BlueGriffonを起動
「新規作成」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 1 BlueGriffonを起動し「新規作成」をクリック](https://jikuu.info/wp-content/uploads/2021/07/create-new.jpg)
「Dual View」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 2 「Dual View」をクリック](https://jikuu.info/wp-content/uploads/2021/07/dual-view-1024x388.jpg)
デザイン画面とソースコード画面を同時に表示する機能
「index.html」で保存
CSSの作成
「パネル」「スタイルシート」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 3 「パネル」「スタイルシート」をクリック](https://jikuu.info/wp-content/uploads/2021/07/style-sheet.jpg)
スタイルシートを追加(+)をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 4 スタイルシートを追加(+)をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/style-sheet2.jpg)
「文書からリンクする」「新しいファイル」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 5 文書からリンクする URLをページ相対にする にチェックを入れ 新しいファイル をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/style-properties.jpg)
index.htmlと同じフォルダにstyle.cssで保存
<form>で入力フォームを作る
「挿入」「フォーム」「フォーム」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 6 「挿入」「フォーム」「フォーム」をクリック](https://jikuu.info/wp-content/uploads/2021/07/form.jpg)
「URL:confirm.php」「POST」を選択して「OK」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 7 「URL:confirm.php」「POST」を選択して「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/confirm.jpg)
![BlueGriffon で簡単な お問い合わせフォーム の作り方 8 「URL:confirm.php」「POST」を選択して「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/confirm2.jpg)
<label>タグで関連付け
<label>タグとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。
ブラウザでラベルをクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。
「挿入」「フォーム」「ラベル」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 9 「挿入」「フォーム」「ラベル」をクリック](https://jikuu.info/wp-content/uploads/2021/07/label.jpg)
「コントロールのID:name」を入力して「OK」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 10 「コントロールのID:name」を入力して「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/name2.jpg)
「挿入」「フォーム」「入力」「文字入力」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 11 「挿入」「フォーム」「入力」「文字入力」をクリック](https://jikuu.info/wp-content/uploads/2021/07/character-input.jpg)
「名前:お名前」と入力し「OK」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 12 「名前:お名前」と入力し「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/name.jpg)
<input>へCSS(スタイルシート)を指定するには、id属性を使います。
<input>へ名前を付け、スタイルシートを指定します。
<input>をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 13 input](https://jikuu.info/wp-content/uploads/2021/07/input.jpg)
<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 14 を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
「大きさ」「幅:700px」「高さ:25px」と入力し「Please enter an ID」に「name」と入力してokクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 15 「大きさ」「幅:700px」「高さ:25px」と入力し「Please enter an ID」に「name」と入力してokを押す。](https://jikuu.info/wp-content/uploads/2021/07/name3.jpg)
メールアドレスの設定
メールアドレスも同様に設定します。
「挿入」「フォーム」「ラベル」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 9 「挿入」「フォーム」「ラベル」をクリック](https://jikuu.info/wp-content/uploads/2021/07/label.jpg)
「コントロールのID:mail」を入力して「OK」をクリック
「挿入」「フォーム」「入力」「メールアドレス」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 17 「挿入」「フォーム」「入力」「メールアドレス」をクリック](https://jikuu.info/wp-content/uploads/2021/07/mail.jpg)
「名前:メールアドレス」と入力し「OK」をクリックします。
![BlueGriffon で簡単な お問い合わせフォーム の作り方 18 「名前:メールアドレス」と入力し「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/mail2.jpg)
<input>へ名前を付け、スタイルシートを指定します。
<input>をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 13 input](https://jikuu.info/wp-content/uploads/2021/07/input.jpg)
<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 20 id](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
「大きさ」「幅:700px」「高さ:25px」と入力し「Please enter an ID」に「mail」と入力してokをクリック
「お問い合わせ内容」の設定
「挿入」「フォーム」「ラベル」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 21 「挿入」「フォーム」「ラベル」をクリック](https://jikuu.info/wp-content/uploads/2021/07/label.jpg)
「コントロールのID:text」を入力して「OK」をクリック
「挿入」「フォーム」「文字入力」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 22 「挿入」「フォーム」「文字入力」をクリック](https://jikuu.info/wp-content/uploads/2021/07/text.jpg)
「名前:お問い合わせ内容」と入力し「OK」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 23 「名前:お問い合わせ内容」と入力し「OK」をクリック](https://jikuu.info/wp-content/uploads/2021/07/textarea.jpg)
<textarea>へ名前を付け、スタイルシートを指定します。
<textarea> をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 24](https://jikuu.info/wp-content/uploads/2021/07/textarea2.jpg)
<textarea> を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 14 を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
「大きさ」「幅:700px」「高さ:100px」と入力し「Please enter an ID」に「text」と入力してokをクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 26 「大きさ」「幅:700px」「高さ:100px」と入力し「Please enter an ID」に「text」と入力してokをクリック](https://jikuu.info/wp-content/uploads/2021/07/text2.jpg)
「入力内容確認」の設定
「挿入」「フォーム」「入力」「送信ボタン」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 27 「挿入」「フォーム」「入力」「送信ボタン」をクリック](https://jikuu.info/wp-content/uploads/2021/07/submit.jpg)
<input>へ名前を付け、スタイルシートを指定します。
<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 14 を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
「大きさ」「幅:300px」「高さ:30px」と入力し「Please enter an ID」に「submit」と入力してokをクリック
![BlueGriffon で簡単な お問い合わせフォーム の作り方 29 「大きさ」「幅:300px」「高さ:30px」と入力し「Please enter an ID」に「submit」と入力してokをクリック](https://jikuu.info/wp-content/uploads/2021/07/submit2.jpg)
こんな感じになります。
![BlueGriffon で簡単な お問い合わせフォーム の作り方 30 BlueGriffonで簡単な「お問い合わせフォーム」の作り方](https://jikuu.info/wp-content/uploads/2021/07/otoiawase.jpg)
ディスカッション
コメント一覧
まだ、コメントがありません