Text Grabber

by Casey Muns

The Goal:

Grab text from specific elements on the page and use it to populate other elements.

Use case:

Click a button on a CMS generated card to use text fields on the same card to populate a form.

Example:

Choose a date

May 4, 2024

May the fourth be with you.

This is the way.

Select This

March 14, 1592

The cake is a lie!

But the pi is real.

Select This

December 31, 2999

Welcome to the world of tomorrow!

New New York, Y3K

Select This
Clear
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Implement in Webflow:

1. Wrappers:

  • The "Wrapper" is a container that holds the text sources and the activation button. If you're working with a CMS collection, apply this to the list item.
  • Add a div element and give it the attribute text-grabber="wrapper".

2. Buttons:

  • Inside the "Wrapper" div, place a button that will trigger the text transfer.
  • Add a button element and give it the attribute text-grabber="button". You can place this button anywhere within the "Wrapper" div.

3. Sources:

  • Within the "Wrapper" div, identify the text sources that you want to use.
  • Apply the attribute text-grabber="source" to each element that you want to use as a text source.
  • These source elements will be combined, with spaces, commas, or line breaks as separators. The default separator is a space, but you can change this by adding custom attributes to the target fields as described in the next step.

4. Targets:

  • Assign the attribute text-grabber="target" to any text input, text area, or text element where you want the source text to appear.
  • Clicking the button you placed earlier will transfer the source(s) to these target element(s).
  • If you want to change how the list is separated in the target element, you can use custom attributes:
  • For comma separation: text-grabber-separator="commas"
  • For line break separation: text-grabber-separator="lines"

5. Extras:

  • While these steps are sufficient for basic functionality, there are some optional features you might find helpful.

Optional: Clear Button:

  • If desired, you can add a button (or any other element) to clear all target fields.
  • Apply the attribute text-grabber="clear-button" to this element.

Optional: Multiple sources/targets:

  • If you need to use multiple sources without combining them, you can use source-target pairs.
  • Use a hyphen followed by a number or identifier to pair sources and targets, like this:
  • text-grabber="source-1" and text-grabber="target-1"
  • or text-grabber="source-name" and text-grabber="target-name"

Optional: Use a div as a source:

  • Instead of applying the text-grabber="source" attribute to a single text element, you can apply it to a div.
  • This will separate each text element within the div and follow the chosen separator setting on your target.