Styling Public Forms

The styling for Public Forms are controlled by the Header and Footer HTML. 

Access Public Forms Header/Footer

Enabled Public Forms can be found at Settings > Public Forms Links > Advanced Options > Public Forms Header / Footer. It is possible to override the styling per form if you want a unique style for individual forms.

SAM has a simple interface to input HTML for Public Forms to display online. Users should be comfortable and confident with handling HTML before modifying the existing HTML. InReach Solutions may be able to assist with simple styling changes. 

Default Public Forms Header/Footer HTML

1. Click Settings > Public Form Links. 
2. Click Advanced Options > Default Public Forms Header/Footer HTML. Modify Default Header and Footer HTML screen, there are two separate boxes designated for the Header HTML and Footer HTML.
3. Copy and paste HTML or make changes to the existing HTML presented. 
4. Save when finished.
   
   

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.

Changes to Default Header/Footer

These changes will replace the Inreach Solutions logo and links on the Public Form output. 

1. Logo

1. Upload your appropriately sized logo in the Template Designer.
2. Double click on the logo image to get SAM's URL.
3. Replace the existing logo file name in the Header HTML. 

2. Home/Contact Us Links

These are located 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

Web/Graphic Designers will often want the Public Forms to exactly match the look of your website but this can be difficult and time consuming. We recommend keeping Public Forms styling as simple as possible while matching the theme of your website. 

Notes:

• All styles must be inline (meaning no links to stylesheets)
• The CSS classes in the header box controls the look of the Public Forms. 
• 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. 
• 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. 

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 > Advanced Form Properties. 

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.