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

Enable Webhook Form widget

To use the Webhook widget from Element Pack Pro, first, you have to enable the widget.

1. Go to WordPress dashboard > Element Pack Pro Plugin dashboard.
2. Then, Click the Core Widgets Tab.
3. Search the Webhook Form Widget Name.
4. Enable the Webhook Form Widget.
5. Hit the Save Settings Button.

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

Connection Settings

Go to Content > Connection Settings

When Connection Type- Webhook URL

Go to the Connection Settings section, where you will find two connection types: Webhook URL and Google Sheets. Let’s explore the Webhook URL option.

1. Connection Type: Select Webhook URL as the connection type.
2. Webhook URL: After selecting Webhook URL, an input field will appear. Enter your webhook URL in the field and click the Update button to save the changes.

When Connection Type- Google Sheets

1. Connection Type: Select Google Sheets as the connection type.
2. After selecting Google Sheets, you will see a notification message (as shown in the screenshot). To access this feature, you need to set up the Google Sheets Client ID and Client Secret first.

Guide to Connect and Adding Google Sheets API Key and Client ID

To set up the Google Sheets Client ID and Client Secret, follow these steps:

1. Open the Element Pack Pro plugin dashboard.
2. Go to the API Settings section.
3. In the Google Sheets Access area, enter your Client ID in the Client ID field.
4. Enter your Client Secret in the Client Secret field.
5. Click the Connect to Google Sheets button to link your Google Sheet with the Webhook widget.

6. After entering all the required information, click the Connect button. You’ll then be redirected to your Google account to complete the Google Sheets setup.

After clicking the Connect to Google Sheets button, you will be prompted to select the Gmail account that contains your Google Sheets. Simply choose your Gmail account to proceed.

After choosing the gmail account, Just click on the Advanced button to proceed the next steps.

Note: If your apps is varified then you will not get the above and below attached screenshot wizard on your screen. You’ll be redirected directly to the next step.

After that, just click on your connected site button.

After that, click on the continue button go to the next step.

Simply click the Continue button to grant Google Sheets access to your Gmail account.

After connecting the sheet, the disconnect button will appear.

Set the Google Sheet ID in the Webhook Form Widget

1. After connecting Google Sheets with the Webhook widget, a notification message will appear (as shown in the screenshot).
2. Set Google Sheet ID: Once connected, just set the Google Sheet ID, where you want to store your webhook email information.

After selecting your Google Sheet, fill out the form and click the Submit button. A submission success message will then appear on your screen.

Collecting Form Data from Your Selected Google Sheet

Just go to your Google sheets and open your selected google sheet to collect or view your form submitted data.

How to Create Google Sheet Client ID and Client Secret ID For Google Sheets access

In this documentation, we will guide you through the process of creating an Element Pack Pro Google Sheets Client ID and Client Secret ID for Google Sheets access. Just follow the documentation from here.

Security Fields Section

Go to Content > Security Fields

1. Add Item: You can easily add the Security Item to click on the add item button.
2. You can duplicate the item from here.
3. You can remove the item to click on the cross icon.

1. Field Name: This option lets you change the Security Field Name.

2. Value: The Value field is where you define the actual data (token, key, secret, etc.) that is required for secure communication between your form and the server. Without it, the webhook or API request may fail authentication. It allows you to manually set a fixed value that will always be sent with the form.

3. Data Position: You can set the Data Position as- Header and Body.

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 help you to learn more about the widget. Please visit the demo page for examples.

Thanks for being with us.