ワンクリックで購入できるようなランディングページを作成してみた 3

2018/02/28 2018/02/28

続き～

フォーム入力ページを編集を引き続き変更します！

<div>
<input type="text" id="mfp_shopping_cart_value" name="ご注文商品" required="required" data-norequired="1">
</div>

<div>

</div>

をコメントアウト
（商品名(単価) ・数量・小計を表示する枠の下にさらに
商品名を表示しているヘンな枠があるから見えないようにするため）

フォームの入力項目を編集

必要ない入力項目をいきなり削除せず、閉じタグに気をつけて、必要な項目だけを上に並べかえるほうが安全。あとでやっぱりってときに復帰できるから。

こんな感じ↓

フォームの送信テストをして送信に問題なければ、
cgiconfig.cgi　内のメール内容の編集

自動返信メール、自分に届くメールの内容を修正ね。
署名欄は変更必須！　シンカグラフィカ様に迷惑かかっちゃいますヨ！

Items.tsvファイルを編集してアップロード　価格チェック

インストールドメイン/mailformpro/configs/PayPal.cgi内の

$config{'file.PayPalItemSecureMatch'} = './configs/Items.tsv';

1	$config{'file.PayPalItemSecureMatch'} = './configs/Items.tsv';

行頭の「＃」とる

フォーム入力画面
(ここはオリジナル～　説明ページ作るの面倒だからそれぞれの項目に説明いれてみた)

送料・paypal決済画面　ポップアップで説明入れる

<!-- 折り畳み展開ポインタ --> 
 <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';"> 
 <a style="cursor:pointer;">▼ クリックで展開</a> 
 </div> 
 <!--// 折り畳み展開ポインタここまで --> 
   <!-- 折り畳まれた内容の部分 --> 
 <div id="open" style="display:none;clear:both;"> 
  <!--ここの部分が折りたたまれる＆展開される部分になります。  自由に記述してください。-->  
 </div> 
 <!--// 折り畳まれ部分 -->

<a style="cursor:pointer;">▼ クリックで展開</a>

</div>

</div>

thanks.html　表示内容を変更する、表示デザインを調整（form.htmlのフォーム部分がないverで表示させるのがきれい）

thanks.html→注文完了のお礼表示など

Index.htmlページ、情報入力ページ

Indexページ→注文ボタンのデザイン①
基本　フォーム（味気ないグレーの基本デザイン）jsを使った版

利点→URLに商品名や金額が入らない


<form class="mfpcart"
action="mailformpro/mailformpro.cgi?addon=cart/cart.js"
data-text="お支払情報入力画面へすすむ &gt;"
data-href="入力フォームページURL（相対パスで）"
onsubmit="return mfpCartAdd(this);">
	<input type="hidden" name="item" value="商品コード（半角英数字）">
	<input type="hidden" name="name" value="商品名">
	<input type="hidden" name="price" value="金額（半角数字）">
	<input type="hidden" name="qty" value="数量（半角数字）">

<button type="submit" data-text="カートに入れました">
<span>カートに追加</span>
</button><br>

Indexページ→注文ボタンのデザイン①

基本　フォーム（味気ないグレーの基本デザイン）jsを使った版

利点→URLに商品名や金額が入らない

<form class="mfpcart"

action="mailformpro/mailformpro.cgi?addon=cart/cart.js"

data-text="お支払情報入力画面へすすむ >"

data-href="入力フォームページURL（相対パスで）"

onsubmit="return mfpCartAdd(this);">

<span>カートに追加</span>

</button><br>

Indexページ→注文ボタンのデザイン②　
※ワンクリックでフォームページへ飛ぶ

注意点→URLに商品名や金額が入った状態でフォームページへリダイレクトされる


かごに入れる機能item（デザインは標準）
<form action="入力フォームページURL（相対パスで）">
<input type="hidden" name="item" value="商品コード（半角英数字）">
<input type="hidden" name="name" value="商品名">
<input type="hidden" name="price" value="金額（半角数字）" />
<input type="hidden" name="qty" value="数量（半角数字）" />
<input type="submit" value="カートに入れる" />
</form>

Indexページ→注文ボタンのデザイン②　

※ワンクリックでフォームページへ飛ぶ

注意点→URLに商品名や金額が入った状態でフォームページへリダイレクトされる

かごに入れる機能item（デザインは標準）

</form>

<!-- かごに入れる機能item（送信ボタンを画像にしたバージョン -->
<form action="入力フォームページURL（相対パスで）">
<input type="hidden" name="item" value="商品コード（半角英数字）">
<input type="hidden" name="name" value="商品名">
<input type="hidden" name="price" value="金額（半角数字）" />
<input type="hidden" name="qty" value="数量（半角数字）" />
<input type ="image" name="submit" src="画像のアドレス" height="縦サイズ" width="横サイズ" alt="カートに入れる">
</form>
<!-- ／かごに入れる機能item -->