How to select an existing form when adding a WFFM Form using Experience Editor

Question

When we add a new Form rendering to a placeholder the only options that are available on the wizard are to Create a blank form or Select a form to copy:

There is no option to use existing forms that may have been previously created and used on other pages.

Does the WFFM module support choosing an existing form option while creating or adding a forms in a placeholder? How can we enable the option to allow selection of existing forms, or how can our content editors re-use the forms from other areas of the site?

I'm using Sitecore 8.0 update 3 version.

Answer 1

It is not possible to select an existing form when you add a form onto a page in Sitecore 8.0 update 3 or earlier versions.

One option is to upgrade your Sitecore instance to 8.0 Update 6, in which this option was added, but be aware that there were a number of other big changes in this release including a number of code changes and updates to the front-end framework to use Bootstrap which may require you to spend a significant time updating your styling to fix this.

An alternative is to override the Form Selector and provide your own implementation to add a "Use existing form" option. I have previously written a blog post on this exact thing for Sitecore 8.0 Update-3

Steps to override the Form Selector

Make a copy of /sitecore/shell/Applications/Modules/Web Forms for Marketers/InsertFormWizard.xml and copy it to /sitecore/shell/Override folder.

Update the file to change the Codebeside tag to point to your implementation:

<WizardForm Application="Modules/Web Forms for Marketers/Insert Form Wizard" CodeBeside="MyProject.Custom.WFFM.UI.InsertFormWizard, MyProject.Custom">

Add a new RadioButton that will allow selection for existing forms:

<Border Margin="10px">
  <Radiobutton ID="ChooseExistingForm" Name="ChooseOperation" Value="existing"/>
</Border>

And create a Class that for the code behind. You want to check if the new "Existing Form" option has been selected and if so vary the wizard page shown appropriately:

namespace MyProject.Custom.WFFM.UI
{
    public class InsertFormWizard : Sitecore.Forms.Shell.UI.InsertFormWizard
    {
        protected Radiobutton ChooseExistingForm;

        protected override bool ActivePageChanging(string page, ref string newpage)
        {
            if (newpage == "SelectPlaceholder" && page == "SelectForm" && this.ChooseExistingForm.Checked)
                newpage = string.IsNullOrEmpty(base.Placeholder) ? "SelectPlaceholder" : "ConfirmationPage";

            if (this.ChooseExistingForm.Checked && newpage == "AnalyticsPage")
                newpage = "ConfirmationPage";

            return base.ActivePageChanging(page, ref newpage);
        }

        protected override void OnNext(object sender, EventArgs formEventArgs)
        {
            if (this.NextButton.Header == "Confirm" && this.ChooseExistingForm.Checked)
            {
                this.SaveExistingFormSelection();
                SheerResponse.SetModified(false);
                this.Next();
                return;
            }
            base.OnNext(sender, formEventArgs);
        }

        private void SaveExistingFormSelection()
        {
            Item source = ExistingFormSelection();
            this.ServerProperties[this.newFormUri] = source.Uri.ToString();
            Registry.SetString("/Current_User/Dialogs//sitecore/shell/default.aspx?xmlcontrol=Forms.FormDesigner", "1250,500");
            SheerResponse.SetDialogValue(source.ID.ToString());
        }

        private Item ExistingFormSelection()
        {
            string queryString = Sitecore.Web.WebUtil.GetQueryString("la");
            Language result = Context.ContentLanguage;
            if (!string.IsNullOrEmpty(queryString))
                Language.TryParse(Sitecore.Web.WebUtil.GetQueryString("la"), out result);

            Item source = this.FormsRoot.Database.GetItem(this.multiTree.Selected, result);
            return source;
        }
    }
}

The above is the minimum code required to make this work. I suggest reading the blog post for a more thorough explanation and the full code is also available in this Github Gist.

The user will now have the option to select an existing form using the wizard.