+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom Subscribe form

Custom Subscribe form

6 posts, 1 answered
  1. Leander
    Leander avatar
    1 posts
    Registered:
    05 Oct 2011
    28 Dec 2011
    Link to this post
    I need to create a simple mailing list subscribe form. My only issue with the standard one, is that the labels are outside the textboxes and my designer wants them inside.

    Can someone share the code of the standard Mailing list subscribe form perhaps?

    Maybe creating a widget is the easiest, but I have noidea how to connect it to a mailing list.

    Thanks
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    28 Dec 2011
    Link to this post
    Hello,

    To use a local copy of the subscribe form for newsletter that the designer can modify create new .ascx file in your project (no code behind will be needed). This is the template for the built in subscribe form, place it in the .ascx file

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
      
    <asp:Panel ID="errorsPanel" runat="server" CssClass="sfErrorSummary" Visible="false" />
    <fieldset id="formFieldset" runat="server" class="sfnewsletterForm sfSubscribe">
        <sitefinity:SitefinityLabel id="widgetTitle" runat="server" WrapperTagName="h2" HideIfNoText="true" CssClass="sfnewsletterTitle" />
        <sitefinity:SitefinityLabel id="widgetDescription" runat="server" WrapperTagName="p" HideIfNoText="true" CssClass="sfnewsletterDescription" />
        <sitefinity:Message ID="messageControl" runat="server" FadeDuration="3000" />
        <ol class="sfnewsletterFieldsList">
            <li class="sfnewsletterField">
                <asp:Label ID="emailAddressLabel" runat="server" Text='<%$Resources:NewslettersResources, EmailAddress %>' AssociatedControlID="emailAddress" CssClass="sfTxtLbl" />
                <asp:TextBox ID="emailAddress" runat="server" CssClass="sfTxt" />
                <asp:RequiredFieldValidator ID="emailValidator" runat="server" ControlToValidate="emailAddress" ValidationGroup="subscribeForm" CssClass="sfErrorWrp" Display="Dynamic">
                    <strong class="sfError"><asp:Literal runat="server" ID="lEmailIsRequired" Text='<%$Resources:NewslettersResources, EmailIsRequired %>' /></strong>
                </asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator
                    ID="emailRegExp"
                    runat="server"
                    ControlToValidate="emailAddress"
                    ValidationGroup="subscribeForm"
                    ValidationExpression="[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4}"
                    Display="Dynamic"
                    CssClass="sfErrorWrp"
                    ErrorMessage="<%$ Resources:ErrorMessages, EmailAddressViolationMessage %>">
                        <strong class="sfError"><asp:Literal ID="lEmailNotValid" runat="server" Text="<%$ Resources:ErrorMessages, EmailAddressViolationMessage %>" /></strong>
                </asp:RegularExpressionValidator>
            </li>
            <li class="sfnewsletterField">
                <asp:Label ID="firstNameLabel" runat="server" Text='<%$Resources:NewslettersResources, FirstNamePublicForm %>' AssociatedControlID="firstName" CssClass="sfTxtLbl" />
                <asp:TextBox ID="firstName" runat="server" CssClass="sfTxt" />
            </li>
            <li class="sfnewsletterField">
                <asp:Label ID="lastNameLabel" runat="server" Text='<%$Resources:NewslettersResources, LastNamePublicForm %>' AssociatedControlID="lastName" CssClass="sfTxtLbl" />
                <asp:TextBox ID="lastName" runat="server" CssClass="sfTxt" />
            </li>
        </ol>
        <div class="sfnewsletterSubmitBtnWrp">
            <asp:Button ID="subscribeButton" runat="server" Text='<%$Resources:NewslettersResources, SubscribeToList %>' ValidationGroup="subscribeForm" CssClass="sfnewsletterSubmitBtn" />
        </div>
    </fieldset>
      
    <asp:Panel ID="selectListInstructionPanel" runat="server">
        <asp:Literal ID="pleaseSelectList" runat="server" Text='<%$Resources:NewslettersResources, ClickEditAndSelectList %>' />
    </asp:Panel>
    Build the application and go to Administration->Settings->Advanced->Controls->ViewMap and map new template with Host: Telerik.Sitefinity.Modules.Newsletters.Web.UI.Public.SubscribeForm
    in Layout Template enter the relative path to the .ascx file created ~/MyCustomSubscribeForm.ascx
    Restart the application by making a dummy change in web.config and now the subscribe form for newsletters will use the new template that you can modify to suit your needs.
     

    Kind regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. Lori
    Lori avatar
    4 posts
    Registered:
    25 Feb 2009
    03 Oct 2013 in reply to Stanislav Velikov
    Link to this post
    I tried this method in Sitefinity 6.1.43 and it did not work. When I refresh the page containing the subscribe widget, the UI still displays the widget in its original state. Is this code not valid for this version? I also noticed that the code you provided above contains a control to allow the user to pick an email list they wish to subscribe to. Is there a reason why the widget in my version does not contain that?

    Thanks

     
  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    08 Oct 2013
    Link to this post
    Hi,

    If the old template is still used for the mapped subscribe form as described below then the site was not restarted after applying the mentioned configurations. The new template will be picked up after the site restarts. Make a dummy change in web.config and save it to restart the site.

    Regards,
    Stanislav Velikov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Harry
    Harry avatar
    9 posts
    Registered:
    23 Aug 2013
    13 Feb 2014
    Link to this post
    Hi,

    Following the instruction, I can apply my custom template to the subscribe form widget. However, I need to add some validation logic to the form before submitting. Please advise me the best way to do that.

    Thank you very much,
    Harry
  6. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    17 Feb 2014
    Link to this post
    Hello,

    It depends what kind of validation you want to use. Generally you could implement javascript validation which is not the best option as it could be easily turned off or you could perform server side validation by extending the SubscribeForm widget and subscribe to the click event where you need to implement your validation logic:
    public class ExtendedForm : SubscribeForm
        {
            protected override void InitializeControls(GenericContainer container)
            {
     
                    base.InitializeControls(container);
                    base.SubscribeButton.Click += SubscribeButton_Click;
            }
     
            void SubscribeButton_Click(object sender, EventArgs e)
            {
               //Validation logic here...
            }
        }

    You can get each of your controls from the template and validate their input.

    In case you want to add a captcha validation, there is a blogpost by Stanislav Velikov (which is for forms, but can be modified to fit a subscribe control):
    http://www.sitefinity.com/blogs/stanislav-velikovs-blog/2013/09/20/server-side-captcha-for-sitefinity-forms

    I hope this helps.

    Regards,
    Vassil Vassilev
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
6 posts, 1 answered