Copy environment

Form 

<div class="section     section--mt-large     section--mb-large form">
    <div class="section__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
                <div class="section__title animation__target">
                    <h2>Let’s start the conversation</h2>
                </div>
                <div class="section__content ">
                    <form action="/">
                        <div class="grid form__grid">
                            <div class="grid__col grid__col--xs-12 form__grid-col animation__target">

                                <div class="textfield
    ">
                                    <label class="textfield__label " for="name">
                                        Hello </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="name" name="name" placeholder="Whats your name">
                                    </div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-12 form__grid-col animation__target">

                                <div class="textfield
    ">
                                    <label class="textfield__label " for="email">
                                        We can reach you at </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="email" name="email" placeholder="Your email address">
                                    </div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-12 form__grid-col animation__target">

                                <div class="textfield
     textarea">
                                    <label class="textfield__label " for="details">
                                        Tell us more </label>
                                    <div class="textfield__inner">
                                        <textarea class="textarea__field" id="details" name="details"></textarea>
                                        <span class="textfield__input textarea__input" contenteditable> </span>
                                        <span class="textarea__placeholder">Your project details</span>

                                    </div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-12 form__grid-col animation__target">

                                <button type="submit" class="button button--magnetic">
                                    <span class="button__filler"></span>
                                    <span class="button__inner">
                                        <span class="button__text">Send</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>
</div>
 
{% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set bottomSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.bottomSpacing %}
            section--mb-small
        {% elseif 'medium' in data.bottomSpacing %}
            section--mb-medium
        {% else %}
            section--mb-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set content %}
    {% set defaultForm %}
        <form action="/">
            <div class="grid form__grid">
                <div class="grid__col grid__col--xs-12 form__grid-col animation__target">
                    {% include '@textfield' with { data: { label: 'Hello', placeholder: 'Whats your name', id: 'name', name: 'name' } } %}
                </div>
                <div class="grid__col grid__col--xs-12 form__grid-col animation__target">
                    {% include '@textfield' with { data: { label: 'We can reach you at', placeholder: 'Your email address', id: 'email', name: 'email' } } %}
                </div>
                <div class="grid__col grid__col--xs-12 form__grid-col animation__target">
                    {% include '@textarea' with { data: { label: 'Tell us more', placeholder: 'Your project details', id: 'details', name: 'details' } } %}
                </div>
                <div class="grid__col grid__col--xs-12 form__grid-col animation__target">
                    {% include '@button' with { type: 'submit', data: { text: 'Send' }, class: '', modifier: 'button--magnetic' } %}
                </div>
            </div>
        </form>
    {% endset %}
    {{ data.form|default(defaultForm) }}
{% endset %}
{% include '@section' with { class: 'form', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { title: data.title, content: content }, container: true } %}

{
  "language": "en-US",
  "data": {
    "title": "Let’s start the conversation"
  }
}
  • Content: 
    .form--has-captcha .grecaptcha-badge {
    visibility: hidden;
}

.form__grid {
    margin-bottom: -56px;

    @include bp(md-min) {
        margin-bottom: -72px;
    }
}

.form__grid-col {
    margin-bottom: 56px;

    @include bp(md-min) {
        margin-bottom: 72px;
    }

    &:nth-last-child(2) {
        margin-bottom: 32px;

        @include bp(md-min) {
            margin-bottom: 48px;
        }
    }
}

.gfield.hidden_label .gfield_label {
    @include visually-hidden;
}
  • URL: /components/raw/form/form.scss
  • Filesystem Path: src/patterns/modules/form/form.scss
  • Size: 485 Bytes