The styling for Public Forms are controlled by the Header and Footer HTML entered in the Default settings. Should you want a unique style for some forms, it is possible to override per Public Form.
SAM has a simple interface to input HTML needed for Public Forms to display online, but users should be comfortable and confident with handling HTML before modifying the existing HTML.
Web/Graphic Designers will often want the Public Forms to exactly match the look of your website but this can be very difficult and time consuming, so we recommend that you keep your Public Forms styling as simple as possible while matching the theme of your website. For example, you could just change the background color/image, and the font style/color, in addition to the basic changes discussed below, to make the Public forms loosely match your website. Please note that all the styles must be inline (meaning no links to stylesheets) and all images used must be uploaded into SAM (and use their SAM location), which is what makes matching your website or mockup-forms very difficult.
Default Public Forms Header/Footer HTML
1. Click Settings > Public Form Links.
2. Click Advanced Options > Default Public Forms Header/Footer HTML.
3. On the "Modify Default Header and Footer HTML" screen, there are two separate boxes designated for the Header HTML and Footer HTML.
Copy and paste or make changes to the existing HTML that is present within each box.
4. Click Save when finished.
Override the Default Header/Footer
The Default Header/Footer will apply to all Public Forms in SAM, unless the Header/Footer HTML is specified on a specific Public Form. Each Public Form has an override to the Default Public Form Header/Footer, which is accessible under "Advanced Options > Header and Footer HTML" on the Form Customizer view of the form. The instructions below can be replicated on the individual Public Forms Header/Footer HTML.
Styling Public Forms
When you receive your SAM site, it will have a generic style to the Public Forms.
A web designer can override the style to make Public Forms mirror your website, but we recommend making few styling changes to keep the form layout as clean as possible.
Three changes to Default Header/Footer
These changes will replace the Inreach Solutions logo and links on the Public Form output.
(Upload your appropriately sized logo in the Template Designer, double click on it to get the link and replace the existing logo file name in the Header HTML) Review working with Images in Templates for help.
2. Home/Contact Us Links
(They are just above the Logo code in the Header HTML. The "Home" link should be a link like "http://yourwebsite.com".
3. Address in Footer
Advanced Styling Notes
- The CSS classes in the header box controls the look of the Public Forms. Please see the CSS for styling public forms guide for how to change the styles.
- Web browsers will display a warning to users if a secure webpage (SAM's Public Form) contains images which are not accessed over SSL. To avoid this, any images that you want to use from your website, such as background, header/footer will need to be uploaded in the template designer, so the link to the image will use SSL protocol. See Working with Images in Templates for help.
- Changing the background and the font family/color in the header CSS classes to match your website will give you a close feel to your form without making drastic html changes.
- Keep navigation away from your Public Form to a minimum, so users will not leave your form and keep maintaining your website navigation in SAM's Public Forms to a minimum.
Add a Sidebar to Public Forms
When a Public Form is setup as a View form, you may also choose to have a sidebar to store additional links.
This setting can be found under Advanced Options > Really Advanced Options > Advanced Form Properties > Sidebar Enabled (Client Forms) = Yes
InReach Solutions may be able to assist with simple styling changes.