Skip to content

Puff butt patch 1 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PuffButt wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Puff butt patch 1 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
63f0471
修改
PuffButt Apr 15, 2022
67ecf74
Update index.html
PuffButt Apr 15, 2022
2794da4
Update index.html
PuffButt Apr 15, 2022
92ccae2
Update index.html
PuffButt Apr 15, 2022
b727148
Update index.html
PuffButt Apr 15, 2022
f56b720
Update index.html
PuffButt Apr 15, 2022
6c0e083
Update README.md
PuffButt Apr 17, 2022
c41438e
05.24
PuffButt Apr 18, 2022
351ccc4
Merge branch 'master' into PuffButt-patch-1
PuffButt Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1 @@
### 使用教學文：
[Let's Write：完全客製google表單，美化表單樣式](https://www.letswrite.tw/custom-google-form/)


---


### 測試頁面：
<https://letswritetw.github.io/letswrite-customize-google-form/>


---


### 測試結果：
[google excel](https://docs.google.com/spreadsheets/d/15QiZEKyMMmpbj7cvJ_fPX5Eh1x9BzXOtfONFIM2V64o/edit)
147 changes: 78 additions & 69 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>完全客製google表單，美化表單樣式 - August - Let's Write</title>
<title>甜蜜秘境 盒買+1團購訂單</title>
<link rel="canonical" href="https://www.letswrite.tw/custom-google-form/">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
Expand Down Expand Up @@ -35,7 +35,7 @@
height: 100%;
}
.bg {
background: url('https://fakeimg.pl/1920x1024/?text=KV') center center;
background: url('https://upload.cc/i1/2022/04/16/6oULDz.png') center center;
background-size: cover;
}
.form {
Expand Down Expand Up @@ -86,24 +86,24 @@

</style>

<link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>
<link rel="shortcut icon" href="https://upload.cc/i1/2022/04/16/hlsMER.png"/>

<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TLF6F2C');</script>
<!-- End Google Tag Manager -->

</head>

<body>

<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLF6F2C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<div class="container">
<main class="row">
Expand All @@ -112,55 +112,51 @@

<!-- form -->
<section class="six columns half form">
<h1>Contact us</h1>
<h1>盒買+1 團購訂單</h1>
<form>
<!-- 姓名 -->
<div class="input-group">
<label for="demo_name">姓名</label>
<input class="u-full-width" type="text" placeholder="test@mailbox.com" id="demo_name">
<label for="demo_order">下單區</label>
<input class="u-full-width" type="textarea" placeholder="盒1+200" id="demo_order">
</div>

<div class="input-group">
<label for="demo_need">其他需求</label>
<input class="u-full-width" type="text" placeholder="我想做客製化" id="demo_need">
</div>

<div class="input-group">
<label for="demo_name">大名/店名(可二選一填寫)</label>
<input class="u-full-width" type="text" placeholder="甜蜜秘境/Linda" id="demo_name">
</div>

<div class="input-group">
<label for="demo_address">收貨地址</label>
<input class="u-full-width" type="text" placeholder="請完整打出收件地址" id="demo_address">
</div>

<!-- 性別 -->
<div class="input-group">
<label>姓別</label>
<div class="radio-group row">
<!-- 男性 -->
<div class="four columns">
<input type="radio" id="male" name="demo_radio" value="male" checked>
<label for="male">男性</label>
</div>

<!-- 女性 -->
<div class="four columns">
<input type="radio" id="female" name="demo_radio" value="female">
<label for="female">女性</label>
</div>

<!-- 法人 -->
<div class="four columns">
<input type="radio" id="legal" name="demo_radio" value="legal">
<label for="legal">法人</label>
</div>
</div>
<label for="demo_phone">聯絡電話</label>
<input class="u-full-width" type="text" placeholder="物流能聯絡到您的都可以~" id="demo_phone">
</div>

<!-- 詢問類別 -->
<div class="input-group">
<label for="demo_select">詢問類別</label>
<select class="u-full-width" id="demo_select">
<option value="0" value="0" selected disabled>請選擇</option>
<option value="cat">貓類</option>
<option value="dog">狗類</option>
<option value="bear">熊類</option>
</select>
<label for="demo_lineid">Line ID</label>
<input class="u-full-width" type="text" placeholder="方便與您核對訂單" id="demo_lineid">
</div>

<!-- 詢問內容 -->
<div class="input-group">
<label for="demo_textarea">詢問內容</label>
<textarea class="u-full-width" id="demo_textarea"></textarea>
<label for="demo_gui">統一編號</label>
<input class="u-full-width" type="text" placeholder="是否需要打統編呢?" id="demo_gui">
</div>

<div class="input-group">
<label for="demo_email">電子信箱</label>
<input class="u-full-width" type="text" placeholder="test@gmail.com" id="demo_email">
</div>



<button type="button" id="submit" class="button-primary u-full-width">確認送出</button>

</form>
Expand All @@ -173,34 +169,47 @@ <h1>Contact us</h1>
$(function() {
$('#submit').on('click', function() {

// 姓名
// 下單區
var order = $('#demo_order').val() || '未填寫';

// 其他需求
var need = $('#demo_need').val() || '未填寫';

// 店名
var name = $('#demo_name').val() || '未填寫';

// 性別
var sex = function() {
var v;
$('[name="demo_radio"]').each(function() {
if($(this).prop('checked') === true) v = $(this).val();
});
return v;
};
// 收貨地址
var address = $('#demo_address').val() || '未填寫';

//連絡電話
var phone = $('#demo_phone').val() || '未填寫';

//LINE
var lineid = $('#demo_lineid').val() || '未填寫';

//統編
var gui = $('#demo_gui').val() || '未填寫';

//電子信箱
var email = $('#demo_email').val() || '未填寫';

// 類別
var cat = $('#demo_select').val() || '未填寫';

// 內容
var msg = $('#demo_textarea').val() || '未填寫';

// post
var data = {
'entry.248434920': name,
'entry.1569038925': sex(),
'entry.1509045370': cat,
'entry.758411200': msg
var data={
'entry.1309609410': order,
'entry.1495583811': need,
'entry.1022483502': name,
'entry.1903384411': address,
'entry.564969400': phone,
'entry.904682548': lineid,
'entry.1960001502': gui,
'entry.595270664': email

};
$.ajax({
type: 'POST',
url: 'https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse',
url: 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeHj4D-qfsuazv4_omLccp3BjGV6kUH5c6Tk5mWf3tA6cZ3PQ/formResponse',
data: data,
contentType: 'application/json',
dataType: 'jsonp',
Expand Down
Empty file added test.txt
View file
Open in desktop
Empty file.