# ReFormer - Omni-channel Contact Form Widget

- created: 12/23/2021
- latest update: 12/23/2021
- by: merkulove
- elementor.merkulov.design/reformer/

WordPress plugins Documentation

### Overview

The Reformer – a perfect WordPress plugin 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. The simple and fast tool to get in touch with your customers and visitors through a convenient one or several channels. It is a really important opportunity for those who want to speed up feedback and improve provided services and the trust of your clients.

The Reformer has a wide variety of field types for creating any form you wish. In addition to text, email, checkbox, radio, and other regular inputs you will find a range, date, time, month, hidden, URL fields. Thanks to this, you can use it not only for a regular text message but also for simple quizzes, reviews, booking, or similar. Add fields in a few clicks, edit the submit button, and channels to get the ready contact form without any coding knowledge. Each of the available channels has separate settings for the type and style of the message that you will receive. Moreover, the widget includes customization of the text and style of Success and Error messages.

Read Messages Everywhere
Send or Store Messages as WordPress Records
Form Builder that You Deserved
Crafted for Elementor Builder
Includes Templates for Elementor
Suitable for all kinds of Layouts and Templates
Perfect for Popular Elementor Themes
Completely Cross-Browser Support

This responsive omnichannel contact form is an irreplaceable element for almost any site, regardless of the type and direction to keep in touch with users. With the widget, you will make it unique and attractive really fast, with minimal effort. Feel free to manage each type of field customizing size, typography, colors, background, border, and other things for different elements according to your needs.

We made sure that it was easy for you to get started with Reformer. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you with a quick start in a few clicks.

Reformer for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

## Features of the Multichannel contact form plugin for Elementor

- Supports 5 submitting channels
- Includes 15 form field types
- Сustomizable Success and Error messages
- Saving messages in the admin panel
- Different recipients for different forms
- Extended settings for each channel
- Responsive and friendly to any devices
- Customizable fonts, colors, borders, backgrounds, etc.
- Responsiveness settings
- Works well with all WordPress themes built on Elementor
- Totally SEO Friendly
- Included .pot file for quick translation on any language
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 5+
- Lightweight and Fast
- All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

### Installing

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

## Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

###### STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

###### STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress

###### STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress

###### STEP 5

Choose archive with Plugin and press Install Now Button

###### STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

## Installation the plugin through FTP or build-in File manager

###### STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

###### STEP 2

Upload archive with plugin to /wp-content/plugins

###### STEP 3

On next step Unzip the archive with the plugin

###### STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

### Settings

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
- Style
- Advanced

## 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