我想用 Sitecore 中的图像更改营销人员 Web 表单模块的提交按钮。
预先感谢
您可以通过更新以下文件的内容来更改按钮:
\sitecore modules\Web\Web Forms for Marketing\Control\SitecoreSimpleFormAscx.ascx
代替
<wfm:FormSubmit ID="submit" runat="server" Class="scfSubmitButtonBorder"/>
使用您自己的自定义控件(可以包含 Image / LinkButton / 其他)
听起来您正在尝试将提交按钮更改为<input type="image" />
. 我还没有找到用 WFFM 做到这一点的方法。您可以设置提交按钮的样式,也可以将表单导出到 ASCX 并自己更改图像。
您可以使用<input type="submit" />
.
http://www.456bereastreet.com/lab/styling-form-controls-revisited/submit-button/
您可以在 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;
}
这就是我的做法。
首先,创建一个自定义控件:
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>
最后,将项目中的表单替换为子布局。
我想您是在谈论营销人员的 Web 表单模块,不是吗?从您最初的问题中不清楚...
无论如何,在表单设计器中,您可以选择提交按钮,您将在左侧看到其属性。在各种属性中,第一个是名为“按钮名称”的编辑框。将提交按钮的所需文本放在那里。