Contact Form¶

Styles for a contact form used in contact_form module.

Structurally there is one main element .contact-form containing following two elements:

.contact-form__description
.contact-form__additional-info

And .contact-form__additional-info contains one modifier:

.contact-form__additional-info_secondary

Example¶

Here is an example of contact form element usage.

HTML

<contact-form module-instance-id="1" class="contact-form">
    <div class="contact-form__description">Description</div>

    <div class="contact-form__additional-info">
        <i>
            Required fields are marked with -
            <span class="contact-form__additional-info_secondary">*</span>
        </i>
    </div>

    <div slot="form">
        <input type="text" placeholder="name" name="name" />
        <input type="text" placeholder="email" name="email"/>
        <input type="text" placeholder="subject" name="subject" />
        <input type="text" placeholder="content" name="content" />
        <button>Send</button>
    </div>
</contact-form>

Contact Form tags¶

The .contact_form classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any contact form less variable in your User Less section to change contact form styles.

Contact Form variables¶

Variables used to style a contact form.

@contactFormMaxWidth: 639px;

@contactFormDescriptionMarginTop: @globalSpacing * 1.5;
@contactFormDescriptionMarginBottom: @globalSpacing;

@contactFormDescriptionPaddingVertical: @globalSpacing / 4;
@contactFormDescriptionPaddingHorizontal: @globalSpacing / 2;

@contactFormDescriptionFontSizeInPx: @fontSizeInPxS;
@contactFormDescriptionLineHeightInPx: @lineHeightInPxS;

If you want to change contact form styles, you can just change the variables. To change a default max-width just modify @contactFormMaxWidth variable.

@contactFormMaxWidth: 200;

Contact Form styles¶

Here are standard contact form styles.

.contact-form {
    max-width: @contactFormMaxWidth;
    margin: 0 auto;

    &__description {
        .font-size(@contactFormDescriptionFontSizeInPx);
        .line-height(@contactFormDescriptionLineHeightInPx);

        margin: @contactFormDescriptionMarginTop 0 @contactFormDescriptionMarginBottom;
        padding: @contactFormDescriptionPaddingVertical @contactFormDescriptionPaddingHorizontal;
    }
}

Modules reference¶

contact_form