Button image for sitecore marketer module

I want to change s开发者_如何转开发ubmit button of Web Forms for Marketers module with image in Sitecore.

Thank in advance

You can change the button by updating contents of the following file:

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

Replace

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

with you own custom control (which can contain Image / LinkButton / whatever)

It sounds like you are trying to change the submit button into an <input type="image" />. I have not found a way to do this with WFFM. You can style the submit button, or you can export the form to ASCX and make the change to an image yourself.

You can do quite a bit with CSS styling of <input type="submit" />.

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

You can change the button style in Default.css. Use background-image to add the image.

Below example use an image as background for the Submit button in 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;
}

I suppose you're talking about Web Forms for Marketers module, aren't you? It is not clear from your initial question...

Anyway, in Form designer you can select the submit button and you'll its properties on the left side. Among various properties, the very first is the edit box called "Button Name" . Put the desired text for the Submit button there.

Here's how I did it.

First, create a custom control:

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);
        }
    }
}

Export the form as ASCX in sitecore, use the Developer Center to create a new Sublayout and copy the exported ASCX code into this file. First, register a new prefix

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

Finally, change

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

to

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

Finally, replace the form in your item with the sublayout.