Create a contact form for a voice feedback

The important step, after the main configurations, to setting up Contacter WordPress plugins for voice feedback is creating a contact form. You can select the created form in the floating button settings or use the default one.

How to create?

Go to Contacter>Forms and click Add new as for a regular WordPress post. Fill and configure the fields when creating a post.

The available contact form options are listed below:

  • Before Text – the text that that is displayed in the form before the “Record” button.
  • Start recording button
  • After Text – the text that is displayed in the form after the “Record” button.
  • Speak Now Text – the text that is displayed during recording after clicking the “Record” button
  • Send Recording Text – the text that is displayed after recording
  • Thank You Text – the text that is displayed after the form is submitted successfully
  • Additional fields

Start recording button settings

The section with the style settings for the “Record” button in the current form.

Button margin

This option allows you to control the margin of the record button for the current form. Here you can set the value from 0 to 100 pixels using the slider.

Button padding

This option allows you to control the padding of the record button for the current form. Here you can set the value from 0 to 100 pixels using the slider.

Button radius

The option allows you to adjust the border radius of the record button for the current form.

Select icon for a button

Select the icon for the button using the icon library or upload your own icon in SVG format.

Icon Position

Select the icon position relative to the caption on the button. Pick “Hide” to remove the icon from the button.

Caption

Enter text for the button or leave blank to display only an icon.

Icon/Caption size

Specify the font size for the icon and button caption using a convenient slider. You can set the size from 10 to 100 pixels.

Text Color

Specify the font color and opacity for the text of the icon and button caption using the color picker.

Text hover color

Specify the font hover color and opacity for the text of the icon and button caption using the color picker.

Background Color

Specify the background color and opacity for the record button using the color picker.

Background hover color

Specify the hover background color and opacity for the record button using the color picker.

Hover Animation

Select one of the available animations for the button hover. The following types are available: Particles, Bounce, Fade, Flip-x, Flip-y, Scale, Wobble, Rotate. Pick “None” to disable the animation.

Additional fields settings

The Contacter WordPress plugin allows you to send not only voice messages but also use additional fields in the contact form. To activate this function, enable the “Additional Fields” option in the settings of a specific form.

Additional fields settings of the Contacter plugin

Once this option is enabled, different types of fields will be available. Just drag the fields from the right column to the left window and order them as you need.

In addition to the base fields, there are also fields that are not displayed to the user but have useful functionality:

  • Current URL – allows you to get a link to the page from which the form was submitted.
  • User Details – allows you to receive details of the user who sends messages. The user name and IP.

How to use shortcodes?

The voice feedback form can be added to any place of the website page using a shortcode. To find the required shortcode, go to Contacter>Forms and copy it opposite the specific form.

The form shortcode in the Contacter plugin

Once the shortcode is copied, you can paste it on the page using any editor convenient for you. The plugin compatible with popular Website Page Builders, like Elementor, Visual Composer, Gutenberg, Beaver Builder, Divi, Themify Builder, WP Bakery Page Builder, Layers WP, and many others. 

Calling the form with custom content

The new type of shortcode is supported in the Contacter 1.0.5 version. It allows calling the voice contact form not only through the button but also through text, image or any other custom content on your page.

To find the required shortcode, go to Contacter>Forms and copy the second shortcode opposite to a specific form.

The shortcode for calling form via custom content

Where the text “Your Content” you need to replace via own text or image. As a result, when you click on this text, a form for recording a voice message will appear.

Was this article helpful to you?