With the addition of button styles in phpQ 2.1, you can now customize every aspect of the survey. No longer are you restricted to using the default button styles for "Submit", "Next" and "View Results". With the introduction of the Submit Button Style, Results Button Style and Next Button Style you can now control all buttons that users may view. The following fields will help you to customize these buttons:
  • Text - When used with an Image, this text will become the ALT tag for your button. Otherwise, the text that you type in here (such as 'Submit' or 'Next') will become the label for your button.

  • Width and Height - When used with an Image, these fields will control the width and height of your image, as attributes in the tag. If you are not using an image, we will apply correct CSS definitions to your text button to make it this size. These fields are defined in pixels.

  • Image - If you are not a fan of boring looking submit buttons, you can now use any image on your web site as the next, submit or results button! Simply enter the URL to your image in this box and it will be used as the button.
Please note that the Next Button Style will only appear if you have a multi-page survey and the Results Button Style will only appear if you have the Survey Results field set to 'Make survey results public (include button on survey)'. Furthermore, if you do have public results and a multi-page survey, the Next Button Style will also be used on the page-by-page view of your public results.

Advanced CSS Trick
Some of you may be wondering why we left out CSS customization of the button when it is readily available for all other areas of phpQ. We felt that the Text/Size/Image fields were more useful on a day to day basis for most users' needs. However, we have a little trick for those of you who want to customize your button CSS.

When you leave the Image portion of your Button Style blank, the Text field will be included in the VALUE="" portion of your <input> tag. Normally, if you put 'Submit' as the Text, this would result in:

<INPUT TYPE=submit VALUE="Submit">

If you were instead, however to enter into the Text field something like 'Submit" STYLE="color: red;' you would achieve the following:

<INPUT TYPE=submit VALUE="Submit" STYLE="color: red;">

It is important to note that you need to include a double quote after the text you wish to have appear on your button and then leave off the last double quote from the end of your STYLE definition. Once you have the basic format down, it is easy to add any styles you want! If you have any further questions on this, simply contact chumpsoft support and we will be happy to help.