Elementor , Reformer

Omnichannel Contact Form Widget

Omnichannel Contact Form Widget for Elementor to obtain a multichannel contact form. The plugin provides receiving a form message to Email, Telegram, Slack, Discord and allows to save the message in the site admin. 

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

In the Content section, you can customize the basic settings of the Contact Form, select and manage the submitting channels, enter the error and success message, etc.

General

  • Form name – enter a name for the current form. This name will not be displayed in the block, only in the form markup and in the messages title that you will receive in the admin panel. The field can use dynamic tags.
  • Fields alignment – manage the fields alignment (left, center, right, space between, space around) for all devices or separately for desktops, tablets, or phones.
  • Submit button alignment – manage the submit button alignment (left, center, right) for all devices or separately for desktops, tablets, or phones.
  • Show title – the toggle to enable/disable the form title display. Enter the form title in the text input when the option is enabled.
  • Show description – the toggle to enable/disable the form description display. Enter the form desciption in the text input when the option is enabled.
  • Submit button text – an input field to enter submit button text. The field can use dynamic tags.
  • Current post url in submissions – the toggle to enable the page link the form is sent from.
  • Send to – add channels to submit the form: Save(messages are saved in Reformer>Submissions of the current site), Telegram, Email, Discord, Slack. After adding each channel, a new section appears with the corresponding settings.
  • Record suffix – enter the name of the field, the content of which will be added as a suffix to the name of the record is saved in the admin panel. The field can use dynamic tags.

Messages

  • Success message – a text input to enter a message about successful form submission to replace the default message. The field can use dynamic tags.
  • Success message text align – manage the success message text alignment (left, center, right).
  • Error message – a text input to enter an error message text to replace the default message. The field can use dynamic tags.
  • Error message text align – manage the error message text alignment (left, center, right).

Form fields

The block allows adding, removing, or duplicating fields for the contact form. There are available 15 types of fields: Textarea, Checkbox, Radio button, File, Url, Time, Text, Select, Range, Number, Month, Hidden, Email, Date.

To add a new field, click “Add Item” and fill all the necessary fields:

Form field settings
  • Field type – select the field type from the available list.
  • Label text – enter the label text that will be displayed next to the field. The option can use dynamic tags.
  • Label position – select the label display position of the relative to the current field: Left, Right, Above, Below.
  • Name – a text input to enter the field name. This name is added to the form markup and can also be used for the Record suffix. The option can use dynamic tags.
  • Field id – a text input to enter the field id. The option can use dynamic tags.
  • Placeholder – enter the placeholder for the current field. The option can use dynamic tags.
  • Default value – enter the default value for the current field. The option can use dynamic tags.
  • Required – a toggle to make the current field required.
  • Height – specify the height of the current field using the slider in different units(px, %)
  • Width – specify the width of the current field using the slider in different units(px, %)
  • Required field mark – general setting for all fields which marks all required fields.

Email

Section with settings of the Email channel. The section is available when the channel is selected in the “Send to” of the General setting.

Use address book – an option allows you to use the contact from the address book or enter a new one manually for the current form. Read How to add a new contact to the address book. When the option is enabled, the available addresses are in the drop-down list.

Addresses list of the Reformer plugin
Email channel settings without using the address book
  • To – enter the email to receive letters from the current contact form.
  • Subject – a text field to enter the letter subject.
  • Message – enter the text message you want to receive from this form. Add [form-fields] to get the data from all form fields.
  • Email form – enter the email that will be indicated as the sender in letters from the current form.
  • From name – enter the sender’s name, which will be indicated in letters from the current form.

Discord

Section with settings of the Discord channel. The section is available when the channel is selected in the “Send to” of the General setting.

Use address book – an option allows you to use the contact from the address book or enter a new one manually for the current form. Read How to add a new contact to the address book. When the option is enabled, the available addresses are in the drop-down list.

Addresses list of the Reformer plugin
Discord channel settings
  • Discord webhook – paste your discord webhook. How to create the webhook read in the guide.
  • Title – a text field to enter the message title. The option can use dynamic tags.
  • Description – a text field to enter the message description. The option can use dynamic tags.
  • Username – a text field to enter sender’s username. The option can use dynamic tags.
  • Avatar url – paste a link on the image that will be used as the sender’s avatar. The option can use dynamic tags.
  • Timestamp – the toggle to enable/disable a timestamp display.
  • Form fields data – the toggle to include the data from form fields to the message.
  • Color – select a color from the color picker that will highlight the message you get from the current form.

Slack

Use address book – an option allows you to use the contact from the address book or enter a new one manually for the current form. Read How to add a new contact to the address book. When the option is enabled, the available addresses are in the drop-down list.

Addresses list of the Reformer plugin
Slack channel settings
  • Slack webhook – paste your slack webhook. How to create the webhook read in the guide.
  • Title – a text field to enter the message title. The option can use dynamic tags.
  • Description – a text field to enter the message description. The option can use dynamic tags.
  • Username – a text field to enter sender’s username. The option can use dynamic tags.
  • Timestamp – the toggle to enable/disable a timestamp display.
  • Form fields data – the toggle to include the data from form fields to the message.
  • Color – select a color from the color picker that will highlight the message you get from the current form.

Telegram

Telegram channel settings
  • Chat – select a chat available in the list. You need to get your own bot token and paste it to ReFormer>Settings>Telegram bot api to display the chats in the list.
  • Message – enter the text message you want to receive from this form. Add [form-fields] to get the data from all form fields.

Style tab

On the ReFormer widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Title/Description/Select/Button/Success message/Error message

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER

The text style settings for different states.

  • Color – specify the text font color and opacity using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Label

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Min width – specify the minimum width for the current block using the slider.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER

The label style settings for different states.

  • Color – specify the text font color and opacity using the color picker.
  • Required mark color – specify the color and opacity of the required mark using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Input/Range/Textarea

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Height – specify the height of the current element using the slider in different units(px, %)
  • Width – specify the width of the current element using the slider in different units(px, %)
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/Focus

The field style settings for different states.

  • Color – specify the text font color and opacity using the color picker.
  • Placeholder color – specify the color and opacity of the placeholder using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Radio button/Checkbox

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Scale – specify the scale of the current element using the slider.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/Focus

The field style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Was this article helpful to you?