Contact Form 2 Foundation

contact form contact us
1 Download Preview

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

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - Contact 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" 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-2 bg-light">

        <div class="grid-container">
            <div class="contact-wrap">
                <div class="grid-x grid-padding-x align-center">
                    <div class="cell large-8 text-center">
                        <strong class="contact-subtitle text-uppercase text-muted">Get Started</strong>
                        <h1 class="contact-title medium-12">Get in Touch with Us</h1>
                    </div>
                </div>

                <div class="contact-form">
                    <div class="form-group">
                        <textarea name="message" id="message" cols="30" rows="5" placeholder="Send us your queries or feedback" class="form-control"></textarea>
                    </div>
                    <div class="form-group inline">
                        <div class="inline-fill">
                            <input type="text" class="form-control" placeholder="Your E-mail">
                        </div>
                        <button class="button primary"><i class="fab fa-telegram-plane"></i></button>
                    </div>
                </div>
            </div>

            <div class="grid-x grid-padding-x align-center address-wrap">
                <div class="cell medium-4 large-4 text-center">
                    <address>
                        <div class="address-title">West Chicago, IL</div>
                        <span>44 Shirley Ave.<br>West Chicago, IL 60185</span>
                    </address>
                </div>
                <div class="cell medium-4 large-4 text-center">
                    <address>
                        <div class="address-title">Orlando, FL</div>
                        <span>514 S. Magnolia St.<br>Orlando, FL 32806</span>
                    </address>
                </div>
                <div class="cell medium-4 large-4 text-center">
                    <address>
                        <div class="address-title">Honolulu, HI</div>
                        <span>
                            4 Goldfield Rd.<br>
                            Honolulu, HI 96815
                        </span>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <!-- /.contact-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$header-font-family: $body-font-family;
$primary: #5863f8;
$dark-blue: #5863f8;
$white: $white;
$light-gray: #f8f9fa;
$light-text: #adb5bd;
$body-font-color: #212529;

$input-placeholder-font-color: #6c757d;
$input-border: 2px solid #dee2e6;
$input-border-focus: 2px solid rgba($primary, .5);
$input-shadow: none;
$input-shadow-focus: 0 0 0 0.2rem rgba($primary, 0.15);

$button-radius: 4px;

// Custom CSS
.form-control {
  width: 100%;
  border: $input-border;
  border-radius: $button-radius;
  box-shadow: $input-shadow;
  margin-bottom: 0;

  &:focus {
    border: $input-border-focus;
    box-shadow: $input-shadow-focus;
  }

  &::-webkit-input-placeholder {
    color: $input-placeholder-font-color;
  }

  &:-moz-placeholder {
    color: $input-placeholder-font-color;
    opacity: 1;
  }

  &::-moz-placeholder {
    color: $input-placeholder-font-color;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: $input-placeholder-font-color;
  }
}

.bg-light {
  padding-top: 2rem;
  background: $light-gray;
}

.contact-2 {
  font-family: $body-font-family;
  color: $body-font-color;
  @include padding-direction('vertical', 1.5);
}

.contact-wrap {
  @include padding-direction('horizontal', .5);
}

.contact-form {
  margin-top: 1.25rem;

  .button {
    @include padding-direction('horizontal', 1);
    margin-left: 1rem;
    margin-bottom: 0;
  }
}

.form-group {
  margin-bottom: 1rem;

  &.inline {
    display: flex;
  }
}

.inline-fill {
  flex: 1 1 auto;
}

.text-muted {
  color: $light-text;
  text-transform: uppercase;
}

.contact-title {
  font-family: $header-font-family;
  font-size: 1.75rem;
  line-height: 1.2;
  @include margin-direction('vertical', .5);
}

.address-wrap {
  border-top: 2px solid #dee2e6;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.button {
  border-radius: $button-radius;
  padding: 8px 1px;
  font-size: 16px;
  line-height: 20px;
  background-color: $primary;

  &.primary {
    @include button-style($primary, 'auto', $white);
  }

  &.hollow {
    @include button-hollow-style($white);

    &:hover, &:focus, &:active {
      background-color: $white;
      border-color: $white;
    }
  }
}

.address-title {
  font-weight: 700;
  margin-bottom: .5rem;
}

address {
  font-style: normal;
  margin-bottom: 1rem;

  span {
    font-size: 14px;
  }
}


@media #{breakpoint(medium)} {

  .contact-2 {
    @include padding-direction('vertical', 3);
  }

  .contact-wrap {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-light {
    padding-top: 3rem;
  }

  .contact-form {
    margin-top: 2.5rem;
  }

  .address-wrap {
    margin-top: 5rem;
    padding-top: 1.5rem;
  }

  address {
    margin-bottom: 0;
  }

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

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.form-control {
  width: 100%;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 0;
}

.form-control:focus {
  border: 2px solid 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);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
}

.form-control:-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
}

.bg-light {
  padding-top: 2rem;
  background: #f8f9fa;
}

.contact-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #212529;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.contact-wrap {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.contact-form {
  margin-top: 1.25rem;
}

.contact-form .button {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  margin-left: 1rem;
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group.inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.inline-fill {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.text-muted {
  color: #adb5bd;
  text-transform: uppercase;
}

.contact-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.75rem;
  line-height: 1.2;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.address-wrap {
  border-top: 2px solid #dee2e6;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.button {
  border-radius: 4px;
  padding: 8px 1px;
  font-size: 16px;
  line-height: 20px;
  background-color: #5863f8;
}

.button.primary {
  background-color: #5863f8;
  color: #fefefe;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fefefe;
}

.button.hollow {
  border: 1px solid #fefefe;
  color: #fefefe;
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #7f7f7f;
  color: #7f7f7f;
}

.button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
  border: 1px solid #fefefe;
  color: #fefefe;
}

.button.hollow:hover, .button.hollow:focus, .button.hollow:active {
  background-color: #fefefe;
  border-color: #fefefe;
}

.address-title {
  font-weight: 700;
  margin-bottom: .5rem;
}

address {
  font-style: normal;
  margin-bottom: 1rem;
}

address span {
  font-size: 14px;
}

@media (min-width: 40em) {
  .contact-2 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .contact-wrap {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .bg-light {
    padding-top: 3rem;
  }
  .contact-form {
    margin-top: 2.5rem;
  }
  .address-wrap {
    margin-top: 5rem;
    padding-top: 1.5rem;
  }
  address {
    margin-bottom: 0;
  }
  .contact-title {
    font-size: 2.25rem;
  }
}

Similar Blocks

Contact Form 1
1
Contact Form 1
Signup Form 1
1
Signup Form 1
Signup Form 2
0
Signup Form 2
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9mb3JtL2NvbnRhY3QtZm9ybS0y

By using our website you agree to our Cookie Policy