フォームのプラグインを使って自動返信機能をつける

webサイト制作

今回はgoogle formのアドオン「Email Notifications for Google Forms」を使って自動返信機能をお手軽につけてみましょう。


返信するためのメールアドレス（Sender's Email）
送り主の名前（Sender’s Name）を入力します。
管理者への通知メールが不要であれば「通知先メールアドレス（Email Address(es) to Notify）」は空欄でも問題ありません。



ここのeditをクリックすると返信メールの本文の編集が可能です



フォームの入力者に自動返信メールを送る場合、ここで設定します




ferret-plus.com

 

別のページから遷移してスムーススクロールさせる

トップページからフォームページに遷移した際にスムーススクロールを使って、止まる位置の調整をします。

//現在のページURLのハッシュ部分を取得
let hash = location.hash;

if(hash){
$("html,body").stop().scrollTop(0);
setTimeout(function(){
let target = $(hash);
let position = target.offset().top - 250;
$("html, body").animate({scrollTop:position},300);
});
}
 

githubでreadmeファイルを作成する

Git ポートフォリオ制作

READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。
そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。

readmeに記載する物

  • プロジェクトのタイトル
  • プロジェクトの概要説明
  • プロジェクトのURL
  • サイトのスクリーンショット画像
  • 使用言語
  • 使用している機能
  • 目次
  • 過去の経歴など

 

https://github.com/0918nobita/Portfolio




マークダウン記法（md）
githubのreadmeはmd記法なので、md記法を使って書いていきましょう。
qiita.com

 

location.hashを使ってラジオボタンが選ばれた状態でページ遷移させる

JavaScript お問い合わせフォーム

javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することが出来ます。

今回の ポイント

  • トップページの「資料請求ボタン」と「お問い合わせボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ方のラジオボタンがcheckedの設定になっているようにし、それに対応したフォームだけが表示されるようにする
トップページにボタンを設置この時にIDを指定する
<a href="form/input.php#item_01">商品Aはこちら</a>
<a href="form/input.php#item_02">商品Bはこちら</a>
2.申し込みページ「input.php」
<p><input name="itemname" value="商品A" id="item_01" type="radio">商品A</p>
<p><input name="itemname" value="商品B" id="item_02" type="radio">商品B</p>

 

JavaScriptでcheckedの値を取得

window.addEventListener('DOMContentLoaded', function(e){
document.querySelector(location.hash).checked=true;
});

prop()メソッドを使ってラジオボタンが選ばれている時に対応しているフォームが表示されるようにする

「:checked」を使う事で、ラジオボタンやチェックボックスが選ばれている時に限った命令が出来ます。
jQueryでは「prop()メソッド」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。

//ラジオボタンがcheckedになったとき対応する.boxに.showを付与
$('input[type="radio"]').each(function(){
if($(this).prop('checked')){
$('#' + $(this).attr('href')).addClass('show');
}
});
 

郵便番号を入れると自動で住所が入る「yubinbango.js」

PHP お問い合わせフォーム

郵便番号を入れると自動的に住所が入るプラグインです。
使い方は非常に簡単で、基本的にはformのパーツにclassを付与するだけです。

1、まずformタグに指定されたclassを指定します。

 <form class="h-adr">

2、つぎにform中に、国名(p-country-name) をJapan に指定します

<span class="p-country-name" style="display:none;">Japan</span>


3、郵便番号入力欄のclass指定の中に class「p-postal-code 」を指定する

<input type="text" class="p-postal-code"  maxlength="8">

4、住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) をそれぞれしていする

 <input type="text" class="p-region p-locality p-street-address p-extended-address" >


丁目、以降は自身で入力してもらいます。


github.com

css maskプロパティを使って画像をマスクする

css

前回、やったbackground-clipでは画像をテキストの形でクリッピングしましたが、今回はcssのmask-imageを使って画像を別の画像でマスクしてみます。
テキストと違って、自由な形でマスク出来るので色々と試してみましょう。



マスク用の画像をsvgで作成します。


cssのmask-imageを使って、画像にマスクをかけます。



 

<div class="main-visual">
<img src="img/unsplash.jpg" alt="">
</div>

 

ベンダープレフィックスを忘れないように

.main-visual{
margin: 100px auto;
max-width: 960px;
height: 400px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
-webkit-mask-image: url(img/mask.svg);
-webkit-mask-repeat: no-repeat;
mask-image: url(img/mask.svg);
mask-repeat: no-repeat;
}

サイトをアニメーションで見せる

www.awesomescreenshot.com

 

や