Online lead from custom template

This is a custom template That can be used for creating online customer forms in Netsuite.

The online customer forms can be used to create a new lead from the website. While submitting the form a lead record will be created on the NetSuite.

<NLFORM>
  <!DOCTYPE html>
  <html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
    <title></title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
      textarea {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        line-height: 1.42857143 !important;
        color: #555 !important;
        background-color: #fff !important;
        background-image: none !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
      }
    </style>
    <style>
      img.bg-img {
        min-height: 100%;
        height: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 0;
      }

      legend {
        margin-top: 15px;
        font-weight: bold;
        font-family: inherit;
        font-size: xxx-large;
      }

      input,
      button,
      select,
      textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
      }

      input,
      select {
        display: block;
        width: 100% !important;
        height: 34px !important;
        padding: 6px 12px;
        font-size: 14px !important;
        line-height: 1.428571429;
        color: #555555;
        vertical-align: middle;
        background-color: #ffffff;
        background-image: none;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      }

      input:focus,
      select:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
      }

      input:-moz-placeholder {
        color: #999999;
      }

      input::-moz-placeholder {
        color: #999999;
        opacity: 1;
      }

      input:-ms-input-placeholder {
        color: #999999;
      }

      input::-webkit-input-placeholder {
        color: #999999;
      }

      input[disabled],
      input[readonly],
      fieldset[disabled] input {
        cursor: not-allowed;
        background-color: #eeeeee;
      }

      textarea {
        height: auto;
      }

      button,
      input,
      select,
      textarea {
        font-family: inherit;
        font-size: 100%;
        margin: 0;
      }

      button,
      input {
        line-height: normal;
      }

      button,
      select {
        text-transform: none;
      }

      button,
      html input[type="button"],
      input[type="reset"],
      input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
      }

      .form-group {
        margin-bottom: 15px;
      }

      .form-action {
        margin-top: 20px;
      }

      .sub_head {
        font-weight: bold;
        font-family: inherit;
        font-size: large;

      }
      .radio_section input{
        width:auto !important;
        display: none;
      }
      .inlinediv{
        display: inline-block;
      }
      .button1{
        font-size:25px;
        font-family:HelveticaNeueLTStd-Md_1g;
        color:#FFF;
        background-color: orange;
        border: none;
        float: right;
        padding-right: 5%;
        padding-left: 5%;
      }
      .hideitems{
        display: none;
      }
    </style>
  </head>

  <body>
  <div class="container">
    <div class="row">
      <header class="col-md-9">
        <div class="page-header">
          <h1>
          </h1>
        </div>
      </header>
    </div>
    <div class="row">
      <form role="form">
        <div class="col-md-9">
          <div class="row">
            <div class="col-md-12">
              <legend>Need a special quote for your quantity?
              </legend>
              <div class="col-md-12">
                <p>Simply fill out the form below, and we’ll send you a quote within 24 hours.</p>
                <img width="100%" src="https://myron-us.sb1.kodel.la/SSP%20Applications/Myron%20Corp._1072230/2020.2.4%20-%20Myron%20US/img/quote_banner.jpg"></img>
              </div>
              <div class="col-md-12">
                <div class="sub_head">
                  <br><p>Let us know the best way we can contact you.</p>
                </div>
                <br>
              </div>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="nlcompanyname">First Name*</label>
                  <nlcustentity_first_name1>
                  </nlcustentity_first_name1>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="nlcompanyname">Last Name*</label>
                  <nlcustentity_last_name1>
                  </nlcustentity_last_name1>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="nlcompanyname">Company Name*</label>
                  <nlcompanyname>
                  </nlcompanyname>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="nlcompanyname">Type of Company</label>
                  <nlcustentity_type_of_company>
                  </nlcustentity_type_of_company>
                </div>
              </div>
              <br>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="email">Email*</label>
                  <nlemail>
                  </nlemail>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="control-group">
                  <label class="control-label" for="Phone">Phone</label>
                  <nlphone>
                  </nlphone>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="sub_head">
                  <br><p>Preferential contact option</p>
                </div>
                <div class="radio_section">
                  <div class="col-sm-12">
                    <div class="inlinediv">
                      <NLCUSTENTITY_BYEMAIL>
                      </NLCUSTENTITY_BYEMAIL>
                      <label>By Email</label>
                    </div></div>
                  <div class="col-sm-12">
                    <div class="inlinediv">
                      <NLCUSTENTITY_BYPHONE>
                      </NLCUSTENTITY_BYPHONE>
                      <label>By Phone</label>
                    </div> </div>
                </div>
              </div>
              <br>
            </div>
            <div class="hideitems">
              <div class="col-md-6">
                <div class="control-group">
                  <label class="control-label" for="Subsidiary"></label>
                  <nlsubsidiary>
                  </nlsubsidiary>
                </div>
              </div></div>

            <div class="col-md-12">
              <div class="col-md-12">
                <div class="sub_head">
                  <br><p>Let us know more about the product you want.</p><br>
                </div> </div>
              <div class="col-md-6">
                <div class="control-group">
                  <label class="control-label" for="Message"> Delivery Date</label>
                  <nlcustentity_delivery_date>
                  </nlcustentity_delivery_date>
                </div>
              </div>
              <div class="col-md-6">
                <div class="control-group">
                  <label class="control-label" for="Message"> Occasion/Events</label>
                  <NLCUSTENTITY_OCCASION_EVENT>
                  </NLCUSTENTITY_OCCASION_EVENT>
                </div>
              </div>
              <div class="col-md-12">
                <div class="control-group">
                  <label class="control-label" for="Message"> Budget</label>
                  <NLCUSTENTITY_BUDGET>
                  </NLCUSTENTITY_BUDGET>
                </div>
              </div>
              <div class="col-md-6">
                <div class="control-group">
                  <label class="control-label" for="Message"> Quantity</label>
                  <NLCUSTENTITY_QUANTITY>
                  </NLCUSTENTITY_QUANTITY>
                </div>
              </div>
              <div class="col-md-6">
                <div class="control-group">
                  <label class="control-label" for="Message"> Required Products</label><br>
                  <NLCUSTENTITY_REQUIRED_PRODUCTS>
                  </NLCUSTENTITY_REQUIRED_PRODUCTS>
                </div>
              </div>
              <div class="col-md-12">
                <div class="control-group">
                  <label class="control-label" for="Message"> Further details/questions</label>
                  <NLCUSTENTITY_FURTHER_QUESTIONS>
                  </NLCUSTENTITY_FURTHER_QUESTIONS>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-action">
                <button type="submit" class="button1">Submit>
                </button>
              </div>
            </div>
          </div>
        </div>
    </div>
    </form>
  </div>
  <div class="col-md-9">
    <hr>
    <footer class="text-muted">
      <p class="pull-right">* Required fields
      </p>
    </footer>
  </div>
  </body>
  </html>
  <NLFORM>

Leave a comment

Your email address will not be published. Required fields are marked *