Divi Plugin Spotlight: Divi Touch Shape Helper

by | Apr 16, 2023 | Etcetera | 0 comments

Divi Touch Shape Helper is a plugin that works with Divi to make larger the aptitude of the built-in contact form machine. It supplies settings to touch form module, an interface to the WordPress dashboard where you’ll be capable of arrange your form entries, and additional settings to the Divi theme alternatives. The plugin supplies new design and customization alternatives along with new capacity similar to a date picker, a report upload field, the facility to avoid wasting a whole lot of submissions to a database, and additional.

In this plugin highlight, we’ll take a look at the choices and settings for Divi Contact Form Helper and will let you get to the bottom of if it’s the correct product for you.

Let’s get started!

Putting in place Divi Contact Form Helper

You’ll arrange Divi Contact Form Helper very similar to every other WordPress plugin. Open the plugins internet web page inside the WordPress dashboard and click on on Add New. Click on on Upload Plugin on the most productive, then select the .zip plugin report from your computer.

Divi Plugin Highlight Divi Contact Form Helper Install

As quickly because the plugin is installed, flip at the plugin.

Divi Plugin Highlight Divi Contact Form Helper Activate

Divi Contact Form Helper

Divi Contact Form Helper is an extension to Divi’s provide contact form module. It supplies capacity similar to report uploads, field text alternatives, the facility to avoid wasting a whole lot of submissions to a database, a date/time picker, additional design settings, and additional. The plugin settings are spread across the contact form module, a brand spanking new WordPress dashboard internet web page, and additional Divi Theme Alternatives settings. We’ll take a look at all of the ones settings to come up with an idea of what is going to even be completed with this plugin.

Contact Form Module

As we go through this plugin highlight, we practice that the changes made using the Divi Builder Contact Form Helper settings isn’t going to turn automatically inside the Visual Builder. To view the changes made, it is very important open the internet web page in a brand spanking new tab and refresh to get the up to the moment design.

To get admission to the new contact form module settings, add a brand spanking new contact form to your internet web page inside the Divi Builder.

Divi Plugin Highlight Divi Contact Form Helper Insert Module

Field Content material subject matter Settings

The following settings are located throughout the content material subject matter tab of the individual field setting of the contact form module.

Text Settings

Beneath the Text settings tab, you’ll be capable of show or disguise the sector label, show or disguise the placeholder, enter custom designed placeholder text, enter custom designed description text, and choose the description location.

Divi Plugin Highlight Divi Contact Form Helper Field Settings

That is the result on the front end. In this example, I added a label, a placeholder, and an overview to the Name field.

Divi Plugin Highlight Divi Contact Form Helper Field Labels

Field Alternatives Settings

Next, you’ll be capable of to search out the Field Alternatives settings. The settings change depending on what type of field is selected.

If the textarea sort is selected, there will likely be an technique to set a minimum and maximum duration for the message, select allowed symbols, and change the text space minimum best.

Divi Plugin Highlight Divi Contact Form Helper Text Area Length

Every field sort moreover has the selection so to upload an icon and change its color.

Divi Plugin Highlight Divi Contact Form Helper Field Icon

That is the icon on the front end, throughout the Message field.

Divi Plugin Highlight Divi Contact Form Helper Field Icon-2

If the Make a choice Dropdown field sort is selected, there will likely be an selection to use dropdown search.

See also  Press This: What’s New in WordPress 6.2

Divi Plugin Highlight Divi Contact Form Helper Dropdown Search

That is the dropdown search on the front end. Dropdown results are filtered as you sort inside the search bar above.

Divi Plugin Highlight Divi Contact Form Helper Option Search

If the Checkbox field selection is selected, you’ll see two structure alternatives: Columns or Inline. If columns is selected, you’ll be capable of set the collection of columns (up to 4 columns).

Divi Plugin Highlight Divi Contact Form Helper Checkbox Columns

That is the columns structure with 3 columns and an icon.

Divi Plugin Highlight Divi Contact Form Helper Checkbox 3 Columns

And right here’s the opposite inline structure.

Divi Plugin Highlight Divi Contact Form Helper Inline

The radio button field structure moreover has an selection for a column or inline structure, with an selection for up to 4 different columns.

Divi Plugin Highlight Divi Contact Form Helper Radio Columns

That is the column structure with 2 columns.

Divi Plugin Highlight Divi Contact Form Helper Radio 2 Columns

And right here’s the inline structure.

Divi Plugin Highlight Divi Contact Form Helper Inline Radio

Document Upload Settings

To get admission to the report upload settings, you will have to first set the Field Type to Input Field throughout the Field Alternatives settings. Then the report upload settings will appear.

Divi Plugin Highlight Divi Contact Form Helper Input Field

Beneath the Document Upload Settings tab, select the button to permit the sector to be used as a report upload field.

Divi Plugin Highlight Divi Contact Form Helper File Upload

Once enabled, you’ll be capable of set the maximum upload report size, maximum collection of files, and allowed report types.

Divi Plugin Highlight Divi Contact Form Helper File Upload Maximum

Date Time Settings

The date/time settings only appear when the sector sort is in a position to go into field. Toggle the button to use the input field as a date/time picker.

 

Divi Plugin Highlight Divi Contact Form Helper Date Time Enable

When the selection is enabled, 3 settings tabs appear. Beneath the Commonplace tab, you’ll be capable of set the type (date and time picker, date picker, or time picker), the date/time construction, choose to show the picker inline, set the input with the prevailing date/time, change the language, or change the locale direction to RTL.

Divi Plugin Highlight Divi Contact Form Helper Date Time Picker

Beneath the date settings tab, you’ll be capable of set a custom designed date construction, set the week get began day, select days of the week to disable, and disable weeks.

Divi Plugin Highlight Divi Contact Form Helper Date Settings 1

You’ll moreover disable earlier dates, disable the prevailing date, set a difficult and speedy or relative minimum date, set a difficult and speedy or relative maximum date sort, and set available and unavailable dates.

Divi Plugin Highlight Divi Contact Form Helper Date Settings 2

Beneath the time tab, you’ll be capable of set a custom designed time construction, minimum and maximum time, available and unavailable cases, and time steps duration.

 

That is the date/time picker on the front end.

Divi Plugin Highlight Divi Contact Form Helper Date Time Picker Front End

Form Content material subject matter Settings

The following settings are located throughout the content material subject matter tab of the contact form settings.

Admin Piece of email Settings

Beneath the admin electronic mail settings, you’ll be capable of enter a custom designed message for the admin and use rich text to construction the admin message. You’ll add an admin electronic mail or permit conditional electronic mail care for routing with custom designed just right judgment using the ones settings (don’t worry, the plugin author has documentation to help you set this up!).

Divi Plugin Highlight Divi Contact Form Helper Admin Email Enabled

Additionally, you’ll be capable of set the admin electronic mail topic, electronic mail care for CC, and electronic mail care for BCC.

Divi Plugin Highlight Divi Contact Form Helper Admin Email

Confirmation Piece of email Settings

The confirmation electronic mail settings may also be customized. You’ll permit the confirmation electronic mail to be sent, enter a custom designed topic line, and enter a custom designed message. You’ll permit rich text formatting to use for the message as neatly.

Divi Plugin Highlight Divi Contact Form Helper Confirmation Email

Submission Entries

Beneath the submission entries settings, you’ll be capable of save entries to a database, save report uploads to a database, send report uploads as attachments with emails, gain client agent details, use cookies for tracking unique form views, and change the custom designed message that is added to emails with files.

Divi Plugin Highlight Divi Contact Form Helper Submission Entries

Post Button

Beneath the submit button settings, you’ll be capable of change the submit button text and the wait text.

Divi Plugin Highlight Divi Contact Form Helper Submit Button

Integrations

There are two integration alternatives, Zapier and Pabbly. You’ll permit each selection and add the mailbox care for to send emails to.

Divi Plugin Highlight Divi Contact Form Helper Integrations

After Submission Behavior

The after submission conduct includes a space so to upload a custom designed just right fortune message along with an technique to disguise the form identify, display a just right fortune button with custom designed text and a link, or permit a redirect URL.

Divi Plugin Highlight Divi Contact Form Helper After Submission Behavior

That is the after submission conduct in movement, showing the nice fortune message, hiding the form identify, and appearing the nice fortune button.

Divi Plugin Highlight Divi Contact Form Helper Success Button

Admin Label

Proper right here you’ll be capable of add your own admin label (form ID) that will likely be confirmed inside the database. You’ll moreover add a novel id amount that can appear inside the database and other admin areas.

See also  What’s the Distinction Between Padding and Margin in WordPress?

Divi Plugin Highlight Divi Contact Form Helper Unique ID

Design Settings

Let’s switch over to the design tab of the contact form settings. You’ll perceive some new settings proper right here as neatly.

Field Label, Field Description, Good fortune Message Text Settings

The sector label text settings, the sector description text settings, and the nice fortune message text settings sections feature all of the default font and text design settings, similar to font, text color, size, spacing, alignment, and so forth.

Divi Plugin Highlight Divi Contact Form Helper Field Label Text

Proper right here you’ll be capable of see the labels for the determine and electronic mail fields were displayed, and the sector label text design was customized to be displayed on the front end.

Divi Plugin Highlight Divi Contact Form Helper Label Design

Good fortune Button Settings

The nice fortune button settings will will let you customize the design of the nice fortune button using the default button design settings, similar to font, text size, button spacing, button colors, and so forth.

Divi Plugin Highlight Divi Contact Form Helper Success Button Settings

That is the customized just right fortune button on the front end.

Divi Plugin Highlight Divi Contact Form Helper Success Button Customized

Date/Time Picker Settings

Within the fundamental tab of the date/time picker design settings, you’ll be capable of customize the background color, margin, padding, border, and shadow settings.

Divi Plugin Highlight Divi Contact Form Helper Date General Settings

Transferring over to the date tab, you’ll be capable of change the date picker width and best, customize the month/twelve months text settings, the days of the week text settings, the calendar dates text settings, the prevailing date background and text color, the selected date background and text color, the available dates background and text color, and the unavailable dates background and text color.

Divi Plugin Highlight Divi Contact Form Helper Date Settings

Beneath the time tab, you’ll be capable of customize the time picker width and best, the time text settings, the prevailing time background and text color, the selected date background and text color, the available time’s background and text color, and the unavailable time’s background and text color.

Divi Plugin Highlight Divi Contact Form Helper Time Settings

With all of the ones customization alternatives, you’ll be capable of totally customize the look of your date/time picker. That is the date/time picker on the front end with some customized design settings.

Divi Plugin Highlight Divi Contact Form Helper Date Time Picker Customized

Post Button

Two new settings have gave the impression beneath the submit button section. You’ll change the button alignment and make the button full-width.

Divi Plugin Highlight Divi Contact Form Helper Button Alignment Full Width

That is the full-width button on the front end.

Divi Plugin Highlight Divi Contact Form Helper Fullwidth Button

Border

Proper right here you’ll be capable of style the focus input border with color, style, radius, width, and style settings. This border will appear around the particular person field when determined on.

Divi Plugin Highlight Divi Contact Form Helper Input Focus Border

That is the focus input border highlighting the determine field.

Divi Plugin Highlight Divi Contact Form Helper Input Focus Border Name Field

Dashboard

Now that we’ve explored the new Contact Form module settings, let’s take a look at the Contact Form internet web page inside the WordPress dashboard.

Entries

You’ll see all of the form submissions you’ve gotten gained on the Entries internet web page. For each get admission to, you’ll see the get admission to amount, the email care for, its be told status (in conjunction with the shopper who be told the get admission to and the suitable time and date it was be told), the form ID, the date, and the IP. The entries internet web page can be looked after by means of unread and read on the easiest. You’ll moreover use bulk actions on entries and filter out the table by means of month or by means of a specific form. Finally, you’ll be capable of export a CSV of your entries with the button on the most productive and search your entries with the search bar.

Divi Plugin Highlight Divi Contact Form Helper Entries

Whilst you click on directly to view an individual get admission to, you’ll see the sector content material subject matter inside the get admission to details section. Beneath this are other entries by means of the an identical client, which is an overly helpful feature. At the correct, you’ve gotten a trash and delete button, a solution/send electronic mail button, a create electronic mail template button, and a create publish button. Beneath are meta details such since the submitter ID, submitter, contact form ID, internet web page, referrer URL, and date, followed by means of user-agent details.

Divi Plugin Highlight Divi Contact Form Helper Form Entry Details

Send Piece of email

When you select the send electronic mail button, you’ll see this interface. You’ll add the email from care for, the email topic, the solution to electronic mail care for, and the message. You’ll use the email knowledge tags listed to your message as neatly.

See also  The best way to Be offering an Advert-Loose Model of Your WordPress Website online to Subscribers

Divi Plugin Highlight Divi Contact Form Helper Send Email

Create Template

You’ll moreover create electronic mail templates to in brief respond to entries. You’ll set the template sort, template determine, select a slightly form, set an electronic mail from care for, the email topic, and the email message.

Divi Plugin Highlight Divi Contact Form Helper Create Template

Create Post

With the create publish selection, you’ll be capable of create a brand spanking new blog publish or internet web page by means of mapping fields inside the contact form.

Divi Plugin Highlight Divi Contact Form Helper Create Post

Export CSV

On the export CSV internet web page, you’ll be capable of change the CSV report determine, select the contact form, and select what type of entries to include inside the export.

Divi Plugin Highlight Divi Contact Form Helper Export CSV

Forms

From the forms internet web page, you’ll be capable of see a listing of all of the forms in your internet web site with knowledge similar to entries, views, unique views, conversion worth, unique conversion worth, ultimate get admission to, and links to view entries, export CSV, and believe the form.

Divi Plugin Highlight Divi Contact Form Helper Contact Forms

Theme Alternatives

Now let’s navigate to the Divi Theme Alternatives throughout the WordPress dashboard. You’ll see a brand spanking new tab titled Divi Contact Form Helper proper right here.

Commonplace Settings

Beneath the entire settings, you’ll be capable of permit contact form stats, permit sent electronic mail logs, permit clone logs, choose to remove plugin knowledge when uninstalled, and edit the allowed MIME types.

Divi Plugin Highlight Divi Contact Form Helper Theme Options General Settings

SMTP Settings

The SMTP settings tab has a button to permit SMTP settings. Once enabled, you’ll see settings for the SMTP host, SMTP from electronic mail, SMTP from determine, Encryption, SMTP port, Auto TLS, and Authentication. There’s a button to check if the SMTP integration may be operating.

Divi Plugin Highlight Divi Contact Form Helper SMTP Settings

Auto Backup Settings

Divi Contact Form Helper comes with an auto backup setting you’ll be capable of permit. You’ll permit this option, add a backup electronic mail care for, and set the backup schedule.

Divi Plugin Highlight Divi Contact Form Helper Auto Backup

Custom designed Label Text

Finally, proper right here you’ll be capable of customize the contact form label text.

Divi Plugin Highlight Divi Contact Form Helper Custom Label Text

Divi Contact Form Helper Examples

Example 1

The main example features a determine field, an electronic mail care for field, a date picker, and a message field. It features a blue color scheme with a full-width button.

Divi Plugin Highlight Divi Contact Form Helper Example 1

Example 2

The second example has a green color scheme and contours the an identical determine, electronic mail care for, date picker, and message fields, along with a radio select field and a report upload field.

Divi Plugin Highlight Divi Contact Form Helper Example 2

Achieve Divi Contact Form Helper

Divi Contact Form Helper is available inside the Divi Market. It costs $25 for countless web site usage and 12 months of reinforce and updates. The cost moreover includes a 30-day money-back be certain.

Divi Contact Form Helper Review

Final Concepts

Divi Touch Shape Helper supplies some major capacity to the Divi Contact Form module. You’ll totally customize each and every facet of the contact form and create a novel design because of this plugin’s additional design alternatives. And as a result of the aptitude Divi Contact Form Helper supplies, you’ll be capable of even accept files, schedule events, and so much more. The entries interface is at hand to have, allowing you to easily respond to messages and keep observe of entries from the WordPress dashboard. For those who’re taking a look to take your contact form to the next stage or need capacity previous what the default contact form may also be providing, this can be a in reality easiest product for you.

We’d in reality like to hear from you! Have you ever ever tried Divi Contact Form Helper? Let us know what you consider it inside the comments!

The publish Divi Plugin Spotlight: Divi Touch Shape Helper gave the impression first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!