Design the Appearance and Format of Web Pages

1. From Web, select Page designer under Configuration.

2. On the Select Layout tab, select a layout for your web pages. The layout determines where items appear on your web pages.

3. Select Next to edit colors and styles.

   • The Basic colors and styles section lets you make basic tweaks to fonts and colors

   • The Advanced colors and styles section lets you edit the style sheet directly

4. Under Background colors, select background colors for sections of your web pages.

5. Under Page typography, select the font, size, and color for all text on your web pages.

6. Under Form title, select the font size and color for section headers.

7. Under Form labels, select the font size and color for field labels.

8. To use Cascading Style Sheets (CSS) to edit the web page’s appearance, select Advanced colors and styles and select Edit stylesheet. Here, you can edit properties through CSS. For example, you can edit the web page’s fonts, colors, backgrounds, and other properties. You can also insert HTML tags and apply styles to them.

9. To load the CSS selectors that let you edit the appearance of forms, select Insert CSS selectors.

10. In the Insert selectors for field, select the CSS selector to load in the Stylesheet text editor. To include the default styles along with class names, select Include defaults.

11. Select Insert, then edit the styles as necessary.

12. To save your edits and return to the page designer, select Save. Or to save your edits and keep the Stylesheet text editor open, select Apply.

    Warning: When you save or apply changes in the Stylesheet text editor, the changes go into effect immediately. Website users who access forms can view your changes. We recommend that you check your web forms when you save or apply changes to confirm that the changes have the desired effect.

    Tip: To erase all changes to the style sheet and restore the design settings in the Basic color and styles section, select Reset.

13. Select Next.

14. Under Configure content, you can edit the header, footer and columns for the web pages where your forms appear.

15. Select a header, footer, or side column to open its HTML editor.

    Note: You cannot edit content in the center of the page with the page designer because this section displays your web forms and payment forms. To edit this content, you edit the payment settings and web forms. For more information, see Web Payment Settings, Donation Forms , Program Forms, or Membership Forms.

16. In the HTML editor, edit the content for your web pages. You can format the appearance and layout to make the pages that you create in Web look similar to the rest of your website. For example, you can include the same images and text in the header that you include in the header of your organization’s website.

    Warning: If you use the Edit HTML source button to edit the HTML source code for your web forms, do not include a reference to load jQuery. Web forms already include a recent version of jQuery, so any additional reference is unnecessary and could conflict with the basic features of web forms.

17. Review the format and appearance of your web pages, then select Submit.