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

- Search by the Webhook Form widget name.
- The widget will appear, Check the Element Pack Pro logo on top right corner.
- Select the widget then Drag and Drop it on the editor page.
Content Tab Customization
Form Fields Section
Go to Content > Form Fields
Content

- Type: Set the type for the item. Select the Text.
- Label: Set the label for the fields.
- Field Name: Set the Fields Name.
- Placeholder: Set the placeholder for the items.
- Column Width: Set the width for the Column.
Advanced

- Default Value: Select the default value for the fields items.
- Required: Enable the switcher to make it required.
Choose the Select Forms

- Type: Choose the Select type for select options.
- Label: Set the label for it.
- Field Name: Set the fields name.
- 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

- Label: Enable the switcher to show the Label for forms layout.
- Input Size: Set the size for the input button.
- Text Align: Set the alignment for the Text Left, Center, Right.
Submit Button Section
Go to Content > Submit Button

- Text: Set the text for the Submit Button.
- Size: Set the size for Button Small, Medium and Full width are available.
- Alignment: Choose the alignment for the button position left, centre, right, justified.
Style Tab Customization
Form Style Section
Go to Style > Form Style

- Field Space: Set the space between the Fields.
- Column Space: Set the space between the Columns.
Label Section
Go to Style > Label

- Spacing: Set the spacing for the Label spacing.
- Text Color: Set the color for the Text.
- Typography: Set the typography for the Label.
Fields Section
Go to Style > Fields
Normal

- Text Color: Set the Text Color for the Fields Items.
- Placeholder Color: Set the placeholder color.
- Background Color: Set the background color.
- 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.
- Padding: Set the padding for the background.
- Typography: Set the typography for the fields.
Focus

- Background: Set the background color for the text.
- Border Color: Set the border color for Focus Item.
Submit Button Section
Go to Style > Submit Button
Normal

- Text Color: Choose the Text Color for the Submit Button.
- Background Type: Set the Background type color and choose the color.
- Border Type: Select the border type.
- Border Radius: Make the border Radius.
- Padding: Set the padding for the button.
- Typography: Select the typography for the button.
Hover

- Text Color: Choose the Text Color for the button.
- Background Type: Select the background type.
- Animation: Set the animation for the button.
Results Section
Go to Style > Results

- Color: Choose the color for the Result
- Background Color: Select the background Color.
- Border Type: Choose the border type.
- Border Radius: Make the border Radius.
- Box Shadow: Set the shadow for the box.
- Typography: Choose the typography of the results.
- 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.