Deploy to netlify button - how to get the title of the input to be the env var name, and the placeholder to be the default value passed on the URL?

3 years ago, I followed the instructions at Create deploys | Netlify Docs to create a nice “deploy to netlify” experience which used to render nicely.

The behavior USED to be that the Netlify deploy UI would read the titles of each environment variable from netlify.toml (for example, FOO = “Set the value of FOO” would render the deploy to netlify page with an input with the title FOO (the name of the env var), and the placeholder text “Set the value of FOO”. And when a default value was passed in the URL (e.g. Netlify), the title would STILL render as “FOO”, and the placeholder value would now read “a cool foo”.

However, at some point in the not too distant past, the behavior has changed. If you pass in default values for these environment variables that are defined in netlify.toml, BOTH the title of the input AS WELL AS the placeholder text are set to the default value. So the title would be rendered as “A cool foo” and the placeholder text “a cool foo”, instead of the title being “FOO”.

This matters, because the user should see what the environment variables are actually called, and only the placeholder text should be overriden with the default value supplied in the URL.

This was how it used to be, but somehow the behavior has changed.

Any tips on getting the behavior I want? omri@aserto.com

hi :wave:t6: @omri thanks for reaching out!

The title and placeholder value of an input field cannot be directly modified through the URL. These properties are usually defined within the site’s HTML or Markdown code, not via URL parameters.

For instance, you can pass environment variables through the URL like this:

https://app.netlify.com/start/deploy?repository=https://github.com/myworkspace/sweetkittentemplate#SECRET_TOKEN=specialuniquevalue&CUSTOM_LOGO=https://placekitten.com/100/100

In this example, SECRET_TOKEN and CUSTOM_LOGO are the environment variables, with specialuniquevalue and https://placekitten.com/100/100 as their respective values.

For more details, check our documnetation:

Hi Sam, thanks for the response!

I have spent alot of time with your docs :slight_smile:

Check out the documentation we wrote about using the “Deploy to Netlify” button over two years ago on our docs site: Deploy PeopleFinder - Aserto Docs

As you can see from the screenshot, we have 10 inputs on the deploy form, each of them corresponding to an environment variable.

Each of the inputs has a label, which (in the screenshot) comes from the netlify.toml file: peoplefinder-acmecorp/netlify.toml at master · aserto-demo/peoplefinder-acmecorp · GitHub

For example, the environment variable REACT_APP_POLICY_ROOT is defined in the netlify.toml file in the following way:

[template.environment]
  REACT_APP_POLICY_ROOT = "Policy root"

And so the label on the very last input you see in the screenshot is rendered as “Policy root”.

The placeholder value that you see in the screenshot for that same input is “peoplefinder”. This was put in there using the URL - like this:

Between these two mechanisms (the label text, that comes from the netlify.toml file, and the default value for the input, which comes from the URL), we were able to render the deploy-to-netlify screen as depicted in the screenshot.

However, this behavior has recently changed. The values in the netlify.toml file don’t seem to be honored anymore. If you click on the deploy URL I posted just above, you’ll see the following screen:

As you can see, all the input labels are still rendered with the text that comes from netlify.toml.

However, for the last input, the label is “peoplefinder” and the value of the input is also “peoplefinder”…

In other words, the behavior has changed. I’m hoping that we can figure out how to get the previous behavior… where the label still comes from the netlify.toml file (in this case, it should say “Policy root”), and the value comes from the deploy URL (in this case, “peoplefinder”).

I hope this makes sense!

Thanks,
Omri.

Hi @SamO any thoughts on this? ^^