twitter-bootstrap - Web Forms for Marketers Sitecore 中的 Bootstrap 设计

Question

我想像这样根据bootstrap设计一个表单:

<form class="form-inline">
    <div class="control-group">
        <div class="input-append">
            <input class="span2" placeholder="Email Address" name="email" id="email" type="text">
            <button class="btn" type="submit">Go!</button>
        </div>
    </div>
</form>

如何自定义 WFFM 的设计？

编辑

我想创建一个这样的表单

这是我的示例 html

<div class="inputBtn">
    <input class="" placeholder="Email Address" name="email" id="email" type="text">
    <button class="" type="submit">Go!</button>
</div>
</div>

我已经创建了 inputBtn 类并按上述方法应用，但它看起来并不完全符合我的要求。它看起来像这样。

Answer 1

首先，您需要将 Css 类的定义添加到 site.css 文件中。

然后需要在Sitecore中根据Template Extended List Item在默认路径/sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes下新建一个Item .在 Value 字段中，您需要输入您的 Css 类。

现在在您的表单设计器中，选择您希望添加类的字段。然后您会在左侧看到您可以在 Css 类下拉列表中选择您的类。见下文

编辑

您可以继续创建自己的自定义字段类型。您需要将 html 添加到 ascx，在实现 BaseUserControl 的代码中。

实现 BaseUserControl 后，您需要在 Result 方法中添加用于电子邮件提交操作的代码。

从那里您需要将新的自定义字段类型添加到 Sitecore。要为营销人员字段添加新的 Web 表单，在内容编辑器中浏览到路径 /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom 并插入一个新的字段类型，输入程序集名称和类名称放入适当的字段。见下文

这将允许您通过表单设计器选择具有该确切样式的新字段类型。引用资料和更多信息如下:

https://divamatrix.wordpress.com/2011/12/20/wffm-custom-field-type-made-easy/ http://jonathanrobbins.co.uk/2015/02/18/sitecore-web-forms-for-marketers-send-email-with-attachment-save-action/