Responsive Shipping Form

Written by @kerixa 27 March 2021

Using special styles with forms will increase your website visitors because forms are the place where users connect with your website. The following code has a form for entering invoice information that can be used for store websites or any other websites that finally delivers the invoice to the customers with a shipping form. This form is responsive and its background can be changed with any photo.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
* {
    box-sizing: border-box;
}

body {
    background-color: #ddf;
}

button[type="button"], .nav {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

button[type="button"] {
    margin: 0 5px;
    background-color: #aaf;
    border: 0;
    outline: 0;
}

button[type="button"]:hover,
button[type="button"]:focus {
    text-decoration: underline;
    text-decoration-color: #00f;
    text-decoration-style: double;
}

.myform {
    width: 70vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 10px;
    background-image: url("https://www.htmlbestcodes.com/files/shipping.jpg");
    background-size: cover;
    border: 8px ridge #00f;
}

@media(max-width: 600px) {
.myform {
    width: 96%;
    margin-top:150px;
    padding: 10px 0;
}
}

h1 {
    margin-top: 0;
    color: #eef;
    text-shadow: -1px 1px 1px #00f, -2px 2px 2px #00f, -3px 3px #00f;
    text-align: center;
}

h3 {
    margin-top: 0;
    margin-left: 10px;
    color: #eef;
    text-shadow: -1px 1px 1px #00f, -2px 2px 2px #00f, -3px 3px #00f;
    text-align: left;
}

hr {
    width: 90%;
    height: 5px;
    background-color: #eef;
    border: 2px solid #00f;
}

.column {
    width: 100%;
}

.left {
    float: left;
    width: 50%;
    padding: 0 5px 0 10px;
}

.right {
    float: left;
    width: 50%;
    padding: 0 10px 0 5px;
}

.left1 {
    float: left;
    width: 33.33%;
    padding: 0 5px 0 10px;
}

.middle {
    float: left;
    width: 33.33%;
    padding: 0 5px 0 5px;
}

.right1 {
    float: left;
    width: 33.33%;
    padding: 0 10px 0 5px;
}

label {
    display: block;
    color: #fff;
    font-weight: 700;
}

input[type="text"] {
    display: inline-block;
    width: 100%;
    margin: 5px 0 10px 0;
    padding: 5px;
    background-color: #eef;
    border: 1px solid #00f;
    outline: 0;
    color: #f00;
    font-size: 12px;
}

button[type="submit"] {
    float: right;
    padding: 5px 15px;
    margin: 20px 10px 10px 0;
    background: linear-gradient(-60deg, #07f, #04f, #00f, #77f);
    border: 6px groove #00d;
    outline: 0;
    color: #eef;
    font-weight: 700;
}

button[type="submit"]:hover {
    background: linear-gradient(-60deg, #05f, #02f, #00d, #55f);
    border: 6px groove #00b;
    color: #ccf;
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eef;
    border: 1px solid #00f;
    border-radius: 6px;
}

.container:hover input ~ .checkmark {
    background-color: #ccf;
}

.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 6px;
    top: 0px;
    width: 5px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>
<div class="myform" id="myform">
      <h1 id="library">Shipping Information</h1>
      <div class="column">
        <div class="column left">
          <label>First Name:</label>
          <input type="text" id="fname" required>
          <label>Billing Address:</label>
          <input type="text" id="fline" placeholder="1st line of address" required>
          <label>City/Town:</label>
          <input type="text" id="citwn" required>
          <label style="margin-left: 10px">Card Type:</label>
          <input type="text" id="ctype" required>
        </div>
        <div class="column right">
          <label>Last Name:</label>
          <input type="text" id="lname" required>
          <label>&nbsp;</label>
          <input type="text" id="sline" placeholder="2nd line of address (optional)">
          <label>State/County:</label>
          <input type="text" id="stacty" required>
          <label>Card Number:</label>
          <input type="text" id="cardno">
        </div>
      </div>
      <div class="column">
        <div class="column left1">
          <label>CVC:</label>
          <input type="text" id="cvc">
        </div>
        <div class="column middle">
          <label>Expiration:</label>
          <input type="text" id="expmon" placeholder="month">
        </div>
        <div class="column right1">
          <label>&nbsp;</label>
          <input type="text" id="expyear" placeholder="year">
        </div>
      </div>
      <h3>Receipt</h3>
      <hr>
      <label style="margin-left: 10px;">Send receipt to:</label>
      <input type="text" id="mail" placeholder="Email address" style="width: 96%; margin:10px">
      <label class="container" style="display: inline; margin-left: 10px; font-size: 12px">
      <input type="checkbox" id="notpacked" style="margin-left: 10px">
      <span class="checkmark"></span>
      Do not send receipt in packaging
      </label>
      <br>
      <br>
      <button type="submit" id="submitbtn">SUBMIT</button>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300