Form HubSpot

by 25058214

HTML

<div class="HS_Form">


<select id="formSelect">
    <option value="">¿Cómo podemos ayudarte?</option>
    <option value="83c727f9-1f2c-4e39-b2f4-f62f4dccf5fb">Formulario 1</option>
    <option value="83c727f9-1f2c-4e39-b2f4-f62f4dccf5fb">Formulario 2</option>
    <option value="83c727f9-1f2c-4e39-b2f4-f62f4dccf5fb">Formulario 2</option>
    <option value="83c727f9-1f2c-4e39-b2f4-f62f4dccf5fb">Formulario 2</option>
    <option value="83c727f9-1f2c-4e39-b2f4-f62f4dccf5fb">Formulario 2</option>
</select>
<div id="HS_Form_Form" class="HS_Form_Form"></div>
</div>
<script>
      
document.getElementById("formSelect").addEventListener("change", function(e) {
    loadHubSpotForm(e.target.value);
});

function loadHubSpotForm(formId) {
    if(!window.hbspt) {
        var script = document.createElement("script");
        script.src = "//js.hsforms.net/forms/embed/v2.js";
        script.type = "text/javascript";
        script.charset = "utf-8";
        script.onload = function() {
            createHubSpotForm(formId);
        }
        document.body.appendChild(script);
    } else {
        createHubSpotForm(formId);
    }
}

function createHubSpotForm(formId) {
    hbspt.forms.create({
        region: "na1",
        portalId: "5647943",
        css: "",
        target: '#HS_Form_Form',
        formId: formId
    });
}

</script>

CSS

:root{
--primaryFont:"Source Sans Pro", Sans-serif;
--formInputFont: var(--primaryFont);
--formLabelFont: var(--primaryFont);
}
.HS_Form select{
  font-family: var(--primaryFont);
  padding:10px 15px;
  margin-bottom:25px;
}
.HS_Form_Form ul,
.HS_Form_Form li{
  margin:0;
  padding:0;
  list-style:none;
}
.HS_Form_Form form fieldset + fieldset{
  display:flex;
  margin-top:15px;
}
.HS_Form_Form{
  font-family: var(--primaryFont);
}
.HS_Form_Form form label {
    padding: 0px;
    font-family: var(--formLabelFont);
    font-style: normal;
    font-weight: normal;
    color: #222222;
    font-size: 15px;
}
.HS_Form_Form form label.hs-error-msg{
  color:#f2545b;
  font-size:12px;
}
.HS_Form_Form form input[type='text'], 
.HS_Form_Form form input[type='email'], 
.HS_Form_Form form input[type='password'], 
.HS_Form_Form form input[type='tel'], 
.HS_Form_Form form input[type='number'], 
.HS_Form_Form form select, 
.HS_Form_Form form textarea {
    border:none;
    border-bottom: 1px solid #cad5e2;
    padding-left:10px!important;
    padding-right:10px;
    font-family: var(--formInputFont);
    background-color: rgba(255, 255, 255, 1.0);
    border-radius: 0;
    color: #222222;
    font-size: 16px;
    width: 100%!important;
}
.HS_Form_Form form .hs-button.primary{
  margin-top:20px;
  padding:15px 25px;
  background: #123dc6;
  border:none;
    color: #ffffff;
    font-size: 15px;
    line-height: 15px;
    font-family: var(--primaryFont);
}