Component Menu

Components

Webform w/ Options

Choose a form from several templates and further personalize it to fit your needs.

Edited 3 years 10 months ago

Desktop

Input Text Normal

</div>

Input

Height: 53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_neutral_medium

Color Backgroud: $color_neutral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_ neutral_dark

Placeholder text

$font_weight_regular

$color_neutral_medium

Input Text Hover

</div>

Input

Height: 53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_secondary_medium

Color Backgroud: $color_ neutral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_neutral_dark

Placeholder text

$font_weight_regular

$color_neutral_medium

Cursor:

- pointer

Input Text Activated

</div>

Input

Height: 53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_neutral_medium

Color Backgroud: $color_ netral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_neutral_dark

Placeholder text

$font_weight_regular

$color_neutral_dark

Input Type Warn

</div>

Input

Height: 53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_feedback_warning_medium

Color Backgroud: $color_ neutral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_feedback_warning_medium

Placeholder text

$font_weight_regular

$color_ neutral_darkest

Help text

$font_size_XXXS

$font_weight_regular

$color_feedback_warning_medium

Input Text Disabled

</div>

Input

Height:53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_neutral_medium

Color Backgroud: $color_ netral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_neutral_medium

Input Select Activated

</div>

Input

Height: 53px

Outline Border: $outline_border_thin

Border Rádios: $border_radios_small

Border Color: $color_neutral_medium

Color Backgroud: $color_ netral_lightest

Typography

$font_family_2

$font_size_XXS

$font_line_height_short

$font_spacing_defaut

Label text

$font_weight_bold

$color_ neutral_dark

Placeholder text

$font_weight_regular

$color_neutral_dark

Icon

-arrow down

Mobile

Using

cervezapatagonia.com.br www.castlelager.co.za

Application

Step by Step

Applying the Component:

1. On the page that you want to add a Webform, click “+” on the Layout Canvas.

2. In the list of components, search for the Webform w/options, drag, and drop it to the layout.

2. Click twice on the component to customize:

• Entity: search on the list for the Webform that you created in Content.

• Title: inform a title for your Webform.

• Description: write a brief description of the Webform.

Timer settings:

• Time: If you want you can determine the maximum time for filling the form selecting an option on the list.

• Timer Color/ background color: select a color for the Timer and the background of color.

• Modal Settings: here you can write a message of filling confirmation.

• Modal width: Select a size for the Modal of confirmation.

• Show site name: To show the name of your site on the Modal, select ON.

• Success Icon: this icon will be shown on the Modal of confirmation, if you want it, choose the options to customize.

• Call to action: here you can add a link to redirect the user to other page, after to concluded the form. If you want it, select ON and paste the link and inform a text for the Call to action button.

Form Style:

• Form Action align: select an option for the elements alignment.

• Padding: define the space between the elements inside the form and the border of the form.

• General Colors: select the color options that you want to customize your form.

• Input Colors: these colors will be applied on the fields of filling.

• Checkbox: these colors will be applied on the Checkbox items.

• Button: select the color and position options for the Submit Button.

• Border: choose a color for the Input option. And if you want a Rounded Border, select ON.

• Modal title color: choose a color for the Modal Title.

3. Click on “Apply” to save.

Styleguide

Checkbox border default color is white, but it can be changed.

Styleguide

• Modal title color

• Modal timer color

• Modal timer background color

Examples