Display Page Title in header instead of Survey Title



I would like to display Page Title in the header (next to logo) instead of Survey Title. Right now I can show or hide Page or Survey Title, but in my case, I would like to have the page title where the Survey title shows by default (Header).


Thank you for your help !


Jim W (Moderator) answered

    This is possible, but you will have to modify the underlying structure of your survey page.

    Start by going to the STYLE tab and opening the HTML/CSS editor.  See the documentation for details on this – https://help.surveygizmo.com/help/style-your-survey#custom-css-and-html

    Open the Custom HTML tab.  This is the template for your survey pages.  You will notice a merge code – [template(“survey title”)] near the top of the template.  Just replace it with the [template(“page title”)] code from further down the file.  Reviewing the documentation for this might be helpful before you begin – https://help.surveygizmo.com/help/custom-theme#advanced-styling-html-and-css

    I strongly recommend that before you begin to make changes to the HTML template that you copy/ paste the original template somewhere so that you can easily revert back to the default template if you run into unexpected problems.

    Good luck.


    Jim W (Moderator) answered

      The CSS Styles for the Page title still apply, so you will have to adjust them.  The first step will be to open the STYLE > TEXT > TEXT OPTIONS tab and adjust the settings for the SHOW PAGE TITLES option.

      If this does not solve the problem, you will have to write some custom CSS for the sg-page-title class.  See the documentation for details on building custom CSS – https://help.surveygizmo.com/help/css-class-names  Since the page title has a class (sg-page-title) you will just need to add attributes:

      (example) .sg-page-title {font-size: 24px !important; margin:top: 0px;}

      I am sorry that I can’t be more helpful, but I have no personal experience in this particular scenario.

      Jim W (Moderator) edited answer

        I was able to resolve the alignment issues by using inline / css to get logo, survey title and page title in a single row.


        /********************* Align the Title and Logo image ************************/
        .sg-header-image {
        display: inline-block !important;
        .sg-title {
        display: inline-block !important;
        .sg-page-title {
        display: inline-block !important;

        Saarak answered

          Hi Jim

          Thanks for your help. I made the following change to custom HTML, to display both the Survey Title and Page Title. I was hoping them to be in a straight line, but unfortunately, the page title shows up on next line. Please see attached image. It seems like the page:title has a style to start from new line ?

          I tried different alignments for Page Titles, left, center and right but it does not make a difference. Also there is enough space so it is not a wrapping issue either.


          <div class=”sg-wrapper”>
          <div class=”sg-header”>
          <div class=”sg-header-hook-1″></div>
          <img class=”sg-header-image” src=”[template(“header image url”)]” alt=”[template(“header image text”)]”/>

          [template(“survey title”)] : [template(“page title”)]


          Saarak edited answer


            Question stats

            • Active
            • Views9417 times
            • Answers4 answers
            • Followers1 follower