コードからウィジェットを作成する

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

body * {
     font-family: "Montserrat";
     font-size: 12px;
}

fieldset {
     border: none;
     border-bottom: 1px solid #dedede;
}

label {
     display: block;
     font-size: 12px;
     margin-bottom: 5px;
}

input, select, textarea {
     display: block;
     padding: 8px 12px;
     width: 100%;
     border-radius: 4px;
     border: 1px solid #eeeeee;
     outline: none;
     font: 400 12px "Roboto", sans-serif;
     color: #333333;
     background: white;
     -webkit-transition: border-color 0.25s ease;
     -o-transition: border-color 0.25s ease;
     transition: border-color 0.25s ease;
}

input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus {
     border-color: #c6c6c6;
}

textarea {
     resize: vertical;
}

input[type="checkbox"] {
     display: inline-block;
     width: auto;
     position: relative;
     top: 1px;
}

input[type="checkbox"] + label {
     display: inline-block;
}

<input id="message" type="text" templateData="messageContent" placeholder="Type your message" />

var userInput = UserData.messageContent;
alert(userInput);