Custom HTML Templates

Custom HTML templates are useful if you want to have total control and customization over the surveys you send. Each survey type can be individually customized as well as each question type.

Creating a Custom Template

Custom HTML templates can be created using the custom templates widget found in the survey management page. Any custom template you create can be used on any survey, so it does not matter which page you choose to create them from.

To create click the Add custom template button on the widget, then provide a template name and click the Add custom template button underneath.

Viewing Custom Templates

To view saved custom HTML templates click the Saved Templates button. You will see a list of templates with options for renaming, editing and deleting.

Assigning a Custom Template

To assign a custom HTML template to a survey you must add the template name into the Custom template prompt field in the Email & Web survey settings. Please note that the template must have an approved version by a Mindful Feedback moderator before it will be displayed in any survey.

Editing a Custom Template

Click the edit pencil icon next to the template you would like to edit to be taken to the custom HTML editor.

The custom HTML editor is made up of three sections. On the left are the various HTML templates for each question type in a survey type folder. There is also custom CSS files that can be edited per survey type.
The middle section of the editor is where open templates will show in a tabbed interface and where you will edit the custom HTML or CSS code.
The right section contains a preview of the template part as you have created it and will refresh with any changes you save.

Custom Template Syntax

General Available Tags:

{{greeting_text}} - Outputs the survey greeting text.
{{instructions_text}} - Outputs the survey instructions text.
{{closing_text}} - Outputs the survey closing text.
{{social_links}} - Outputs the survey social media links as clickable icons.
{{#headings}}
...
{{heading}}
...
{{/headings}} - Outputs the survey question as well as other headings.
{{header}} - Outputs the contents of Sections/Header.html for the corresponding survey type for easy template creation.
{{footer}} - Outputs the contents of Sections/Footer.html for the corresponding survey type for easy template creation.
{{submit_button}} - Outputs the submit button.
{{survey_logo}} - Outputs the survey logo.
{{customer_logo}} - Outputs the customer logo.
{{logo}} - Outputs the link (URL) to the logo.
{{start_survey_button_text}} - Outputs the text for the start survey button.
{{#optional_redirect_button}}
...
{{redirect_url}}
...
{{/optional_redirect_button}} - Outputs the contents of the block depending on if the closing redirect button is required.
{{start_survey_input}} - Outputs the start survey input. Note: this is only for use with web surveys
{{from_name}} - Outputs the customer name or the survey from name (if configured).

Available Translated Tags:

{{translations.sent_by}}
{{translations.on_behalf_of}}
{{translations.unsubscribe}}

Question-Specific Tags:

Text Question:

{{text_input}} - Outputs the text input. Note: this is only for use with web surveys

Number Question:

{{number_input}} - Outputs the number input. Note: this is only for use with web surveys
{{#number_question}}
...
{{href}}
{{text}}
{{class}}
...
{{/number_question}} - Outputs the number question options which can contain custom HTML.
{{number_scale_label_min}} - Outputs the Min scale/No label for the number question.
{{number_scale_label_mid}} - Outputs the Middle scale label for the number question.
{{number_scale_label_max}} - Outputs the Max scale/Yes label for the number question.

NPS Question:

{{nps_input}} - Outputs the NPS input. Note: this is only for use with web surveys
{{#nps_question}}
...
{{href}}
{{text}}
{{class}}
...
{{/nps_question}} - Outputs the NPS question options which can contain custom HTML.
{{nps_scale_label_min}} - Outputs the Min scale/No label for the NPS question.
{{nps_scale_label_mid}} - Outputs the Middle scale label for the NPS question.
{{nps_scale_label_max}} - Outputs the Max scale/Yes label for the NPS question.

Yes/No Question:

{{yes_input}} - Outputs the yes input for the question.
{{no_input}} - Outputs the yes input for the question.

Multichoice Question:

{{#multichoice_options}}
...
{{multichoice_input}}
{{multichoice_number}}
{{multichoice_option}}
...
{{/multichoice_options}} - Outputs the multichoice options which can contain custom HTML.

Available Link Tags:

{{links.unsubscribe}} - Outputs the survey unsubscribe link (URL).
{{links.open_survey_in_browser}} - Outputs the survey open in browser link (URL).
{{links.facebook}} {{links.instagram}} {{links.twitter}} {{links.youtube}} - Outputs the corresponding social media link (URL).

Web Survey Available Tags:

{{no_javascript_warning}} - Outputs a message for users if they have Javascript disabled.
{{#form}}... {{/form}} - Outputs the form that needs to be used to submit responses. The question response input and submit button must be placed inside the form tags.

Asset Tags - To be Used in Web/Sections/Stylesheets.html:

{{assets.simple_line_icons_css}} - Outputs the link (URL) for the library https://simplelineicons.github.io/. Recommended
{{assets.font_awesome_4_7_0_css}} - Outputs the link (URL) for the library https://fontawesome.com/v4.7/. Recommended
{{assets.bootstrap_datetimepicker_4_0_0_css}} - Outputs the link (URL) for the datetime picker library. Recommended
{{assets.bootstrap_slider_7_0_3_css}} - Outputs the link (URL) for the Bootstrap slider library. Recommended
{{assets.bootstrap_3_3_6_css}} - Outputs the link (URL) for the Bootstrap library. Recommended
{{assets.main_css}} - Outputs the link (URL) for the main Mindful Feedback survey CSS. Recommended
{{assets.custom_css}} - Outputs the link (URL) for the custom Mindful Feedback survey CSS. Recommended

Mindful Feedback Available Tags:

{{survey_dynamix.website_link}} - Outputs the link (URL) to the Feedback website.
{{survey_dynamix.referral_link}} - Outputs the referral link (URL) to Feedback.
{{survey_dynamix.privacy_policy_link}} - Outputs the link (URL) to the Mindful Feedback Privacy Policy.

Toolbar

The toolbar contains the following options from left to right: the name of the custom template you are editing, the survey that the template is being previewed as (will use your questions from the survey) and save, publish, help and other options.

The other options overflow menu contains options to view submitted custom templates and delete the current template.

Publishing a Custom Template

Once you have finished editing your custom template and it is to your liking, you will need to click Publish in the top toolbar on the right. You will then have a modal with options for submitting the template for moderation by a Mindful Feedback moderator.
If you would like to leave a comment for a moderator you may do so here. You will need to choose what happens when the template is moderated:

• Wait for manual publish will have no effect on the survey after moderation, you will need to publish the template at a later time to see the new template applied to a survey.
• Publish immediately will apply the template to any surveys that have it assigned as soon as it has been moderated. Take care as this could be any time of the day and will affect surveys that are in progress.
• Publish after lets you schedule a time and date that the template can be published, ideal for quieter times when your users are not completing surveys.

You can also change when the custom template is published at any time once the template has been submitted for moderation.

There is also a dropdown for selecting the preferred survey for use when moderating. It will be set to the survey that you have been using while editing the custom template. If another survey is preferable please select it here before submission.

Once submitted you can view the submitted versions for the custom template from the top right overflow menu. You will see that the version submitted is Awaiting moderation.

Custom Template Moderation

Mindful Feedback moderates all custom HTML templates to ensure the best survey experience. While most HTML and CSS can be used, we limit the usage of JavaScript due to security concerns. Any JavaScript, minified JavaScript or externally linked JavaScript will cause the custom template to fail moderation. Custom HTML templates are primarily intended for customization of survey layout and content not altered functionality.

After Moderation

Once the template has been moderated you will see either Approved or Denied.
If the template has not been published yet you will see Awaiting publishing and you will need to schedule or publish the template when you are ready to use it.

Once the template is moderated and accepted and published you will see Approved and Published and this is when the template will be shown on all surveys that have the custom HTML template set in the Custom template prompt field in the Email & Web survey settings.