javascript - Form formatting- Bootstrap & Google Web Apps Script

Question

I have a custom form I am having trouble formatting. I copied one of my previous forms to use contents of it I liked. It is connected to my Google Sheet; the functionality of everything works perfectly fine. I would like to make it "prettier", however. I would like to change column sizes for specific fields, as well as make certain fields inline or horizontal form groups (instead of the labels above). I have tried to look through multiple websites (Bootstrap, W3 Schools, etc., etc.) I think something in my CSS is preventing me from being able to do what I am hoping, but I can't figure out where.

Here is my CSS below.

<style type="text/css">
#msgToUsr {
    position: absolute;
    left: 30%;
    width: 40%;
    background-color: white;
    border: 2px solid #ff3333;
    font: bold 15px 'Tahoma', serif;
    text-align: center;
    display:none;
}

#titleOfForm {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6px;
  width:850px;
  height:12px;
  border: solid 1px lightgray;
  border-radius: 5px;
  background: #b3b3b3;
  font: normal 13px 'Tahoma', serif;
  color: #FFF;
  padding: 13px;
  text-align:center;
}

img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width:275px;
      height:200px;
}

form {
    width:800px;
    padding:30px;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    font: bold 14px 'Tahoma', serif;
    color: #424270;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}

h2 {
    width:800px;
    padding:30px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    font: bold 15px 'Tahoma', serif;
    border-radius: 10px;
    background: #424270;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    -moz-box-shadow: 1px 1px 4px #DADADA;
    -webkit-box-shadow: 1px 1px 4px #DADADA;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

h1 {
    background: #424270;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Tahoma', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #323264;
}

h1 > span {
    display: block;
    margin-top: 2px;
    font: 13px Tahoma, sans-serif;
}

label {
    display: block;
    font: normal 15px Tahoma, sans-serif;
    color: #888;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="file"],
textarea,
select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 5px;
    outline: none;
    font: 14px Tahoma, sans-serif;
    border: 1px solid #dfdfec;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

section{
    font: bold 20px 'Tahoma', serif;
    color: #323264;
    margin-bottom: 10px;
}

section span {
    background: #323264;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #fff;
    font: bold 1px 'Tahoma', serif;
    font-size: 15px;
    margin-left: -45px;
    color: #fff;
    margin-top: -3px;
}

input[type="button"], 
input[type="submit"]{
    background: #424270;
    padding: 8px 20px 8px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: bold 30px 'Tahoma', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #424270;
    font-size: 15px;
}
input[type="button"]:hover, 
input[type="submit"]:hover{
    background: #555591;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}

</style>

Not sure if this can be solved easily by looking at the CSS. If it helps, I can provide more of the coding for the actual form. If I am not able to have different formatting styles, I would like to implement collapses, but I am also having trouble with that...

question from:https://stackoverflow.com/questions/65889244/form-formatting-bootstrap-google-web-apps-script

Answer 1

Waitting for answers