Changing color of text when clicked

Hey,

Is it possible to make text appear different when you locate your mouse button on the text just like my screenshot below?

Sure… just use conditional formatting on the text element…

If you mean when the mouse pointer is hovered over the text, then you can use the built in ‘This Button is Hovered’ condition to change the text colour.

Of you want it to change when it’s ‘clicked’, you’ll need to use a custom state for that, then use a condition to change the text’s colour when that custom state has a certain value, and run a workflow when the text is clicked to set that custom state to that value.

Hi @adamhholmes, I was just trying to do something like this but I don’t seem to be setting the custom state correctly. How might I change text that’s clicked on once to once to one color and then another color when clicked on twice?

Thanks in advance.

two ways of doing this, through a state, or on a conditional.

when “this button” is pressed or “this button” is hovered > font color: #949494

or, make a state, and set your condition.

when whateverElement_I_Put_A_State_On’s value is yes > font color: #949494

Hi, @GhostCodes thanks for coming through. I find that when I do conditionals for anything, it doesn’t work for clicks. Press just does the action for a moment and then it disappears, and hovered is not what I’m looking for.

On the other hand, I’ve only ever used a state for moving things along on a form steps (newbie). I have been trying to make one for this sort of thing but I don’t seem to know what I am doing. I just can’t bring the logic into this scenario.

If I’m not intruding too much, how exactly can I set a state for this exact situation please?

What is your goal? Hover or change when clicked?

Change the color (of text) when clicked once from black to red. And change it back to black when clicked again.

MAKE A STATE - Any element. When you click the element on the top right there is a button called “custom states”.

Add a state called clicked with a value of “yes/no”. It is not a list.

Make two actions on your WORKFLOW with a “Do when an element is clicked” condition.

First one: Do when YOUR_ELEMENT is clicked and clicked is no : CREATE AN ACTION: Set State of YOUR_ELEMENT clicked to yes

Second one: Do when YOUR_ELEMENT is clicked and clicked is yes : CREATE AN ACTION: Set State of YOUR_ELEMENT clicked to no

On your text (where ever your trigger element is) make a condition on there: When YOUR_ELEMENT clicked is yes > Font color: #138393

If you’re not able to understand, you may need to read up on the docs/do some tutorials.

I’d highly suggest doing the crash courses if you haven’t done them yet and you’re new.

I’ve now created a state ‘clicked’ with a ‘yes/no’ value.

I already have a workflow for that piece of text. Should I go ahead and create a separate workflow for ‘do when an element is clicked’? Because I can’t see that option otherwise.

I’ll look at the crash course. Thanks.

Seperate workflow actions, one for when it’s not toggled, and one for when it is. This is one way of doing it. The other way would be: When an element is clicked: ELEMENT ACTION: toggle ( clicked yes/no) as an action.

This way of doing it really simple, but for me has lead to workflow issues, when it’s better to control the on or off ability in full form.

Okay. All a bit above my head. But thanks. I will just keep going and check out the course first. Maybe something will click then.


So many steps…I was hoping something like this would do it!

image

Don’t forget to add after that: “This text’s click is yes

Yes, thanks a lot. I finally got it to work following c-a-r-e-f-u-l-l-y your steps. Many thanks. :blush:

Hi again. So after doing this, I also added a conditional to make the said piece of text unclickable after it changes color. I recorded my screen to show the actions but I don’t seem to be able to share videos here. Maybe I should share my full user journey:

  1. User clicks on ‘Add another email address’ (a) another input box appears underneath the regular one (b) a second text to ‘delete’ this extra email address they have created pops up and (3) the ‘Add another email address’ text changes color from active-blue to inactive-grey and (4) the ‘Add another email address’ text becomes unclickable…

  2. User writes an email address but afterwards wants to delete it so they click on the ‘delete’ text that’s now available to them.(a) input box with the extra email address disappears (b) ‘delete’ text disappears.

  3. Now I need the in-active grey, unclickable ‘Add another email address’ text to (a) go back to active-blue color and (b) be clickable again . . . so the whole user action can be repeated, with the user being able to add one extra email at any given time.

  4. How can I do only #3 of this?

Thanks.