Build an email signature generator for your team
Getting everyone at work to use the same branding can be difficult. People are busy and don’t have time to learn design and formatting tricks. That’s why we make letterhead and PowerPoint templates to make it a little bit easier to keep everyone looking good. Email signature blocks can also be made easy.
A simple interactive form can be used to generate a ready-to-use signature block already formatted with your brand. An employee fills in their details, clicks copy, then pastes the result in their email program. Done!
Creating that form takes a little bit of light coding. If you’re not confident in your coding skills, this can be a good test case using AI tools. The programming is fairly routine and the product is low stakes. Plus, you don’t need to be a programmer to know if the end product works or not!
Here’s how I made a simple one-page email signature block generator using ChatGPT
First, I thought through what I want included in the signature block. Grays Harbor Transit uses email signatures that are formatted like our business cards. I listed each element that would need to be an input field on the form. Then think which fields should be required or not. Do any need special or consistent formatting like phone numbers?
Next, I designed my signature block in simple HTML and CSS. Email requires very simple HTML formatting to display properly across different platforms. You can have AI help with this too. You’ll need IT to upload any images in a stable location, so this could be a good place to involve your webmaster instead of AI.
With that prep work, here’s how I prompted ChatGPT to do the heavy lifting. Most other platforms should be able to do this too but be aware of any potential costs on whatever you’re using.
Create a simple web form that takes user input in the fields below and then presents the input in an iframe to the right of the form. Make the preview display live results as a user types.
Add a button below the form labeled “Copy Preview (rich text)” that copies the result to the user’s clipboard for easily pasting into Outlook.
The result takes the form of an email signature block. Auto-size the iframe to content height. Include instructions below the results iframe on how a user may update their email signature block in Outlook on the web and Outlook for desktop.
User input fields are:
– Name
– Title
– Email address
– Office phone
– Cell phone
– Fax
– Booking page URL
Make these inputs optional and conditionally displayed on the results page:
– Office phone
– Cell phone
– Fax
– Booking page URL
Add validation/formatting for phone number fields.
Finally, use this template for the output: [paste your html here]
The result is the form you see here:
Email Signature Generator
Live Preview
How to update your signature in Outlook (web)
- Click the gear icon (⚙️) in the top right
- Select Account, then Signatures
- Click + Add signature
- Give your signature a name
- Paste your copied signature into the signature box
- Check options to automatically include it (best practice is to include it as default for new messages)
- Click Save
How to update your signature in Outlook (desktop)
- Open Outlook
- Go to File → Settings → Accounts
- Click Signatures
- Click + Add signature
- Give your signature a name
- Paste your copied signature into the signature box
- Check options to automatically include it (best practice is to include it as default for new messages)
- Click Save
If you want to make your own email signature generator like this, feel free to use mine as a starting point. You can copy the code from mine or just save the HTML file here (right click and Save As). Then paste that into your AI platform of choice and ask it to make any modifications as appropriate.
Ask it to change the font or add a line for your physical address. Replace the graphic by giving it the URL of your agency’s logo. Add social media links.
AI doesn’t always give the same result even when using the exact same prompt. So, you may need to tweak any result you get using a similar prompt to the one used here. It will typically offer suggestions following any result that you can choose to accept or decline.
Once you’re comfortable with your email signature generator, test that the formatting works for email. If you use Outlook for work, send a test to your personal Gmail account. See what it looks like on your phone. Some text might wrap on small screens. If it does so awkwardly, you might be able to shrink your logo or reposition elements to look better on all screens.
Next up: Converting this into a business card sign up tool! Use the simple form with live previews to get your team to request new business cards and have the form put all their requested info into a spreadsheet on SharePoint!