Contacter , Global

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

Max duration

Set the maximum audio duration from 1 to 300 seconds for the current form. After the specified time, the recording will stop automatically. Set 0 to unlimited record time.

Max duration settings of the current form.

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.

Skip recording button

The toggle to enable/disable the skip button. The option allows you to skip the audio recording step and proceed to the next step like additional fields of the form. If the option is enabled, the style settings are available for the button:

  • button radius – the option allows you to adjust the border radius of the button for the current form.
  • button margin – this option allows you to control the margin of the 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 button for the current form. Here you can set the value from 0 to 100 pixels using the slider.
  • Caption – enter text for the button or leave blank to display only an icon.
  • Select icon 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.
  • 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.
  • Background color – specify the background color and opacity for the record button 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 hover color – specify the hover background color and opacity for the record button using the color picker.

Before Text

Enter text before the “Start recording” button or leave blank to do not use the field.

After Text

Enter text after the “Start recording” button or leave blank to do not use the field.

Speak Now Text

You can use special placeholders: {timer}, {max-duration}, {countdown}.

Send Recording Text

A field for entering the text of the form submitting.

Thank You Text

A field for entering the text after the form submitting.

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.

To add the entered text of the form additional field to the record file name follow the steps:

  • Edit an existing additional field
Edit an additional field
  • Add contacter-record to the field Name and save the changes.
Enter the field name

Attachment properties

The settings block is applied to the File Upload field.

  • Mime type – specify the media types that are allowed for uploading separated by commas. Put * to accept any files.
  • File size – specify max attachments file size using the slider.

Record suffix

The option allows you to add information from one of the additional form fields to the record title made through the current form. To add the record title suffix, enter the name of the field.

The field name of Contacter form

Form notification

The option allows you to bind a specific notification to the current form. This is used to have different content, trigger, or/and notification recipient for different forms. Read more in the documentation on how to create notifications.

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?