Articles in this section

See more

Using Google Fonts with Lead Gen & CRM Forms

Avatar
Leya Wood
  • Updated
Follow

Lead Gen & CRM forms can be edited or otherwise styled using the form stylesheet.  Editing this stylesheet is another way to customize your form's code and design.  You can configure this stylesheet to use specified fonts.

This article will detail how to modify CSS stylesheets to set specific Google fonts in Lead Gen & CRM forms.

Article Contents

Available With:
Trial ✓  
Essential ✓  
Advanced ✓  
Ultimate ✓  
Toolbar:
FormsForms
Users:
Administrators ✓  
Company Managers ✓  
Marketing Managers ✓  
Sales Managers    
Salespersons    
Jr. Salespersons    


Preparing Form CSS Stylesheets

In order to insert custom code for fonts, you will need to use a Lead Gen & CRM form with a stylesheet.

To prepare a Lead Gen & CRM form and stylesheet, create or edit a form.

  1. Click the Styles tab.
  2. Create or edit a stylesheet.

    Advanced CSS

    Click to enlarge.


Setting Form Stylesheet Code

Once you have prepared a Lead Gen & CRM form and developed a stylesheet, you can insert code to specify which Google Font to use for text on your form.

To set Lead Gen & CRM form stylesheet code, do the following:

  1. Open another new tab in your web browser.
  2. Navigate to https://fonts.google.com/ in that browser tab.
  3. Click+ Select this style next to the desired font family.
  4. Click the icon in the upper-right corner to view your selected family. 

  5. Click @Import.

  6. Copy the entirety of the Embed Code snippet, except the <style> tags.
  7. Return to the Lead Gen & CRM form browser tab.
  8. Paste the copied snippet at the top of the form's stylesheet code.
  9. Add the CSS selector targeting the form elements that will be styled to the bottom of the form's stylesheet code.
  10. Return to the Google Fonts browser tab.
  11. Copy the snippet in the Specify in CSS block.
  12. Return to the Lead Gen & CRM form browser tab.
  13. Paste the copied snippet between the { } curly brackets.
  14. Click Save Stylesheet.
  15. Click Save Changes.
    
 
Note: Constant Contact offers Professional Services to assist with custom coding.

 
Note: The following example code targets labels for form inputs: 
label {

}

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?