CODEWITHSUNDEEP
imagebuttonsitecoreweb-forms-for-marketers
ashish
ashish

Reputation: 21

Button image for sitecore marketer module

I want to change submit button of Web Forms for Marketers module with image in Sitecore.

Thank in advance

Upvotes: 2

Views: 1215

Answers (5)

crand
crand

Reputation: 11

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

Upvotes: 1

Andrew
Andrew

Reputation: 1279

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.

Upvotes: 0

Alexander Doroshenko
Alexander Doroshenko

Reputation: 1715

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)

Upvotes: 2

nickwesselman
nickwesselman

Reputation: 6890

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/

Upvotes: 1

Yan Sklyarenko
Yan Sklyarenko

Reputation: 32280

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.

Upvotes: 0

Related Questions