sitecore 营销模块的按钮图像答案

【问题标题】：Button image for sitecore marketer modulesitecore 营销模块的按钮图像
【发布时间】：2011-07-13 12:02:36
【问题描述】：

我想用 Sitecore 中的图像更改营销人员网络表单模块的提交按钮。

提前致谢

【问题讨论】：

标签： image button sitecore web-forms-for-marketers

【解决方案1】：

您可以通过更新以下文件的内容来更改按钮：

\sitecore modules\Web\Web Forms for Marketing\Control\SitecoreSimpleFormAscx.ascx

替换

<wfm:FormSubmit ID="submit" runat="server" Class="scfSubmitButtonBorder"/>

使用您自己的自定义控件（可以包含 Image / LinkButton / 其他）

【讨论】：

【解决方案2】：

听起来您正试图将提交按钮更改为<input type="image" />。我还没有找到用 WFFM 做到这一点的方法。您可以设置提交按钮的样式，也可以将表单导出到 ASCX 并自己更改图像。

<input type="submit" /> 的 CSS 样式可以做很多事情。

http://www.456bereastreet.com/lab/styling-form-controls-revisited/submit-button/

【讨论】：

【解决方案3】：

您可以在 Default.css 中更改按钮样式。使用 background-image 添加图片。

以下示例使用图像作为 WFFM 中提交按钮的背景：

.scfSubmitButtonBorder
{

    background-image: url(/images/bg_button.png);
    padding-left: 5px;
    float: right;
    margin-bottom: 10px;
}

.scfSubmitButtonBorder input
{

    border: none;
    padding: 0 5px 0 0;
    color: white;
    font: 14px/14px FrutigerRoman, Arial !important;
    width: 100px;
    height: 30px;
    background-image: url(/images/bg_button.png);
    background-position: right -30px;
    background-color: transparent;
    cursor: pointer;
}

【讨论】：

【解决方案4】：

我想您是在谈论面向营销人员的 Web 表单模块，是吗？从您最初的问题中不清楚...

无论如何，在表单设计器中，您可以选择提交按钮，您将在左侧看到其属性。在各种属性中，第一个是名为“按钮名称”的编辑框。将提交按钮的所需文本放在那里。

【讨论】：

谢谢。是的，我正在使用面向营销人员的 Web 表单模块。我可以为提交按钮添加图片吗？

【解决方案5】：

我是这样做的。

首先，创建一个自定义控件：

namespace Sitecore.Custom.Controls
{
    public class ImageSubmitButton : Sitecore.Form.Web.UI.Controls.SubmitButton
    {
        public string ImageUrl { get; set; }

        protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
        {
            if (string.IsNullOrEmpty(ImageUrl) == false)
            {
                writer.AddAttribute("type", "image");
                writer.AddAttribute("src", ResolveUrl(ImageUrl));
            }
            // This won't overwrite our explicit type="image"
            base.AddAttributesToRender(writer);
        }
    }
}

在 sitecore 中将表单导出为 ASCX，使用开发人员中心创建新的子布局并将导出的 ASCX 代码复制到此文件中。首先，注册一个新的前缀

<%@ Register TagPrefix="ctrl" Namespace="Sitecore.Custom.Controls" Assembly="<AssemblyName>" %>

最后，改变

  <cc0:submitbutton runat="server" onclientclick="$scw.webform.lastSubmit = this.id;" text="Submit" validationgroup="..." cssclass="..." id="..." onclick="OnClick" >
  </cc0:submitbutton>

到

<ctrl:ImageSubmitButton ImageUrl="~/imgs/button.png" runat="server" OnClientClick="$scw.webform.lastSubmit = this.id;"
    Text="Submit" validationgroup="..." cssclass="..." id="..."
    OnClick="OnClick"></ctrl:ImageSubmitButton>

最后，将项目中的表单替换为子布局。

【讨论】：