<div class="main-div">
    <div class="col-md-12">
      <div class="panel panel-info">
        <div class="panel-heading ">
          <h1 class="panel-title p-heading panel-head">Campaign URL Builder</h1>
        </div>
      </div>
    </div>
  
    <form id="utm-form">
      <div class="form-group">
        <label>website URL*</label>
        <input type="url" class="form-control" name="utm_url" id="url" value="" placeholder="Enter website URL*" required="required">
        <small class="form-text text-muted">The full website URL (e.g. https://www.example.com)</small>
      </div>
  
      <div class="form-group">
        <label>campaign ID*</label>
        <input type="text" class="form-control" name="utm_id" id="camp-id" value="" placeholder="Enter campaign ID*" required="required">
        <small class="form-text text-muted">The ads campaign id.</small>
      </div>
  
      <div class="form-group">
        <label>campaign source*</label>
        <input type="text" class="form-control" name="utm_source" id="camp-source" value=""
          placeholder="Enter campaign source*" required>
        <small class="form-text text-muted">The referrer (e.g. google, newsletter)</small>
      </div>
  
      <div class="form-group">
        <label>campaign medium*</label>
        <input type="text" class="form-control" name="utm_medium" id="camp-medium" value=""
          placeholder="Enter campaign medium" required>
        <small class="form-text text-muted">Marketing medium (e.g. cpc, banner, email)</small>
      </div>
  
      <div class="form-group">
        <label>campaign name*</label>
        <input type="text" class="form-control" name="utm_name" id="camp-name" value="" placeholder="Enter campaign name*"
          required>
        <small class="form-text text-muted">Product, promo code, or slogan (e.g. spring_sale) One of campaign name or
          campaign id are required.</small>
      </div>
  
      <div class="form-group">
        <label>campaign term</label>
        <input type="text" class="form-control" name="utm_term" id="camp-term" value="" placeholder="Enter campaign term">
        <small class="form-text text-muted">Identify the paid keywords</small>
      </div>
  
      <div class="form-group">
        <label>campaign content</label>
        <input type="text" class="form-control" name="utm_content" id="camp-content" value=""
          placeholder="Enter campaign content">
        <small class="form-text text-muted">Use to differentiate ads.</small>
      </div>
    </form>
    <!-- error msg on ui -->
    <div class="form-group">
      <h1 id="error-msg" style="color: red; font-size: small;margin-left: 2%;" ></h1>
      </div>
    </div>
    <!-- generated url head-->
    <div class="col-md-12">
      <div class="panel panel-info">
        <div class="panel-heading ">
          <h1 class="panel-title p-heading panel-mid">Generated Url</h1>
        </div>
      </div>
    </div>
    <!-- generated url and shortened -->
    <div id="g-url-form" class="form-group" >
      <input type="url" class="form-control" id="g-url" value="" placeholder="Generated URL">
      <hr>
      <!-- shortened url -->
      <input type="url" class="form-control" id="s-url" value=""
        placeholder="Click shorten link to shorten your generated URL">
      <button style="background-color:#00acac;" id="short-url" type="button" class="btn btn-primary btn-sm">Shorten
        link</button>
    </div>
  
  
  </div>
  
  
  <style>
    #utm-form {
      width: 50%;
      margin-left: 2%;
    }
  
    .panel-head {
      font-size: 3rem;
      padding: 20px;
    }
  
    .panel-mid {
      font-size: 2rem;
    }
  
    #g-url-form {
      width: 50%;
      margin-left: 2%;
    }
  
    .btn {
      margin: 2% 0 0 0;
    }
  </style>