JSFiddle - React, Tailwind, and code Playground

HTML

<input type="hidden" id="input-book-type" type="" value="GlassCrystal">

<br><br>

<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>

<br><br>

<select id="select-page-num">
<option value="20">20</option>
<option value="22">22</option>
</select>

<br><br>

<input id="input-project-title" type="" value="Optional Project Title">

<br><br>


<a class="button" id="design-button" href="http://test/">Design Now</a>

JavaScript

window.onload = function() {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var pagenum = document.getElementById("select-page-num");
var projtitle = document.getElementById("input-project-title");

document.getElementById("design-button").onclick = function() {
this.href = "http://design.framesmile.com/?sessionid=guest&ref="+booktype.value+pagesize.value+"*projectName="+projtitle.value+""/";
};
}