CODEWITHSUNDEEP
phphtmlcsswordpresscontact-form-7
user9956893
user9956893

Reputation:

How to add Contact Form 7 fields to my custom HTML code like the screenshot below?

I want to create the same of that html style with wordpress contact form 7 , i just need to make that design work functional with wcf 7
Link

and my example html code : 

<div class="form-group">
    <label>Destination(s)</label>
    <ul class="tags">Fes</ul>
    <ul class="tags">Hight Atlas Mountains</ul>
    <ul class="tags">Marrakech</ul>
    <div class="destinations-wrap">
        <input type="text" class="form-control icon icon-location" name="locations_search" placeholder="e.g. Iceland"
            autocomplete="false">
        <input type="text" class="destinations-suggestion" disabled>
    </div>
    <button class="btn btn-primary destinations-wrap-btn" tabindex="-1">+ Add Another</button>
</div>

Upvotes: 0

Views: 111

Answers (2)

meotig
meotig

Reputation: 76

This my example

You can use only html, and pure javascript. Bellow My Code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="foundlose/vendor/meotip/style.css">
    <meta charset="UTF-8">
    <style type="text/css">

*{
    font-family: "Raleway";
}
span{
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px 15px;
    background-color: #E13547;
    color:#FAFAFA;
    font-weight: bold;
    display:inline-block;
    cursor: pointer;
}
#destination-list{
    padding: 5px;
}

    </style>
</head>
<body>
<div class="container">
    <div class="indef">
        <h1>Travel Information</h1>
        <h6>Destiantion(s)</h6>
    </div>
    <div id="destination-list">

    </div>
    <div class="indef">
        <input type="text" name="" id="destination-input">
    </div>
    <div class="indef">
        <button id="add">Add</button>
    </div>
</div>
<script type="text/javascript">

    var destinationList = document.getElementById('destination-list'),

    destinationInput = document.getElementById('destination-input'),

    add = document.getElementById('add');

    add.onclick = function(){

        var addInput = document.createElement('span'), list = destinationList.getElementsByTagName('span');

        addInput.setAttribute("class",destinationInput.value);

        addInput.textContent = destinationInput.value + " ❌";

        destinationList.appendChild(addInput);

        for(var i = 0; i < list.length; i++){

            list[i].onclick = function(){

                this.parentNode.removeChild(this);

            }

        }

    }

</script>

</body>
</html>

Upvotes: 1

Kiran Mistry
Kiran Mistry

Reputation: 2725

Here is your Solution with bootstrap 4

HTML

<div class="container">
  <div class="jumbotron">
      <h4>
      Travel Information
      </h4>
      <br>
      <h6>
      Destination(s)
      </h6>

      <span class="badge badge-secondary">New <i class="fa fa-times"></i></span>
      <span class="badge badge-secondary">High Atlas Mountains <i class="fa fa-times"></i></span>
      <span class="badge badge-secondary">Marrakesh <i class="fa fa-times"></i></span>
      <span class="badge badge-secondary">Moroccan Sahara <i class="fa fa-times"></i></span>
      <span class="badge badge-secondary">Morocco <i class="fa fa-times"></i></span>


      <div class="row">
        <div class="col-lg-8">
        <br>

       <div class="search">
        <span class="fa fa-map-marker"></span>
        <input type="text" placeholder="e.g Iceland" class="form-control">
      </div>
        </div>

        <div class="col-lg-4">
        <br>
          <button type="button" class="btn btn-orange">
            <i class="fa fa-plus"></i>
            Add Another
          </button>
        </div>
      </div>
  </div>
</div>

CSS

.badge-secondary{
  border-radius: 0px;
  font-size: 15px;
}

.form-control{
  border-radius: 0px;
  height: 50px
}

.btn-orange{
  background-color: #d17841;
  margin-top: 5px;
  color: white;
}


.search { position: relative; }
.search input { text-indent: 30px;}
.search .fa-map-marker { 
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 25px;
  color: #8e8e8e;
}

You Can Edit or Preview Code Here On JsFiddle

Upvotes: 0

Related Questions