Components
31
Background Gradients Blog Post Bullet Left Card Stack Case Study Large Case Study Single Contact Form Cta Demo Faqs Header Resources Homepage Hero Homepage Stats Illustration Left Illustration Right Image Left Image Right Impact Carousel Landing Form Landing Form Landing Form Logo Carousel Logos Software Logo Tab Blocks Table Testimonial Three Blocks Two Column Usp Carousel Video

Contact Form

Get in touch

Whatever your carrier or your ecommerce platform, we can make it smooth and easy for you to add a local pickup option to your site’s checkout page. Speak to one of our team today.

For customer support, please contact clientsupport@hub-box.com

  • London Office: Third Floor, 130 City Road, London, EC1V 2NW
  • Atlanta Office: The Blair Building, 215 Church Street, Suite 202, Decatur, GA 30030

Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
text
heading_text
Sub Heading
text
sub_heading
Image
image
img
Address Data
wysiwyg
address_data
Button Type
select
button_one_button_type
Button Color
select
button_one_button_color
Button Link
link
button_one_button_link
Button Type
select
button_two_button_type
Button Color
select
button_two_button_color
Button Link
link
button_two_button_link
Form
text
form
Form Embed
textarea
form_embed
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom

				
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-contact-form {
    &__image-wrapper {
        img {
            width: 100%;
            border-radius: 20px;
        }
    }

    &__text-wrapper {
        picture {
            img {
                border-radius: 20px;
            }
        }
        ul {
            li {
                @include margin(rem-calc(20 0));
                @include fluid-type(16, 18, 375, $max-container-size);
                color: $secondary;
                font-weight: 400;
                a {
                    display: block;
                    @include fluid-type(16, 18, 375, $max-container-size);
                    color: $secondary;
                    font-weight: 400;

                    &:hover {
                        color: $primary;
                    }
                }
            }
        }
    }

    &__form-wrapper {
        // padding-left: 6.25rem;
        max-width: 89%;

        @include bp($lg, true) {
            max-width: 100%;
            padding-left: 0;
            @include margin-top(rem-calc(2.5rem));
        }
    }

    &__form-wrapper-field {
        @include margin-bottom(rem-calc(2.209rem));
    }

    p {
        font-weight: 400;
        @include margin-bottom(rem-calc(3rem));
    }

    .gfield--type-html {
        @include margin-bottom(rem-calc(0.938rem));
        @include margin-top(rem-calc(0.938rem));
    }

    .gform_wrapper.gravity-theme {
        .gform_fields {
            grid-row-gap: 35px;
        }
    }

    .gform_validation_errors {
        display: none;
    }

    .gform_wrapper.gravity-theme {
        .gfield_error [aria-invalid="true"] {
            border-bottom: 1px solid $error;
            border-top: none;
            border-left: none;
            border-right: none;
        }

        .gfield_validation_message {
            display: none;
        }
    }

    .gform_confirmation_message {
        color: $success;
        font-weight: 700;
        @include padding-bottom(rem-calc(20));
    }
}

.block-contact-form-heading {
    position: relative;
    &__wrapper {
        text-align: center;
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;

        @include bp($lg, true) {
            max-width: 100%;
        }

        @include bp($md, true) {
            @include margin-top(rem-calc(30));
        }

        h1 {
            @include margin-bottom(rem-calc(1.875rem));
        }

        .heading {
            @include margin-bottom(rem-calc(1.875rem));
        }

        p {
            font-weight: 400;
        }
    }
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.