Contact Form, Improved Style Editor and More

LordnMaster

Aspirant
Joined
Jul 17, 2017
Messages
45
WoltLab Suite 3.1 entered the beta phase last week, and it's time to introduce you to some of the new features and improvements in this version. This is the first part of a small series that outlines a selection of enhancements, a complete list of all changes and additions will be made available in the Release Candidate (RC) phase.



Similar to the preview on WoltLab Suite 3.0, we won't draw sharp lines between the Core package and features provided by the individual app. This makes a lot of sense, given that the majority of features are provided in part by the Core, but apps need to implement them to make them usable.

Customizable Contact Form
Contact forms are a convenient way to contact the site owner, they are nicely embedded into the UI of your site and does not require the visitor to launch their mail app. It also gives you more control over the contents of the submitted message, in particular by using additional input fields that request very specific information from the user.



awww_woltlab_com_attachment_130447_contactform_en_png__25b88c6fcf20c0dbb6766c14368a9754._.png



You may offer the user the ability to select different recipients, allowing them to directly transmit the message to the appropriate recipient. This is an optional feature that can be turned off by defining only a single, active recipient at a time, causing the contact form to deliver the message to the same recipient at all times.



awww_woltlab_com_attachment_130448_contactform_customfield_en_39212d7bc0d59dd76a6e3db782fbc172.png



The default installation includes an input field for a subject and the message, but you can add as many custom input fields as you need. There are 11 built-in types that cover a wide range of different input fields:

  1. Short text (single line, no line breaks)
  2. Multiline text (includes line breaks)
  3. Yes / No-Selection
  4. Checkboxes
  5. Date
  6. Integer
  7. Decimal Number
  8. Multi-Select
  9. Radio-Buttons
  10. Selection Drop-Down
  11. Link
Improved Style Editor
There have been various updates to the style editor and the style system itself. You can now easily add a custom favicon by uploading a 256x256 pixel wide image. This image is dynamically resized and converted into multiple different sizes and formats to address the requirements of all major web browsers, covering both desktop and mobile devices alike.



We have added a compatibility mode for styles that allows us to gradually improve the core CSS without breaking compatibility to existing styles. Your styles will continue to work after the upgrade and there is no need to make any adjustments whatsoever.



awww_woltlab_com_attachment_130476_style_compatibilitymode_en_png__.png



Some enhancements, such as the newly added style variables, are only applied to styles with disabled compatibility mode. The actual style changes in WoltLab Suite 3.1 are pretty small, so chances are high that you can disable the compatibility mode and everything will be fine. This switch is a safe-guard to make the transition as smooth as possible, while still giving you (or the style creator) the opportunity to adapt to these changes.



awww_woltlab_com_attachment_130449_style_categoryselection_en_87a45fcbcb88f3879845b9492ffa8d33.png



There have been some changes made to the color palette in an effort to improve its usability for both style creators and users. The biggest change is the area selection tool that overlays the preview window, outlining the respective areas, and selecting categories based on the clicked area. Not only does it save you quite some time, it also illustrates which parts of a page are affected by what style variables.



awww_woltlab_com_attachment_130450_style_allcategories_en_png_6fc60d011d31f51b5584b9085499483f.png



You can now toggle the color palette, which hides the preview window and brings up all the available categories on the screen at once. The color palette is shown using a dynamic number of columns depending on your screen size in an attempt to maximize the number of visible color variables. This switch works in-place, so you can switch back and forth at any time without losing your changes.

Tracking of Modified Phrases
Customizing your site to match your requirements is more than just a visual overhaul and a modified user interface, it also includes changes to phrases to appeal to your target audience.



Some phrases contain the so-called “template scripting” that allows for dynamic changes to phrases depending on outside variables and their content. This creates a scenario where changes to the template variables can break the phrase and the underlying, generated PHP code, eventually causing an error.



awww_woltlab_com_attachment_130488_outdatedphrases_warning_en_png__.png



Phrases can get updated through plugin updates and customized versions are automatically disabled when the original value is updated. This prevents your site from failing due to outdated template scripting in phrases, but this has always been a rather silent process that can easily slip by unnoticed.



We’ve added a new status warning on the package list that will notify on custom phrases that have recently been disabled for the aforementioned reasons, clicking on the link will bring you to a filtered list of affected phrases.



awww_woltlab_com_attachment_130489_outdatedphrases_filter_en_png__.png



The filter option for the phrases shows custom values that have been automatically disabled in the past 7 days, regardless of how often they have been updated during that time. It does not include custom phrases that have been disabled manually.



awww_woltlab_com_attachment_130490_outdatedphrases_editphrase_5bf3e1775034b11e3037b608e51a6701.png



Editing an automatically disabled phrase will show not only the regular editing controls, but also includes an additional section that displays the old value of that phrase.



The displayed value equals the original value at the time when your custom value was disabled, that is, the value that was present when you last edited your custom version. Successive changes to the original value, while your custom version is disabled, will not alter the stored reference value. This is necessary to show you exactly what the value has been, so that you can compare the old and new version in order to determine how to adapt these changes in your custom version.

Accelerated Guest View
Attracting new users and search engine traffic has become more and more challenging over the past years, including but not limited to the relative speed of a site. We have put a lot of effort into speeding up our software and providing a smooth experience for users and visitors alike. As with all things, there is a limit on how far we can go without restricting the amount of available features.



Many components are re-used across the software, avoiding duplicate code that both slows down your site and increases the maintenance effort. There is a catch though: A typical component, for example the editor, relies on a larger set of other components that are in return required by some other parts too. This creates a situation where we can only make minor improvements by stripping some components, because the majority of the available code may or may not be re-used in other parts of the software.



awww_woltlab_com_attachment_130499_acceleratedguestview_switch_en_png__.png



WoltLab Suite 3.1 introduces a new mode called the “Accelerated Guest View” that improves your sites performance for guests and search engines by a large amount, but removes the ability for guests to create content. Once enabled, guests can no longer create or reply to threads or write comments on a wall, while they can still access the content on your site. If they want to participate on your site, they’ll have to register themselves in order to do so.



awww_woltlab_com_attachment_130500_acceleratedguestview_usergroupwarning_en_png__.png



This mode is still somewhat experimental, as some plugins may not be fully compatible, and is disabled by default for both new installations and upgrades from previous versions. Also you cannot selectively allow guests to create content in some parts of your site while this mode is active.



In short, this new mode is an attempt to improve the site performance for those who disallow content creation by guests and who want to squeeze out a bit of extra speed. We’ll continue to make improvements to our software wherever possible, regardless of this special mode.



The “Accelerated Guest View” is enabled on woltlab.com.
https://community.woltlab.com/thread/262617-contact-form-improved-style-editor-and-more/
 
Top