private static void AddFormSpecificMarkup(GetFormFieldRenderingConfigurationEventArgs e)
{
// Gets the context of the Form for which the field is being rendered
BizFormComponentContext context = e.FormComponent.GetBizFormComponentContext();
// Modifies only form fields rendered as part of the 'ContactUs' form
if (context.FormInfo.FormName.Equals("ContactUs", StringComparison.InvariantCultureIgnoreCase))
{
e.Configuration.ColonAfterLabel = false;
e.Configuration.EditorHtmlAttributes["data-formname"] = context.FormInfo.FormDisplayName;
}
}
public static void HideInvisibleRecaptchaLabel(this GetFormFieldRenderingConfigurationEventArgs e)
{
if (e.FormComponent.Definition.Identifier == InvisibleRecaptchaComponent.IDENTIFIER)
{
if (e.Configuration.LabelHtmlAttributes.ContainsKey("style"))
{
e.Configuration.LabelHtmlAttributes["style"] += " display:none;";
}
else
{
e.Configuration.LabelHtmlAttributes["style"] = "display:none;";
}
}
}
private static void AddFieldSpecificMarkup(GetFormFieldRenderingConfigurationEventArgs e)
{
// Sets a custom CSS class for the wrapping element of 'TextAreaComponent' type form fields
if (e.FormComponent is TextAreaComponent)
{
if (e.Configuration.RootConfiguration.HtmlAttributes.ContainsKey("class"))
{
e.Configuration.RootConfiguration.HtmlAttributes["class"] += " text-area-styles";
}
else
{
e.Configuration.RootConfiguration.HtmlAttributes["class"] = "text-area-styles";
}
}
}
private static void InjectMarkupIntoKenticoComponents(object sender, GetFormFieldRenderingConfigurationEventArgs e)
{
// Only injects additional markup into default Kentico form components
if (!e.FormComponent.Definition.Identifier.StartsWith("Kentico", StringComparison.InvariantCultureIgnoreCase))
{
return;
}
// Adds WAI-ARIA and HTML5 accessibility attributes to form fields marked as 'Required' via the Form builder interface
AddAccessibilityAttributes(e);
// Assigns additional attributes to 'TextArea' fields
AddFieldSpecificMarkup(e);
// Assigns additional attributes to fields rendered as part of a specified form
AddFormSpecificMarkup(e);
}
private void GetConfiguration_Execute(object sender, GetFormFieldRenderingConfigurationEventArgs e)
{
if (e.FormComponent.GetBizFormComponentContext().FormInfo.FormName.Equals("Contact"))
{
switch (e.FormComponent.Name.ToLower())
{
case "phone":
e.FormComponent.BaseProperties.Placeholder = e.FormComponent.BaseProperties.Label;
//e.Configuration.EditorHtmlAttributes.Add("placeholder", "Phone");
break;
}
if (e.FormComponent.BaseProperties.Required)
{
e.Configuration.EditorHtmlAttributes.Add("required", "required");
e.FormComponent.BaseProperties.Placeholder += "*";
}
}
}
private static void AddAccessibilityAttributes(GetFormFieldRenderingConfigurationEventArgs e)
{
if (e.FormComponent.BaseProperties.Required)
{
// Adds the 'aria-required' and 'required' attributes to the component's 'input' element
e.Configuration.EditorHtmlAttributes["aria-required"] = "true";
e.Configuration.EditorHtmlAttributes["required"] = "";
// Appends an asterisk to the component's 'Label' element. Since the class attribute is fairly
// common, checks if the key is already present and inserts or appends the key accordingly.
if (e.Configuration.LabelHtmlAttributes.ContainsKey("class"))
{
e.Configuration.LabelHtmlAttributes["class"] += " required-field-red-star";
}
else
{
e.Configuration.LabelHtmlAttributes["class"] = "required-field-red-star";
}
}
}
private void GetConfiguration_Execute1(object sender, GetFormFieldRenderingConfigurationEventArgs e)
{
string FormName = e.FormComponent.GetBizFormComponentContext().FormInfo.FormName;
string FormFieldName = e.FormComponent.Name;
switch (FormName)
{
// https://getbootstrap.com/docs/4.0/components/forms/#form-grid
default:
// Set Bootstrap 4 Layout properties to:
// form-group Automation: On Column (or none if you do not want to use form groups)
// Columns: any #
// Set column sizes to whatever you wish
// Put various form elements within the columns
break;
// https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form
// Set Bootstrap 4 Layout properties to:
// form-group Automation: On Row
// Columns: 1
// 1st Column Size: Do not render column div
// (put various form elements within the div)
case "Example_LabelInputSideBySide":
switch (FormFieldName)
{
case "FirstName":
case "LastName":
e.Configuration.LabelHtmlAttributes["class"] = "col-sm-2";
e.Configuration.EditorWrapperConfiguration = new ElementRenderingConfiguration
{
ElementName = "div",
HtmlAttributes = { { "class", "col-sm-4" } }
};
break;
default:
e.Configuration.LabelHtmlAttributes["class"] = "col-sm-2";
e.Configuration.EditorWrapperConfiguration = new ElementRenderingConfiguration
{
ElementName = "div",
HtmlAttributes = { { "class", "col-sm-2" } }
};
break;
}
break;
// https://getbootstrap.com/docs/4.0/components/forms/#inline-forms
// Set Bootstrap 4 Layout properties to:
// form-group Automation: none
// Container CSS: form-inline
// Columns: 1
// 1st Column Size: Do not render column div
// (put various form elements within the div)
case "Example_FormInline":
e.Configuration.LabelHtmlAttributes["class"] = "sr-only";
e.Configuration.EditorHtmlAttributes["class"] = "form-control mb-2 mr-sm-2";
break;
}
// https://getbootstrap.com/docs/4.0/components/forms/#select-menu
if (e.FormComponent is DropDownComponent)
{
if (e.Configuration.EditorHtmlAttributes.ContainsKey("class"))
{
e.Configuration.EditorHtmlAttributes["class"] += " custom-select";
}
else
{
e.Configuration.EditorHtmlAttributes["class"] = " custom-select";
}
}
}