I personally prefer to use jQuery over pure javascript in tampermonkey because it gives me more control such as loading the script when the DOM is ready. i.e. wrap the function in a $(document).ready(function() ...

you can try this out (make sure to change the @match)👇

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        <your site here>
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.
// @grant        none
// @require http://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==

(function() {
    'use strict';

    $(document).ready(function() {
        var mail = "test@gmail.com";
        $('[name=user_email]').val(mail);
    });
})();

Change class to id or querySelector. Using getElementsByClassName()will return a collection of NodeList. So think of an array in this instance. If you use getElementsByClassName() you're telling the DOM "Hey I want to work on a number of things" so in order to add that string value to " these number of things", you need to go through them one by one and give them the value i.e you will need to loop through this NodeList and do what you want on "these number of things".

When to use getElementsByClassName

In your case, since you're only working on one input, it's easier to select using id and go with that. If you have say 10 different input fields that you need to use a prefill for then use getElementsByClassName() but if you only have like 2 or 3 fields i recommend just giving each one a unique id and using that

  var mail = "test@gmail.com";
  document.getElementById('form-control-input').value = mail

 

<input type="text" name="user_email" id="form-control-input" value="" placeholder="Enter your Email" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">