Poll Template | Communifire Documentation

The Poll template allows you to add a poll on any Page Builder page. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Poll and Survey Widgets on a Page Builder page
2. Edit the widget
3. Select the poll
4. Select the Poll template in the Template tab

Template HTML

Below is the HTML of this template, for your reference.

<div id="axero-poll-widget-{{WidgetID}}" class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">

    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    
    <div class="axero-widget-content">
      <div id="divPoll" class="axero-poll-section">
            <p class="poll-question">
                {{{Contents.Question}}}
                <span id="PollVoteID" style="display: none;">{{Contents.PollID}}</span>
            </p>
            <div id="divQuest">
                <ul id="ctl00_ContentPlaceHolder1_PollVote1_rblPollChoices" class="axero-poll-choices">
                    {{#each Contents.PollChoices}}
                        <li>
                    		<input id="PollChoices_{{ChoiceID}}" name="ctl00$ContentPlaceHolder1$PollVote1$rblPollChoices" type="radio" value="{{ChoiceID}}">
                    		<label for="PollChoices_{{ChoiceID}}">{{#if ChoiceImageUrl}}<img height="100" width="100" src="{{{ChoiceImageUrl}}}" /> {{/if}}{{{Choice}}}</label>
                    	</li>
                    {{/each}}
            
                </ul>          
                <span class="msg"></span>
                <div id="ctl00_ContentPlaceHolder1_PollVote1_pnlButton">	
                <p class="poll-submit-button"></p>            
        </div>
    </div>
    <div id="divAnswers" class="axero-poll-results"></div>

            <div id="axero-poll-buttons" class="clearfix">
                <div class="btn-group">
                    <input name="btnVote" type="button" id="btnVote" class="btn" value="{{{Resources.PollViewText}}}">
                    <input name="btnViewVote" type="button" id="btnViewVote" class="btn" value="{{{Resources.PollViewResultsText}}}">
                </div>
            </div>
        </div>
    </div>

{{#if Contents.IsAnonymous}}
    <div class="alert alert-info">
        <i class="fas fa-user-shield"></i> <span class="alert-text">{{{resources.AnonPollText}}}</span>
    </div>
    {{/if}}
    
{{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        {{{FooterHTML}}}
    </div>
    {{/if}}
    
</div>
<script  type="text/javascript">

jQuery(function(){

   var resources = {
        PollSelectChoiceText:'{{{Resources.PollSelectChoiceText}}}',
        PollViewText:'{{{Resources.PollViewText}}}',
        PollViewPollText:'{{{Resources.PollViewPollText}}}',
        PollLoginToVoteText:'{{{Resources.PollLoginToVoteText}}}',
        PollAlreadyVotedForPollChoiceText:'{{{Resources.PollAlreadyVotedForPollChoiceText}}}',
        PollAlreadyVotedText:'{{{Resources.PollAlreadyVotedText}}}',
        PollNoPermissionToVoteText:'{{{Resources.PollNoPermissionToVoteText}}}'
    };
    
    Communifire.Poll.init({
     context:'#axero-poll-widget-{{WidgetID}}',
     resources:resources,
     choiceID:{{Contents.PollVote.ChoiceID}}
    });

});

</script>