ワンクリックで購入できるようなランディングページを作成してみた 3
2018/02/28
続き～
フォーム入力ページを編集を引き続き変更します！
|
1 2 3 |
<div> <input type="text" id="mfp_shopping_cart_value" name="ご注文商品" required="required" data-norequired="1"> </div> |
をコメントアウト
（商品名(単価) ・数量・小計を表示する枠の下にさらに
商品名を表示しているヘンな枠があるから見えないようにするため）
- フォームの入力項目を編集
必要ない入力項目をいきなり削除せず、閉じタグに気をつけて、必要な項目だけを上に並べかえるほうが安全。あとでやっぱりってときに復帰できるから。
こんな感じ↓
- フォームの送信テストをして送信に問題なければ、
cgiconfig.cgi 内のメール内容の編集
自動返信メール、自分に届くメールの内容を修正ね。
署名欄は変更必須！ シンカグラフィカ様に迷惑かかっちゃいますヨ！
- Items.tsvファイルを編集してアップロード 価格チェック
インストールドメイン/mailformpro/configs/PayPal.cgi内の
|
1 |
$config{'file.PayPalItemSecureMatch'} = './configs/Items.tsv'; |
行頭の「＃」とる
- フォーム入力画面
(ここはオリジナル～ 説明ページ作るの面倒だからそれぞれの項目に説明いれてみた)
送料・paypal決済画面 ポップアップで説明入れる
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 折り畳み展開ポインタ --> <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> <!--// 折り畳まれ部分 --> |
- thanks.html 表示内容を変更する、表示デザインを調整（form.htmlのフォーム部分がないverで表示させるのがきれい）
thanks.html→注文完了のお礼表示など
- Index.htmlページ、情報入力ページ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Indexページ→注文ボタンのデザイン① 基本 フォーム（味気ないグレーの基本デザイン）jsを使った版 利点→URLに商品名や金額が入らない <form class="mfpcart" action="mailformpro/mailformpro.cgi?addon=cart/cart.js" data-text="お支払情報入力画面へすすむ >" 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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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> |
|
1 2 3 4 5 6 7 8 9 |
<!-- かごに入れる機能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 --> |
ここまで来たらほぼ完成♪
あとはフォーム入力ページのデザイン・カラー・背景などを整えて～thanks.htmlページに表示される文章を変えて、デザイン・カラー・背景を整えて完成！
もしアフェリエイトをするならば、このthanks.htmlページに挿入！
ただし！paypal決済で注文があって、paypal画面で決済キャンセルになってもこの「thanks.html」が表示される場合があるみたいなんで売上と確定処理は気をつけて！
以上！おつかれさまでした！