summaryrefslogtreecommitdiff
path: root/layouts/shortcodes/google-form.html
blob: 1a2b9fe3bb49ed424a9b35e9751340c08265d15e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- Copied from https://github.com/Darthagnon/darths-hugo-shortcodes
Forms: https://forms.google.com/

Usage:

google-form 1FAIpQLSdqRDjIhpvL1QTk_tnfzQ-KinpnykdcdpZsI9raxQgYBdxEnA

Supply the sharecode obtained from the Google Forms >> Send button (not from the URL bar, it's different).
Form fields, colour theme, etc. must be changed via Google's editor. (default width/height: 640 382, style="display: block; margin: auto;" aligns to centre)
There's no easy way to auto-set iframe height (https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using)
so height must be specified if you don't want double scrollbars.

border param will give your form a border (useful if it's scrollable)

-->

{{ if .IsNamedParams }}
		<div class="embed google-forms">
			<iframe src="https://docs.google.com/forms/d/e/{{ .Get "publishcode" }}/viewform?embedded=true" 
			width="100%" 
			{{ if .Get "size" | eq "small"}}height="150" 
			{{ else if .Get "size" | eq "medium"}}height="720"
			{{ else if .Get "size" | eq "large"}}height="1080"
			{{ else }}height="400"
			{{ end }}
			frameborder="0" marginheight="0" marginwidth="0" scrolling="yes" style="max-width: 100%; border: {{ if .Get "border" }}2px solid lightgray{{ else }}none{{end}}; display: block; margin: auto;" 
			>Loading Google Forms…</iframe>
			<a href="{{ .Get "url" }}">
			<!-- <img alt="Google Forms" style="top:-36px; position:relative; z-index:9; float: left;" height="32" src="https://www.gstatic.com/images/branding/product/1x/forms_2020q4_48dp.png"> -->
			</a>
		</div>
		{{ if .Site.Params.debug }}
			<script>
				console.log("Loaded user-editable external survey from Google Forms");
			</script>
		{{ end }}
{{ end }}