0

I am adding toggle switch as a custom field.

Toggle.cs (Toggle C# code)

public class Toggle: Sitecore.Form.Web.UI.Controls.Checkbox
    {
    }

    public class ToggleField : Sitecore.Forms.Mvc.ViewModels.Fields.CheckboxField
    {
        public override void Initialize()
        {
            base.Initialize();
        }
    }

Toggle.cshtml (This is the toggle view page)

@using (Html.BeginField())
{

    <label class="switch">
        <input type="checkbox" checked>
    </label>

}
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

        .slider.round:before {
            border-radius: 50%;
        }
</style>

I can see the toggle switch but there is a checkbox sitting under the toggle so clicking on the toggle does not do anything .

I can see the following code is being injected

<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: inline;">
</span>
<span class="icon fa fa-check-square" style="display: none;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span></button>
</span>

The following code is sitting under the toggle switch code and if I remove this code then toggle switch starts working fine.

Is there anything I am doing wrong .

Any suggestions or help aprreciated

Thanks in advance

JSFiddle link https://jsfiddle.net/f2637e5p/

  • My suggestion would be take the whole HTML part of it and create a new fiddle on this link jsfiddle.net. And share the fiddle here so that the issue is visible to everyone and css and front end expert can provide suggestions. – Umar D Nov 20 '18 at 22:53
  • Thanks @UmarD , here is the link jsfiddle.net/f2637e5p – Owais Ahmed Nov 21 '18 at 1:10
  • Done. Have a look at this link. jsfiddle.net/f2637e5p. I just moved label <label class="switch"> closer to switch control and changed type type to checkbox. – Umar D Nov 21 '18 at 3:26
  • @UmarD I cannot see any changes. Did you send the correct link because this is the same link I sent earlier – Owais Ahmed Nov 21 '18 at 3:30
  • 1
    You are welcome. Its not check box.It is button control that you have above it. Try inspecting it in browser developer tools. You will understand. <button type="button" class="btn clearfix custom-btn"> <span class="icon fa fa-check theme-text" style="display:none;"></span> <span class="icon fa fa-check-square"></span> <span cl – Umar D Nov 21 '18 at 3:36
2

You're rendering the HTML markup directly in your cshtml file, but you need to use the Html Helpers. I suggest you take a look at the default Checkbox field markup located in /Website/Views/Form/EditorTemplates/CheckboxField.cshtml, your markup is almost exactly the same as the default view:

@using Sitecore.WFFM.Abstractions.Data.Enums
@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.Fields.CheckboxField

@using (Html.BeginField())
{
    var cssclass = Model.FormType == FormType.Inline ? "checkbox-inline" : "checkbox";
    <div class="@cssclass">
        <label>
            @Html.CheckBoxFor(x => Model.Value)
            @Html.BootstrapText("Title")
        </label>
    </div>
}

You can get away withoiut a custom field, by changing the .switch class selector in (I presume) your JavaScript/jQuery code to instead of looking for "label.switch" to "div.switch label" (this is purely a guess without looking at that code, you don't need the node selector here tbh).

You can then add a custom class for WFFM and then apply to the fields that require this custom functionality. Move the styling to the CSS files that the rest of your site uses, rather than putting it inline in the view, this is general best practice anyway.

Meta Data Css Class

Apply Css Class

| improve this answer | |
  • THANKS this is the HTML which is generated and I tried CSS but it is not doing anything jsfiddle.net/kdej9w2y/2 @jammykam – Owais Ahmed Nov 21 '18 at 4:00
  • I don't know what your CSS is supposed to be doing, but it is not correct in relation to the markup. e.g. input:checked + label is for sibling elements, but in the markup the input is nested inside the label (i.e. label > input). This is a CSS/JS problem and not a WFFM problem. – jammykam Nov 21 '18 at 17:28
  • The css is to create a toggle effect , when click on it then it should be active or deactivate. But currently it is not clickable and this is what i am trying to solve. I agree this is not a Wffm problem so i am trying to fix Css – Owais Ahmed Nov 21 '18 at 17:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.