In this documentation, we will show you how to customize the WebHook Form widget presented by the Element Pack add-on.

Insert WebHook Form widget

1. Search by the Webhook Form widget name.
2. The widget will appear, Check the Element Pack Pro logo on top right corner.
3. Select the widget then Drag and Drop it on the editor page.

Content Tab Customization

Form Fields Section

Go to Content > Form Fields

Content

1. Type: Set the type for the item. Select the Text.
2. Label: Set the label for the fields.
3. Field Name: Set the Fields Name.
4. Placeholder: Set the placeholder for the items.
5. Column Width: Set the width for the Column.

Advanced

1. Default Value: Select the default value for the fields items.
2. Required: Enable the switcher to make it required.

Choose the Select Forms

1. Type: Choose the Select type for select options.
2. Label: Set the label for it.
3. Field Name: Set the fields name.
4. Options: Set the options for the Select items. Use the Pipe ” | ” symbol for the item and value.

To add new Form Fields click on the “ + Add Item ” button.

Form Layout Section

Go to Content > Form Layout

1. Label: Enable the switcher to show the Label for forms layout.
2. Input Size: Set the size for the input button.
3. Text Align: Set the alignment for the Text Left, Center, Right.

Submit Button Section

Go to Content > Submit Button

1. Text: Set the text for the Submit Button.
2. Size: Set the size for Button Small, Medium and Full width are available.
3. Alignment: Choose the alignment for the button position left, centre, right, justified.

Style Tab Customization

Form Style Section

Go to Style > Form Style

1. Field Space: Set the space between the Fields.
2. Column Space: Set the space between the Columns.

Label Section

Go to Style > Label

1. Spacing: Set the spacing for the Label spacing.
2. Text Color: Set the color for the Text.
3. Typography: Set the typography for the Label.

Fields Section

Go to Style > Fields

Normal

1. Text Color: Set the Text Color for the Fields Items.
2. Placeholder Color: Set the placeholder color.
3. Background Color: Set the background color.
4. Border

• Border Type: Set the border type for the fields.
• Width: Set the width for the Fiedls.
• Color: Choose the color for it.
• Border Radius: Make the border Radius.

5. Padding: Set the padding for the background.
6. Typography: Set the typography for the fields.

Focus

1. Background: Set the background color for the text.
2. Border Color: Set the border color for Focus Item.

Submit Button Section

Go to Style > Submit Button

Normal

1. Text Color: Choose the Text Color for the Submit Button.
2. Background Type: Set the Background type color and choose the color.
3. Border Type: Select the border type.
4. Border Radius: Make the border Radius.
5. Padding: Set the padding for the button.
6. Typography: Select the typography for the button.

Hover

1. Text Color: Choose the Text Color for the button.
2. Background Type: Select the background type.
3. Animation: Set the animation for the button.

Results Section

Go to Style > Results

1. Color: Choose the color for the Result
2. Background Color: Select the background Color.
3. Border Type: Choose the border type.
4. Border Radius: Make the border Radius.
5. Box Shadow: Set the shadow for the box.
6. Typography: Choose the typography of the results.
7. Padding: Set the padding.

Video Assist

The WebHook Form Video Tutorial Coming Soon. Please visit the demo page for examples.

Thanks for being with us.