JavaScript

クリックイベントでお問い合わせフォームを表示させる方法

2021年1月14日

 

こんにちは、keiです。

 

JavaScriptを使ってボタンを押下時にフォームが出現するように実装してみました。

 

実装してみてわかったことを備忘録として簡単にまとめておこうと思います。

 

 

HTML

 

HTMLは、ボタンとフォームを作成します。

 

 HTML
<button id="button">お問い合わせボタン</button>
<form action="" id="form">
<p><textarea id="textarea" name="textarea" cols=50 rows=10 maxlength="500"></textarea></p>
<p><input id="submit" type="submit" value="送信"></p>
</form>

 

また、<textarea>タグで、テキストの入力ボックスの大きさを”行数””文字数”でそれぞれ指定しています。

 

  • cols=50 → テキストエリアの幅を50で指定
  • rows=10 → テキストエリアの高さを10で指定
  • maxlength=500 → 入力できる最大文字数を500までに指定

 

数値を変更することで、幅・高さを調整できます。

 

CSS

 

 CSS
#form {
display: none;
}

 

CSSファイルに「display:none;」を追加して、デフォルトではフォームを非表示にします。

 

ボタンを押した際にJavaScriptでCSSを「表示」に書き替えることで、ボタンクリック時に表示されるようにします。

 

JavaScript

 

JavaScriptは、ボタンがクリックされた時にフォームが表示する機能を作成します。

 

 JavaScript

var button = document.getElementById('button');

var form = document.getElementById('form');

button.addEventListener('click', function() {

        form.style.display = 'block';

    });

 

「click」のイベントを用いてます。第1引数には、イベントタイプを示す文字列「'click'」。

 

第2引数には無名関数「function()」を指定して、「{}」の中でフォームを表示するためのスタイル変更の処理を記述しています。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-JavaScript