title: Javascript elements blocking each other
body: <p>I am trying to edit a few elements of a form, but the elements are"blocking" each others!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  document.getElementsByClassName("hbspt-form")[0].style.background = "#fffbd5";
  document.getElementsByClassName("hbspt-form")[0].style.border= "solid";
  
  document.getElementsByClassName("hbspt-form")[0].style.boxShadow = "10px 20px 30px ";
  document.getElementsByClassName("hbspt-form")[0].style.borderColor = "#f7761f";
  
  
  setTimeout(function(){}, 10);
  document.getElementsByClassName("hs_input")[0].style.width="300 px";
  document.getElementsByClassName("hs_input")[0].style.background = "#455560";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.color = "#fff";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Could anyone please tell me how I can solve this issue?(I was trying to use variables to prevent this but it didn't work..)</p>
  
  <p>thanks in advance!</p>