DEV Community: ninest

Natively embed Google Forms in your website

ninest — Mon, 03 Aug 2020 09:35:48 +0000

Knowledge on HTML, HTML forms, and Google Forms is required for this tutorial.

Today we'll see how we can add a custom styled form to our website that accepts responses without the need for a backend. Embedding Google Forms is possible, but I'm going to show you how to customize the style to your liking.

Before we get into the tutorial, you might be wondering why you'd want to embed a Google Form in your website when various other services exist:

Google Forms has Google Sheets integrations, so you can save all your form submissions on a spreadsheet. This makes it easier to analyze or share responses.
The biggest reason, according to me is that it's 100% free. There's no limit to the number of forms you can submit.

1. Create your form

Head over to forms.new to create a new form.

In this example, I'm going to create a simple contact form which has four fields:

Name (short answer text), required
Message (long answer text), required
Phone number (number answer text)
Rating (radio checkboxes, 1 to 5)

The Google form looks like this:

At this stage, it is possible to directly embed the form in your website using an iframe. You can get the the code to do so by pressing the "Send" button:

You can see how this looks here. While this may be fine, it may look out of place depending on the design of your website. We can do better.

2. Find the form's submission URL

First, find the link to your form. Do this by clicking on the "Preview" button (looks like an eye):

In my case, the URL of the form is https://docs.google.com/forms/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/viewform.

To get the form's submission URL, change the "viewform" to "formResponse". So the submission URL for this example is

https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/formResponse

3. Create the HTML form

Create a form with the submission URL we found above, and with the method "POST":

<form method="POST" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/formResponse">
  <!-- We'll add each field soon -->
</form>

Let's add the four fields now:

Name field (text input):

<label for="name">Name</label>
<input type="text" id="name" required>

Message field (textarea):

<label for="message">Message</label>
<textarea id="message" required></textarea>

Phone number (number input):

<label for="ph-number">Phone number</label>
<input type="number" id="ph-number">

Rating (checkbox input):

Note that this one is slightly different.

<p class="label">Rating</p>

<div>
  <!-- The "value" is important -->
  <input type="radio" value="1" id="rating1">
  <label for="rating1" class="radio">Worst (1)</label>
</div>

<div>
  <input type="radio" value="2" id="rating2">
  <label for="rating2" class="radio">2</label>
</div>

<div>
  <input type="radio" value="3" id="rating3">
  <label for="rating3" class="radio">3</label>
</div>

<div>
  <input type="radio" value="4" id="rating4">
  <label for="rating4" class="radio">4</label>
</div>

<div>
  <input type="radio" value="5" id="rating5">
  <label for="rating5" class="radio">Best (5)</label>
</div>

There are five options in the rating (1 being the worst, 5 being the best). Five different radio inputs and labels are required.

Last, the submit button:

<button type="submit">Submit</button>

Now put all these inside the form.

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/formResponse" method="POST">

  <!-- Name field -->
  <section>
    <label for="name">Name</label>
    <input type="text" id="name" required>
  </section>

  <!-- Message field -->
  <section>
    <label for="message">Message</label>
    <textarea id="message" required></textarea>
  </section>

  <!-- Phone number field -->
  <section>
    <label for="ph-number">Phone number</label>
    <input type="number" id="ph-number">
  </section>

  <!-- Rating field -->
  <section>
    <p class="label">Rating</p>
    <div>
      <input type="radio" value="1" id="rating1">
      <label for="rating1" class="radio">Worst (1)</label>
    </div>

    <div>
      <input type="radio" value="2" id="rating2">
      <label for="rating2" class="radio">2</label>
    </div>

    <div>
      <input type="radio" value="3" id="rating3">
      <label for="rating3" class="radio">3</label>
    </div>

    <div>
      <input type="radio" value="4" id="rating4">
      <label for="rating4" class="radio">4</label>
    </div>

    <div>
      <input type="radio" value="5" id="rating5">
      <label for="rating5" class="radio">Best (5)</label>
    </div>
  </section>

  <button type="submit">Submit</button>
</form>

I'm using sections to make it easier to understand.

But we can't submit the form just yet. For each input or textarea, we need to find the form's name property.

4. Finding each input's name

Those of you who have worked with forms before may think that you can just inspect the HTML form and find the name property for each input.
You actually can't. This used to be possible, but it isn't anymore.

Open the form again, the view the page's source (cmd-alt-U on Mac). Press cmd-F and search for the text FB_PUBLIC_LOAD_DATA_.

You will see something like this:

The first part is important:

var FB_PUBLIC_LOAD_DATA_ = [null,[null,[[822815793,"Name",null,0,[[1703190952,null,1]
]
]
,[702392112,"Message",null,1,[[246314205,null,1]
]
]
,[873269195,"Phone number",null,0,[[1350082266,null,0,null,[[1,9,[""]
]
]
]
]
]
,[731731242,"Rating",null,5,[[1093513613,[["1"]
,["2"]
,["3"]
,["4"]
,["5"]
]
,0,["Worst","Best"]
]
]
]
]

...

Yes, I know this is confusing and intimidating, but you'll soon see its use.

I'm going to put it here again, but with only the useful information. I'm going to refer to these as the "Entry IDs":

// all Entry IDs
"Name" 1703190952
"Message" 246314205
"Phone number" 1350082266
"Rating" 1093513613
  "1"
  "2"
  "3"
  "4"
  "5"

What have I done here? Just take the string, and keep the 10 digit number found after it.

Read this if you didn't understand how I got the all the Entry IDs

Let's the take the first line as an example:
[null,[null,[[822815793,"Name",null,0,[[1703190952,null,1]
Take the string: Name

Take the number found after the string: 1703190952

So we get this Entry ID:
"Name" 1703190952

Can you see the pattern? All strings are the field names on Google Forms. Note that the 5 strings under "Ratings" are the checkbox options (1 through 5).

Now onto actually getting the input's name.

Let's take the first field, Name for this example:

<!-- HTML for name field -->
<label for="name">Name</label>
<input type="text" id="name" required>

and the corresponding Entry ID:

// Entry ID for the name field
"Name" 1703190952

The get the input's name property, add entry. at the start of the Entry ID, like this: entry.1703190952.

So the label and input looks like this now:

<label for="name">Name</label>
<input name="entry.1703190952" type="text" id="name" required>
<!--               ^ Entry ID added               -->

Let's do the same for the Message field. The Entry ID is 246314205, so the label and textarea should look like this:

<label for="message">Message</label>
<textarea name="entry.246314205" id="message" required></textarea>
<!--                  ^ Entry ID added                  -->

You can do the same with the phone number to get

<label for="ph-number">Phone number</label>
<input name="entry.1350082266" type="number" id="ph-number">
<!--               ^ Entry ID added               -->

Last, we have the radio checkbox for Rating. The Entry ID is 1093513613, so we have to add name="entry.1093513613 to all the inputs:

<p class="label">Rating</p>

<div>
  <input type="radio" name="entry.1093513613" value="1" id="rating1">
  <!--                            ^ Entry ID added                -->
  <label for="rating1" class="radio">Worst (1)</label>
</div>

<div>
  <input type="radio" name="entry.1093513613" value="2" id="rating2">
  <!--                            ^ Entry ID added                -->
  <label for="rating2" class="radio">2</label>
</div>

<!-- continue this for the ratings 3 to 5 -->
...

Now let's put the completed form together:

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/formResponse" method="POST">
  <section>
    <label for="name">Name</label>
    <input name="entry.1703190952" type="text" id="name" required>
  </section>

  <section>
    <label for="message">Message</label>
    <textarea name="entry.246314205" id="message" required></textarea>
  </section>

  <section>
    <label for="ph-number">Phone number</label>
    <input name="entry.1350082266"  type="number" id="ph-number">
  </section>

  <section>
    <p class="label">Rating</p>

    <div>
      <input type="radio" name="entry.1093513613" value="1" id="rating1">
      <label for="rating1" class="radio">Worst (1)</label>
    </div>

    <div>
      <input type="radio" name="entry.1093513613" value="2" id="rating2">
      <label for="rating2" class="radio">2</label>
    </div>

    <div>
      <input type="radio" name="entry.1093513613" value="3" id="rating3">
      <label for="rating3" class="radio">3</label>
    </div>

    <div>
      <input type="radio" name="entry.1093513613" value="4" id="rating4">
      <label for="rating4" class="radio">4</label>
    </div>

    <div>
      <input type="radio" name="entry.1093513613" value="5" id="rating5">
      <label for="rating5" class="radio">Best (5)</label>
    </div>

  </section>

  <button type="submit">Submit</button>
</form>

5. Testing it out

I've made the complete form on this page.

Let's try it out:

Hit Submit.

Now go to the Responses section in your Google Form:

The response has been recorded! As you can see, they also have a pretty chart for the checkbox response!

Examples

I'm using this on two of my sites: nine-nine.now.sh and nsr.now.sh.

If you found this article helpful! Please give it a reaction!

Using VScode for Sonic Pi

ninest — Wed, 22 Jul 2020 06:02:19 +0000

I love Sonic Pi, but I'd prefer using VScode over the default editor. An extension is currently in the works. Here are some relevant links:

Until then, here's a quick and simple way to run/play Sonic Pi music from VScode directly.

1. Install sonic-pi-cli 👨‍💻

Sonic-pi-cli can be installed by running:

gem install sonic-pi-cli

Check out their GitHub repository for more details.

Widdershin / sonic-pi-cli

A simple command line interface for Sonic Pi, written in Ruby

sonic-pi-cli

A simple command line interface for Sonic Pi, written in Ruby.

Requires Sonic Pi v2.7 or higher.

ver 0.1.3 allows compatibility with Sonic Pi v3.2: tested on Linux, Raspberry Pi and Windows

Installation

gem install sonic-pi-cli

Usage

Sonic Pi must be running, as this is just a client.

sonic_pi play 50
sonic_pi sample :loop_breakbeat, rate: 0.5
sonic_pi stop

echo 'sample :loop_amen' | sonic_pi
cat music.rb | sonic_pi

$ irb

irb(main):001:0> require 'sonic_pi'
=> true
irb(main):002:0> SonicPi.new.run('play [50, 55, 60]')
=> 36

License

sonic-pi-cli is released under the MIT license. See LICENSE file for more details.

Alternatives

lpil/sonic-pi-tool - written in Rust, also supports viewing logs.

Thanks to Sam Aaron for creating Sonic Pi. Official command line support is planned for Sonic Pi 3.0.

For those interested, the code weighs in at around 120 lines and is stupid simple. Take a look.

View on GitHub

Once it's been installed, make sure it's working properly. Keep the Sonic Pi app running, then run the following command in your terminal:

sonic_pi play 50

The Sonic Pi app needs to be running for sonic-pi-cli to work.

2. Using sonic-pi-cli to play a file 🎵

Say for example, you have your Sonic Pi code in music.rb. Run

cat music.rb | sonic_pi

to play the music.

If you don't understand what this command does, you can read more here. In short, the pipe (|) passes the output of a command to another command.

To stop the music playing, run

sonic_pi stop

3. Configuring keyboard shortcuts ⌨️

Running cat music.rb | sonic_pi and sonic_pi stop every time is a little annoying. Luckily, VScode makes it easier to defne custom tasks and keyindings.

Tasks

To open tasks.json, use the keyboard shortcut cmd+shift+P. Type >Tasks: Open user tasks, and you should see a JSON file that looks like this:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
  ]
}

We need to add 2 tasks:

To start playing the current file with Sonic Pi: cat <current file> | sonic_pi
To stop playing: sonic_pi stop.

We also have to give them unique labels. I'm going to use sp-run and sp-stop.

Now edit tasks.json:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    // PLAY MUSIC
    {
      "label": "sp-run",
      "type": "shell",
      "command": "cat ${file} | sonic_pi"
    },

    // STOP PLAYING
    {
      "label": "sp-stop",
      "type": "shell",
      "command": "sonic_pi stop"
    }
  ]
}

As you can see, the task sp-run runs the shell command cat ${file} | sonic_pi, and sp-stop runs the command sonic_pi stop.

Keybindings

Now we need to add keybindings to these tasks.

To open keybindings.json, use the keyboard shortcut cmd+K cmd+s. Click the button at the top right to open it in the JSON format. It should like similar to this:

// Place your key bindings in this file to override the defaults
[
  // ..
  // all of your keybindings
  // ...
]

To bind a keyboard shortcut to a task, we have to set its command to workbench.action.tasks.runTask. We also want to limit this keyboard shortcut to ruby (.rb) files.

Edit keybindings.json:

// Place your key bindings in this file to override the defaults
[
  // ..
  // all your other keybindings
  // ...

  // for sonic pi
  {
    "key": "ctrl+alt+s",
    "command": "workbench.action.tasks.runTask",
    "args": "sp-run",
    "when": "editorLangId == ruby" // limit these keybindings to work in ruby files
  },
  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.tasks.runTask",
    "args": "sp-stop",
    "when": "editorLangId == ruby"
  }
]

I've added ctrl+alt S to play the file, and ctrl+alt D to stop. Feel free to change them.

To make sure this works, create a file with the extension .rb, and some code:

live_loop :main do
  play :E4
  sleep 1
end

Start the Sonic Pi app,

Now use the keyboard shortcut you defined for sp-run, (ctrl+alt S in this example), and you should here the music playing!

Make a change. For example:

live_loop :main do
  play :C4  # <-- change
  sleep 1
end

Use the keyboard shortcut (ctrl+alt S) to play the music again. Great! No need to stop playing every time you make a change!

Finally, top stop the music playback, use the keyboard shortcut for sp-stop (ctrl+alt D in this example)

Logs 📝

Unfortunately, logs cannot be shown in VScode (yet). But you can still view them in the Sonic Pi app.

Files 📁

If you would like to refer to any files changed in this tutorial, check out the GitHub gist.