Gallery
The Encryption Template
Share
Explore
DB

icon picker
Variables

Setup Guide continued...

We’ll know when this template has been copied over to a new doc, by comparing the doc’s Created() timestamp with the timestamp we know that this doc was completed. If this doc is a copy, then we’ll display a notice at the top of urging the user to visit the page to complete all steps of the full setup flow.
Note that when a doc (or part thereof) is copied, all text inputs’ Created() timestamps are reset as Coda builds the new copy. When Coda copies a page over to another doc, it seems to build the components of the page one at a time, so it’s usual for their timestamp to be 15-30 seconds after the Doc’s Created() timestamp. This is handy to know, and is leveraged in this doc to determine whether or not the Published Form link for needs to be updated. We’ll know if it requires an update when its Modified() timestamp is within a few seconds of the Doc’s Created() timestamp.
VAR Document Created Timestamp
DateTime:
5/3/2022 6:20:36 PM
This is the datetime this Doc was created.
VAR Template Published Timestamp
DateTime:
5/3/2022, 3:00:00 PM
This is the datetime this template doc was completed.
VAR Document is Copy
Bool:
true
If this doc’s Created() timestamp is later than the timestamp I’ve hardcoded as this template’s VAR Template Publish Timestamp value, then we know this is a copy.
VAR Published Form link requires update
Bool:
false
If the user hasn’t updated the published form link since the copy has been made, then this toggles to true.

Fake Submit Button

This is the FAKE button I use at the bottom of the form.
Modified from an by Max Xyzor. The button at the bottom of the form is actually fake (scandalous!). It’s an SVG image designed to replicate Coda’s native submit button... but with a cool animated gradient, because why not!? :)
VAR SVG Button Template
data:image/svg+xml,%3Csvg%20width="{4}"%20height="{5}"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E{10}%3Crect%20width="{4}"%20height="{5}"%20rx="{8}"%20fill="{2}"%20/%3E%20%3Ctext%20x="{6}"%20y="{7}"%20fill="{3}"%20style="font-family:%20sans-serif;font-size:{9}px;cursor:pointer;"%3E{1}%3C/text%3E%3C/svg%3E
VAR SVG skyGradient Defs
<defs> <linearGradient id="skyGradient" x1="100%" y1="100%"> <stop offset="0%" stop-color="#0f5faf" stop-opacity="1"> <animate attributeName="stop-color" values="#0f5faf;lightblue;#0f5faf;" dur="{1}s" repeatCount="indefinite" /> </stop> <stop offset="100%" stop-color="lightblue" stop-opacity=".5"> <animate attributeName="stop-color" values="#0f5faf; #0f5faf" dur="5s" repeatCount="indefinite" /> <animate attributeName="offset" values="1; 1" dur="{1}s" repeatCount="indefinite" /> </stop> </linearGradient> </defs>
VAR SVG Continue Button
data:image/svg+xml,%3Csvg%20width="100"%20height="28"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22skyGradient%22%20x1%3D%22100%25%22%20y1%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230f5faf%22%20stop-opacity%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3Blightblue%3B%230f5faf%3B%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22lightblue%22%20stop-opacity%3D%22.5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3B%20%230f5faf%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22offset%22%20values%3D%221%3B%201%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%3Crect%20width="100"%20height="28"%20rx="9"%20fill="url(%23skyGradient)"%20/%3E%20%3Ctext%20x="10"%20y="19"%20fill="White"%20style="font-family:%20sans-serif;font-size:15px;cursor:pointer;"%3EContinue%20%E2%86%92%3C/text%3E%3C/svg%3E

SVG Button Settings

These allow you to easily modify the button’s components to ensure it's picture-perfect.
Label.
Continue →
BgColor.
url(#skyGradient)
FgColor.
White
Width.
000
100
Height.
00
28
TextX.
00
10
TextY.
00
19
BorderRadius.
00
9
FontSize.
00
15
Anim Speed.
000
2.4
fast slow
Copy SVG To Clipboard

Fake Decrypt Button

On the page, the user needs to “click away” from the password field to trigger the decryption. To encourage them to do so, we have a face “decrypt” button that actually does nothing.
VAR SVG Decrypt Button
data:image/svg+xml,%3Csvg%20width="74"%20height="28"%20style="cursor:pointer"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22skyGradient%22%20x1%3D%22100%25%22%20y1%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230f5faf%22%20stop-opacity%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3Blightblue%3B%230f5faf%3B%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22lightblue%22%20stop-opacity%3D%22.5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22stop-color%22%20values%3D%22%230f5faf%3B%20%230f5faf%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Canimate%20attributeName%3D%22offset%22%20values%3D%221%3B%201%22%20dur%3D%222.4s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%3Crect%20width="74"%20height="28"%20rx="9"%20fill="url(%23skyGradient)"%20/%3E%20%3Ctext%20x="10"%20y="19"%20fill="White"%20style="font-family:%20sans-serif;font-size:15px;cursor:pointer;"%3EDecrypt%3C/text%3E%3C/svg%3E

Published Forms

VAR Published Form Link - Submit Secret
URL:
https://coda.io/form/Submit-New-Secret_d25AMJqXi6x
The first form, has a Fake Submit Button that takes the user to the second form (this link).
This form requires the Encrypted Text, the Salt, and Title which are all passed via parameters in the URL, effectively pre-filling the fields’ values. The user then just clicks Submit and their encrypted data is saved to the table without much effort.
VAR User currently viewing
Current item:
[ ]
This is the row that the user is currently viewing on the page.


Character Mapping

TEXT Char Mapping Cache
Current Characters:
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ”–’‘‚“‐‒—!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿
This is a string containing the currently supported characters. If a character is not in this field, it will be dropped during the encryption process. To manage supported characters, head over to (requires that you selected the Custom Setup option when you copied this template to your doc). As per my frustrated comments on , the [newline] character is automatically added as an additional character.
VAR Char Mapping TEXT has duplicates
Value:
false
If an individual character appears more than once in the Character Mapping text field, then this toggles to TRUE. When TRUE, the user is prompted to re-cache the character mapping, using buttons which appear:
- Under “Custom Setup” on
- At the top of

Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.