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.
As quickly because the plugin is installed, flip at the plugin.
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.
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.
That is the result on the front end. In this example, I added a label, a placeholder, and an overview to the Name field.
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.
Every field sort moreover has the selection so to upload an icon and change its color.
That is the icon on the front end, throughout the Message field.
If the Make a choice Dropdown field sort is selected, there will likely be an selection to use dropdown search.
That is the dropdown search on the front end. Dropdown results are filtered as you sort inside the search bar above.
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).
That is the columns structure with 3 columns and an icon.
And right here’s the opposite inline structure.
The radio button field structure moreover has an selection for a column or inline structure, with an selection for up to 4 different columns.
That is the column structure with 2 columns.
And right here’s the inline structure.
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.
Beneath the Document Upload Settings tab, select the button to permit the sector to be used as a report upload field.
Once enabled, you’ll be capable of set the maximum upload report size, maximum collection of files, and allowed report types.
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.
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.
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.
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.
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.
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!).
Additionally, you’ll be capable of set the admin electronic mail topic, electronic mail care for CC, and electronic mail care for BCC.
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.
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.
Post Button
Beneath the submit button settings, you’ll be capable of change the submit button text and the wait text.
Integrations
There are two integration alternatives, Zapier and Pabbly. You’ll permit each selection and add the mailbox care for to send emails to.
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.
That is the after submission conduct in movement, showing the nice fortune message, hiding the form identify, and appearing the nice fortune 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.
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.
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.
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.
That is the customized just right fortune button on the front end.
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.
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.
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.
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.
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.
That is the full-width button on the front end.
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.
That is the focus input border highlighting the determine 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Custom designed Label Text
Finally, proper right here you’ll be capable of customize the contact form 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.
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.
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.
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.
Contents
- 1 Putting in place Divi Contact Form Helper
- 2 Divi Contact Form Helper
- 3 Divi Contact Form Helper Examples
- 4 Achieve Divi Contact Form Helper
- 5 Final Concepts
- 6 20 Elementary CSS Pointers for Designers
- 7 Methods to Develop into a Capable Freelance Internet Fashion designer (2024)
- 8 What Is Google Lighthouse? How Can It Toughen Your Website online’s UX?
0 Comments