質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Sinatra

Sinatraは、Rubyで作られた オープンソースのWebアプリケーションフレームワークです。

Q&A

0回答

765閲覧

erbを使ったお問い合わせページの作成

Shoki0519

総合スコア1

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Sinatra

Sinatraは、Rubyで作られた オープンソースのWebアプリケーションフレームワークです。

0グッド

1クリップ

投稿2020/10/18 13:22

編集2022/01/12 10:55

app.rb
/ に GET でアクセスするときは views/contact.erb を、POST でアクセスするときは views/complete.erb を表示するように修正してください。

views/contact.erb。

form の送信先を / に変更してください
form の送信手段を POST にしてください

views/complete.erb

戻るボタンをクリックしたら/ へ遷移するように変更してください
5つの項目すべて表示するようにしてください

Sinatra,pumaを使っています。
分かりにくかったらすみません。 ご教授お願いします
自分でコードを考えて書いてみたり、googleにて調べました。がどうしても書けないので質問させていただきます。

下から順番にcontact.erb complete.erb  app.rb となります

ruby

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 9 10 <title>お問い合わせ | サンプル株式会社</title> 11</head> 12 13<body> 14 15 <header> 16 17 <nav class="navbar navbar-light bg-light navbar-expand-sm"> 18 <a href="#" class="navbar-brand">サンプル株式会社</a> 19 20 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 24 <div class="collapse navbar-collapse" id="nav-bar"> 25 <ul class="navbar-nav"> 26 <li class="nav-item"><a href="#" class="nav-link">会社情報</a></li> 27 <li class="nav-item"><a href="#" class="nav-link">ニュース</a></li> 28 <li class="nav-item"><a href="#" class="nav-link">採用情報</a></li> 29 <!-- お問い合わせページを表示していることをわかりやすくする設定を追加 --> 30 <li class="nav-item active"><a href="#" class="nav-link">お問い合わせ</a></li> 31 </ul> 32 </div> 33 </nav> 34 </header> 35 <div class="container"> 36 <h1 class="mt-4 pb-4 border-bottom">お問い合わせ</h1> 37 38 39 <div class="row mt-4"> 40 <div class="col-sm-3"> 41 42 <i class="fas fa-phone"></i> <strong>お電話:</strong> 43 </div> 44 45 46 <div class="col-sm-9"> 47 <p class="table">該当する内容の電話番号におかけください。</p> 48 <table class="table table-striped table-bordered mt-4"> 49 <thead> 50 <tr> 51 <th>内容</th> 52 <th>電話番号</th> 53 <th>担当</th> 54 </tr> 55 </thead> 56 <tbody> 57 <tr> 58 <td>サービスに関するお問い合わせ</td> 59 <td>03-0000-0000</td> 60 <td>煌木</td> 61 </tr> 62 <tr> 63 <td>採用に関するお問い合わせ</td> 64 <td>03-0000-0001</td> 65 <td>煌田</td> 66 </tr> 67 <tr> 68 <td>サービスに関するお問い合わせ</td> 69 <td>03-0000-0002</td> 70 <td>煌山</td> 71 </tr> 72 </tbody> 73 </table> 74 <div class="card"> 75 76 <div class="card-header"> 77 > 78 <i class="fas fa-info-circle"></i> 営業時間 79 </div> 80 81 82 <div class="card-body"> 83 平日10時〜19時(土日・祝日は対応しておりません) 84 </div> 85 </div> 86 </div> 87 </div> 88 89 90 <div class="row mt-4"> 91 <div class="col-sm-3"> 92 <i class="far fa-envelope"></i> <strong>メール:</strong> 93 </div> 94 95 <div class="col-sm-9"> 96 <p> 97 プライバシーポリシーをご確認いただき、ご同意の上で、送信ボタンをクリックしてください。<br /> 98 お問い合わせの内容は、受付日から3営業日以内をめどにご返信いたします。 99 </p> 100 <form action="/" method="POST"> 101 <div class="form-group row"> 102 <label class="col-sm-3 col-form-label">会社名:</label> 103 104 <div class="col-sm-9"> 105 <form action="/" method="POST"> 106 <input type="text" class="form-control" required name="company" > 107 </div> 108 </div> 109 110 <div class="form-group row"> 111 <label class="col-sm-3 col-form-label">氏名:</label> 112 <div class="col-sm-9"> 113 <form action="/" method="POST"> 114 <input type="text" class="form-control" required name="name" > 115 </div> 116 </div> 117 <div class="form-group row"> 118 <label class="col-sm-3 col-form-label">メール:</label> 119 120 <div class="col-sm-9"> 121 <form action="/" method="POST"> 122 <input type="text" class="form-control" required name="mail"> 123 </div> 124 </div> 125 126 <div class="form-group row"> 127 <label class="col-sm-3 col-form-label">電話番号:</label> 128 129 <div class="col-sm-9"> 130 <form action="/" method="POST"> 131 <input type="text"class="form-control" required name="tel" > 132 </div> 133 </div> 134 135 <!-- ラベルとフォーム部品を並べるためにグリッドを使う指定を追加 --> 136 <div class="form-group row"> 137 <!-- 576px以上の画面幅のとき、ラベルは3つ分のカラム幅で表示する指定を追加 --> 138 <label class="col-sm-3 col-form-label">内容:</label> 139 140 <!-- 576px以上の画面幅のとき、フォーム部品は9つ分のカラム幅で表示する指定を追加 --> 141 <div class="col-sm-9"> 142 <form action="/" method="POST"> 143 <textarea class="form-control" required name="content"></textarea> 144 </div> 145 </div> 146 147 <!-- ラベルとフォーム部品を並べるためにグリッドを使う指定を追加 --> 148 <div class="form-group row"> 149 <!-- 576px以上の画面幅のとき、3つ分のカラム幅の隙間を表示する設定を追加 --> 150 <!-- さらに、576px以上の画面幅のとき、9つ分のカラム幅で送信ボタンの表示部分の設定を追加 --> 151 <div class="offset-sm-3 col-sm-9"> 152 <!-- 送信ボタンを緑色にする設定を追加 --> 153 <!-- さらに、送信ボタンは、指定のカラム幅に対して100%の幅となる設定を追加 --> 154 <button type="submit" class="btn btn-success btn-block"> 155 <label>お問い合わせ内容を送信する </label></form></button> 156 </div> 157 </div> 158 </form> 159 </div> 160 </div> 161 </div> 162 <footer class="text-center pt-3 border-top"> 163 &copy; 2018 SAMPLE Inc. 164 </footer> 165 166 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 167 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> 168 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 169 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 170</body> 171 172</html>

ruby

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 9 10 <title>送信完了 | サンプル株式会社</title> 11</head> 12 13<body> 14 <header> 15 <!-- 576px以上の画面幅のとき、メニューを表示する(それ未満なら折りたたむ)指定を追加 --> 16 <nav class="navbar navbar-light bg-light navbar-expand-sm"> 17 <!-- 画面左上に表示するサイト名のリンクとして適切な表示をするための指定を追加 --> 18 <a href="#" class="navbar-brand">サンプル株式会社</a> 19 20 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 24 <div class="collapse navbar-collapse" id="nav-bar"> 25 <ul class="navbar-nav"> 26 <li class="nav-item"><a href="#" class="nav-link">会社情報</a></li> 27 <li class="nav-item"><a href="#" class="nav-link">ニュース</a></li> 28 <li class="nav-item"><a href="#" class="nav-link">採用情報</a></li> 29 <!-- お問い合わせページを表示していることをわかりやすくする設定を追加 --> 30 <li class="nav-item active"><a href="#" class="nav-link">お問い合わせ</a></li> 31 </ul> 32 </div> 33 </nav> 34 </header> 35 <div class="container"> 36 <h1 class="mt-4 pb-4 border-bottom">送信完了</h1> 37 <p>ありがとうございました。送信を受け付けました。</p> 38 <p>3営業日以内をめどにご返信いたしますので、しばらくお待ちください。</p> 39 <h2>送信内容</h2> 40 <p>会社名</p> 41 <% name = params['company'] %> 42 <div class="text-center mb-4"> 43 44 <!-- 「戻る」ボタンを緑色にする設定を追加 --> 45 <a href="contact.html" class="btn btn-success">戻る</a> 46 </div> 47 </div> 48 <footer class="text-center pt-3 border-top"> 49 &copy; 2018 SAMPLE Inc. 50 </footer> 51 52 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 53 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> 54 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 55 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 56</body> 57 58</html>

ruby

1require 'sinatra' 2get '/' do 3 erb :contact 4end 5 6post '/' do 7 erb :complete 8end

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gouf

2020/10/18 14:02

現在までに記述済みのコードは公開できますか? コードを基準に質問・回答をしたほうが、より正確なやり取りになると思います。
Shoki0519

2020/10/18 15:42

Bootstrapで書いたものに 少しだけ加筆しただけなので必要ないかと思いますがやはりいるものなのでしょうか?
m.ts10806

2020/10/18 23:30

見ている人は赤の他人 全ての人が同じ要件に対して同じコードを組むわけではないですよ。 「必要かどうか」を判断するのは質問者ではなく回答者です 回答に必要な情報がないから求められています
no1knows

2020/10/19 00:14 編集

「sinatra お問い合わせフォーム」で検索して、良さそうな記事の内容を実装して、それでわからなければ該当箇所を質問することをおすすめします。
no1knows

2020/10/19 07:17

今現在、何ができていて、何ができていないのかを書くと回答が付きやすいと思います。
Shoki0519

2020/10/19 07:23

今のところほぼなにも出来ていないです。 app.rbを書いたり、form action'/' method=POSTを書いたくらいです。
no1knows

2020/10/19 07:45 編集

Sinatraはよくわかっていませんが、ひとまず下記記事のはじめにの1から順にやってみると良いのではないでしょうか? https://qiita.com/ms2sato/items/a027ca729bb3997a86ec それをやってみてうまくできなければ、「ここをこのようにしたけどうまくできなかった」ので教えてほしいというのが良い流れかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問