Contact form block for use with homepage of websites and landing pages.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Contact 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="contact-1 py-3 py-md-5">

        <div class="container">
            <div class="row">

                <div class="col-xl-10 mx-auto">

                    <div class="row contact-intro">
                        <div class="col-xl-9">
                            <h1 class="contact-title mb-3 mb-mb-4">We would love to hear from you</h1>
                            <p class="lead mb-2">Please submit your information and we will get back to you.</p>
                            <p>Call us at <a class="link" href="tel:+12314561231">+1 231 456 1231</a></p>
                        </div>
                    </div>
                    <div class="row mt-3 mt-md-4">
                        <div class="col-md-8">
                            <div class="contact-form">
                                <div class="row gutter-10">
                                    <div class="col-sm-6 mb-4">
                                        <input type="text" class="form-control" placeholder="Full Name">
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <input type="text" class="form-control" placeholder="Company Name">
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <input type="email" class="form-control" placeholder="E-mail address">
                                    </div>
                                    <div class="col-sm-6 mb-4">
                                        <input type="tel" class="form-control" placeholder="Phone Number">
                                    </div>
                                    <div class="col-sm-12">
                                        <textarea name="message" id="message" cols="30" rows="4" class="form-control" placeholder="Your message here"></textarea>
                                    </div>
                                </div>
                                <div class="text-right mt-3 mt-md-5">
                                    <button class="btn btn-outline-primary px-md-4 py-md-2">Send a Message<span class="fas fa-chevron-right ml-2 small"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 px-md-4 box mt-5 mt-md-0">
                                <h5 class="mb-3">Help</h5>
                                <p class="text-muted">Need help or have any query? Don't hesitate, you can directly shoot us an <a href="mailto:" class="link">email</a> or call us at <a href="tel:" class="link">+1 231 456 1231</a>.</p>
                                <p class="text-muted">You can move to <a href="#" class="link">FAQs</a> or <a href="#" class="link">Support</a> page to get more information about our site.</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <!-- /.contact-1 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:   #5863f8;

// Custom CSS
.gutter-10 {
  margin-right: -10px;
  margin-left: -10px;

  > .col,
  > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
  }
}

.btn-outline-primary {
  @include button-outline-variant($primary);
  border: 2px solid rgba($primary, .75);

  .fas {
    transition: margin-right .3s, padding-left.3s;
  }

  @include hover {
    .fas {
      padding-left: 3px;
      margin-right: -3px;
    }
  }
}

.form-control {
  border: 2px solid $gray-300;

  &:focus {
    border-color: rgba($primary, .5);
    box-shadow: 0 0 0 .2rem rgba($primary, .15);
  }
}

textarea {
  resize: none;
}

.contact-title {
  font-size: 1.5rem;
}

.box {
  background-color: rgba($primary, .1);
  border-radius: 1rem;
}

a.link {
  display: inline-block;
  color: $primary;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;

  @include hover {
    text-decoration: none;
    border-bottom-color: $primary;
  }
}


@include media-breakpoint-up(md) {

  .contact-title {
    font-size: 2rem;
  }

}
.gutter-10 {
  margin-right: -10px;
  margin-left: -10px;
}

.gutter-10 > .col,
.gutter-10 > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

.btn-outline-primary {
  color: #5863f8;
  background-color: transparent;
  background-image: none;
  border-color: #5863f8;
  border: 2px solid rgba(88, 99, 248, 0.75);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #5863f8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-outline-primary .fas {
  -webkit-transition: margin-right 0.3s, padding-left 0.3s;
  transition: margin-right 0.3s, padding-left 0.3s;
}

.btn-outline-primary:hover .fas {
  padding-left: 3px;
  margin-right: -3px;
}

.form-control {
  border: 2px solid #dee2e6;
}

.form-control:focus {
  border-color: rgba(88, 99, 248, 0.5);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
}

textarea {
  resize: none;
}

.contact-title {
  font-size: 1.5rem;
}

.box {
  background-color: rgba(88, 99, 248, 0.1);
  border-radius: 1rem;
}

a.link {
  display: inline-block;
  color: #5863f8;
  border-bottom: 1px solid transparent;
  -webkit-transition: border-color .3s;
  transition: border-color .3s;
}

a.link:hover {
  text-decoration: none;
  border-bottom-color: #5863f8;
}

@media (min-width: 768px) {
  .contact-title {
    font-size: 2rem;
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2Zvcm0vY29udGFjdC1mb3JtLTE=