Search and Preview Gifs with Forms and Giphy

The workflow JSON

Copy or download the full n8n JSON below. Paste it into a new n8n workflow, add your credentials, activate. Full import guide →

{
  "id": "JPUBXcfvtCjXqbi4",
  "name": "\ud83c\udfac GIF Finder \u2014 Instant GIF Search Form",
  "tags": [],
  "nodes": [
    {
      "id": "321eed50-dec2-4bca-ac4b-0e4b72359f54",
      "name": "Sticky Note 321eed50",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -144,
        -240
      ],
      "parameters": {
        "color": 4,
        "width": 460,
        "height": 524,
        "content": "## \ud83c\udfac GIF Finder\n\nA tiny, fun web form that returns the best GIFs for any search term and shows them in a gallery \u2014 great for Slack reactions, presentations, or just a laugh.\n\n**How it works:** user submits a search term \u2192 GIPHY Search API returns the top results \u2192 they are rendered as a responsive gallery on the form completion page. Tap any GIF to copy its link.\n\n### \u2699\ufe0f Setup (2 minutes)\n1. Get a **free** API key at https://developers.giphy.com (create an app \u2192 API key).\n2. Open the **Search GIPHY** node \u2192 its **HTTP Query Auth** credential.\n3. Set **Name** = `api_key` and **Value** = your GIPHY key.\n\nNo other configuration required. Publish the workflow to make the form URL live."
      },
      "typeVersion": 1
    },
    {
      "id": "8030d446-4295-4c47-a30f-e807e0c11609",
      "name": "Sticky Note 8030d446",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        400,
        -240
      ],
      "parameters": {
        "color": 5,
        "width": 300,
        "height": 200,
        "content": "\ud83d\udcdd **On GIF Search**\n\nPublic form that collects the search term. Field `query` is required. Attribution is disabled for a clean look."
      },
      "typeVersion": 1
    },
    {
      "id": "4ee92442-2027-4948-be76-e6897e82e986",
      "name": "Sticky Note 4ee92442",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        752,
        -240
      ],
      "parameters": {
        "color": 3,
        "width": 300,
        "height": 200,
        "content": "\ud83d\udd0e **Search GIPHY**\n\nCalls the GIPHY Search API for the top 9 G-rated GIFs. Uses HTTP Query Auth (`api_key`). Retries 3\u00d7 on failure with a 15s timeout."
      },
      "typeVersion": 1
    },
    {
      "id": "d679390c-e549-4e15-8b30-f0cae3496246",
      "name": "Sticky Note d679390c",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1088,
        -240
      ],
      "parameters": {
        "color": 6,
        "width": 300,
        "height": 200,
        "content": "\ud83e\udde9 **Build Gallery HTML**\n\nMaps the GIPHY response into a responsive image gallery. Each GIF is click-to-copy. Falls back to a friendly message when no GIFs are found."
      },
      "typeVersion": 1
    },
    {
      "id": "2ee9aa3e-37aa-4750-861a-ccfb8a648aa0",
      "name": "Sticky Note 2ee9aa3e",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1424,
        -240
      ],
      "parameters": {
        "color": 7,
        "width": 300,
        "height": 200,
        "content": "\ud83d\uddbc\ufe0f **Show GIF Gallery**\n\nRenders the generated HTML on the form completion page. Tapping a GIF copies its link to the clipboard."
      },
      "typeVersion": 1
    },
    {
      "id": "ba1bab9f-37e7-4fed-a57a-cd6b30c611e6",
      "name": "On GIF Search",
      "type": "n8n-nodes-base.formTrigger",
      "position": [
        448,
        0
      ],
      "parameters": {
        "options": {
          "path": "gif-finder",
          "buttonLabel": "Find GIFs \ud83d\udd0e",
          "appendAttribution": false
        },
        "formTitle": "\ud83c\udfac GIF Finder",
        "formFields": {
          "values": [
            {
              "fieldName": "query",
              "fieldLabel": "What GIF are you looking for?",
              "placeholder": "e.g. celebration, cats, mind blown",
              "requiredField": true
            }
          ]
        },
        "formDescription": "Type anything and instantly get the best GIFs for it \u2014 powered by GIPHY."
      },
      "typeVersion": 2.6
    },
    {
      "id": "c39b1be9-7ecd-41c4-a809-b2ecf7d85d74",
      "name": "Search GIPHY",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        800,
        0
      ],
      "parameters": {
        "url": "https://api.giphy.com/v1/gifs/search",
        "options": {
          "timeout": 15000
        },
        "sendQuery": true,
        "authentication": "genericCredentialType",
        "genericAuthType": "httpQueryAuth",
        "queryParameters": {
          "parameters": [
            {
              "name": "q",
              "value": "={{ $json.query }}"
            },
            {
              "name": "limit",
              "value": "9"
            },
            {
              "name": "rating",
              "value": "g"
            }
          ]
        }
      },
      "credentials": {
        "httpQueryAuth": {
          "name": "<your credential>"
        }
      },
      "retryOnFail": true,
      "typeVersion": 4.4
    },
    {
      "id": "5fa1cac1-5398-4196-9637-c6aca67a216e",
      "name": "Build Gallery HTML",
      "type": "n8n-nodes-base.code",
      "position": [
        1136,
        0
      ],
      "parameters": {
        "jsCode": "\nconst query = ($('On GIF Search').item.json.query || '').trim();\nconst resp = $('Search GIPHY').item.json || {};\nconst gifs = Array.isArray(resp.data) ? resp.data : [];\n\nlet cards = '';\nfor (const g of gifs) {\n  const img = g && g.images && g.images.fixed_height && g.images.fixed_height.url;\n  if (!img) continue;\n  const alt = (g.title || 'GIF').replace(/\"/g, '&quot;');\n  cards += `<div class=\"gifcard\" data-url=\"${img}\" style=\"flex:1 1 30%;min-width:140px;position:relative;cursor:pointer;\"><img src=\"${img}\" alt=\"${alt}\" style=\"width:100%;border-radius:12px;display:block;\"/><span class=\"badge\" style=\"position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,0.72);color:#fff;font-size:12px;padding:3px 8px;border-radius:8px;\">Click to copy</span></div>`;\n}\n\nif (!cards) {\n  cards = '<p style=\"text-align:center;color:#6b7280;\">No GIFs found \u2014 try another search \ud83d\ude48</p>';\n}\n\nconst html = `\n<div style=\"max-width:760px;margin:0 auto;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2937;\">\n  <h1 style=\"text-align:center;font-size:28px;margin-bottom:4px;\">\ud83c\udfac Top GIFs for \"${query}\"</h1>\n  <p style=\"text-align:center;color:#6b7280;margin-top:0;\">Tap any GIF to copy its link \u2014 then paste it anywhere \ud83d\udc47</p>\n  <div style=\"display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;\">${cards}</div>\n  <p style=\"text-align:center;color:#9ca3af;font-size:13px;margin-top:24px;\">Powered by GIPHY \u00b7 Refresh the form to search again \ud83d\udd04</p>\n</div>\n<script>\n(function(){\n  function attach(){\n    var cards = document.querySelectorAll('.gifcard');\n    for (var i = 0; i < cards.length; i++) {\n      (function(el){\n        el.addEventListener('click', function(){\n          var url = el.getAttribute('data-url');\n          var badge = el.querySelector('.badge');\n          function ok(){ if(badge){ badge.textContent = '\u2705 Copied!'; setTimeout(function(){ badge.textContent = 'Click to copy'; }, 1200); } }\n          function fail(){ if(badge){ badge.textContent = '\u26a0\ufe0f Copy failed'; setTimeout(function(){ badge.textContent = 'Click to copy'; }, 1200); } }\n          if (navigator.clipboard && navigator.clipboard.writeText) {\n            navigator.clipboard.writeText(url).then(ok).catch(fail);\n          } else {\n            var ta = document.createElement('textarea');\n            ta.value = url; document.body.appendChild(ta); ta.select();\n            try { document.execCommand('copy'); ok(); } catch(e){ fail(); }\n            document.body.removeChild(ta);\n          }\n        });\n      })(cards[i]);\n    }\n  }\n  if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', attach); } else { attach(); }\n})();\n</script>\n`;\n\nreturn [{ json: { html } }];\n"
      },
      "typeVersion": 2
    },
    {
      "id": "18765bc9-ec1e-478b-83e3-9d3012b12b49",
      "name": "Show GIF Gallery",
      "type": "n8n-nodes-base.form",
      "position": [
        1472,
        0
      ],
      "parameters": {
        "operation": "completion",
        "respondWith": "showText",
        "responseText": "={{ $json.html }}"
      },
      "typeVersion": 2.5
    }
  ],
  "active": false,
  "settings": {
    "binaryMode": "separate",
    "executionOrder": "v1"
  },
  "versionId": "c0e52304-a78e-44d3-b995-2a26dd5cc625",
  "nodeGroups": [],
  "connections": {
    "Search GIPHY": {
      "main": [
        [
          {
            "node": "Build Gallery HTML",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "On GIF Search": {
      "main": [
        [
          {
            "node": "Search GIPHY",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Build Gallery HTML": {
      "main": [
        [
          {
            "node": "Show GIF Gallery",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Credentials you'll need

Each integration node will prompt for credentials when you import. We strip credential IDs before publishing — you'll add your own.

• httpQueryAuth

About this workflow

This workflow publishes an n8n Form where users enter a search term, queries the GIPHY Search API for the top 9 G-rated GIFs, and renders the results as a clickable HTML gallery on the form completion page with copy-to-clipboard links. Receives a submission from an n8n Form at…

Source: https://n8n.io/workflows/16973/ — original creator credit. Request a take-down →

More Web Scraping workflows → · Browse all categories →

Related workflows

Workflows that share integrations, category, or trigger type with this one. All free to copy and import.