Custom Google Form using Bootstrap

custom-google-form-using-bootstrap.markdown

Custom Google Form using Bootstrap

A Pen by Elon Zito on CodePen.

License.

index.html

<div class="row" style="padding:40px;">
  <p>Just paste your google form URL into the action attribute and you will have a working custom form that you can style as you'd like!</p>
  <br/>
  <form action="https://docs.google.com/forms/d/e/1FAIpQLSfYzqGriJLvrcGl1fsyNiijTRZZsPOuFfR3miNNh_XYefuGeA/formResponse" method="post" id="application-form" target="_blank">
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" name="entry.2005620554" value="" class="form-control name" id="entry_2005620554" dir="auto" aria-label="Name  " aria-required="true" placeholder="Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" name="entry.1045781291" value="" class="form-control email" id="entry_1045781291" dir="auto" aria-label="Email  " aria-required="true" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" name="entry.1166974658" value="" class="form-control phone" id="entry_1166974658" dir="auto" aria-label="Phone Number  " aria-required="true" placeholder="Phone">
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <input type="submit" id="submit" class="btn btn-custom" name="submit" value="Submit Test Form">
      </div>
    </div>
</form>
</div>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />