Formatting of form field in email body

Hi Jotform,

How can I remove the blue background and make it regular font format from the form field in my email body. The form field is the "Care Plan Review" text, I have tried highlighting the text and selecting the font and colour but it still does not change. I want it to be the same font/format as the rest of the email text.

Hi HealthcareCompliance,

Thank you for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Carl,

To remove the blue background and button-like style from the {purposeOf} field in the email, you'll need to update the source code by wrapping that field in a plain <span> tag with custom styling. This prevents Jotform from applying default styles.

Replace both {purposeOf} entries in your approval email with the code below:

<span style="all: unset; font-family: Verdana, sans-serif; font-size: 10pt;">{purposeOf}</span>

This will display the field value in regular text, matching the rest of your email content. Once you save and test the email, the blue background should be gone. Let me show you how:

First, copy the code below:

<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#ecedf2">

<tbody>

<tr>

<td style="width: 32px; min-width: 32px;" width="32">&nbsp;</td>

<td>

<table class="jmTable-wrapper" style="width: 100%;" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="min-height: 36px;" height="36">&nbsp;</td>

</tr>

<tr>

<td align="center">

<table id="jmLogo-container" class="jmTable" style="min-width: 480px; max-width: 720px; width: 100%; background-color: transparent; text-align: center;" width="100%" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="width: 100%; max-width: 100%; min-width: 100%;"><img src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo.png" alt="Jotform Logo" height="40" /></td>

</tr>

</tbody>

</table>

<br />

<table class="jmTable-wrapper" style="width: 100%;" cellspacing="0" cellpadding="0">

<tbody>

<tr style="display: none;">

<td style="min-height: 64px;" height="64">&nbsp;</td>

</tr>

<tr>

<td align="center">

<table style="max-width: 720px;" width="100%" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="line-height: 0; font-size: 0; border-radius: 4px 4px 0 0;" bgcolor="#FF6100" height="8">&nbsp;</td>

</tr>

</tbody>

</table>

<table class="jmTable" style="min-width: 480px; max-width: 720px; width: 100%; background-color: #fff;" width="100%" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="width: 100%; max-width: 100%; min-width: 100%;">

<table width="100%" cellspacing="0" cellpadding="0">

<tbody>

<tr style="min-height: 24px;">

<td colspan="3">&nbsp;</td>

</tr>

<tr>

<td style="min-width: 40px;" width="40">&nbsp;</td>

<td style="text-align: center;"><span style="all: unset; font-family: Verdana, sans-serif; font-size: 10pt;">{purposeOf}</span></td>

<td style="min-width: 40px;" width="40">&nbsp;</td>

</tr>

<tr style="min-height: 16px;">

<td style="min-width: 40px;" width="40">&nbsp;</td>

<td style="border-bottom: 1px solid #ECEDF2;">

<p><span style="font-size: 10pt; font-family: verdana;">Please carefully review the&nbsp; <span style="all: unset; font-family: Verdana, sans-serif; font-size: 10pt;">{purposeOf}</span> for&nbsp;{fullName} and select one of the options below.&nbsp;</span></p>

<p><span style="font-family: verdana; font-size: 10pt;">If approved, an email will be sent to the client with a copy of their care plan for their review and approval.</span></p>

<p><span style="font-family: verdana; font-size: 10pt;">If changes need to be made, please select Deny any note in the comments box what changes are needed.&nbsp;</span></p>

<p><a class="mceNonEditable" style="min-width: 64px; background-color: #01bd6f; color: #fff; border-radius: 4px; font-size: 14px; text-align: center; padding: 10px 42px; display: inline-block; text-decoration: none; margin-top: 8px;" href="{approvalDeeplink}%3FoutcomeID=1" target="_blank" rel="noopener noreferrer">&nbsp;Approve&nbsp;</a><span style="font-family: verdana, geneva, sans-serif; font-size: 10pt;">&nbsp;</span><a class="mceNonEditable" style="min-width: 64px; background-color: #d53049; color: #ffffff; border-radius: 4px; font-size: 14px; text-align: center; padding: 10px 42px; display: inline-block; text-decoration: none; margin-top: 8px;" href="{approvalDeeplink}%3FoutcomeID=2" target="_blank" rel="noopener noreferrer">&nbsp;Deny&nbsp;</a><span style="font-family: verdana, geneva, sans-serif; font-size: 10pt;">&nbsp;</span><a class="mceNonEditable" style="min-width: 64px; background-color: #fff; color: #5e74e6; border-radius: 4px; font-size: 14px; text-align: center; padding: 10px 42px; display: inline-block; text-decoration: none; margin-top: 8px; border: 1px solid #E7E9F0;" href="{approvalLink}?moreActions" target="_blank" rel="noopener noreferrer">&nbsp;Go to Inbox&nbsp;</a></p>

</td>

<td style="min-width: 40px;" width="40">&nbsp;</td>

</tr>

<tr>

<td style="text-align: center;" colspan="3">

<p>&nbsp;</p>

<p><a href="https://jotform.pro-bark.biz/edit/%7Bid%7D?admin" target="_blank" rel="noopener noreferrer">{edit_link}</a><br /><br /></p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

1. In Form Builder, select the down arrow icon at the top beside the Form Builder Label,
2. Select Workflow Builder.
3. Second, in Workflow Builder, select the Approval Email, and click on the Gear Icon.
4. Next, under Notification Email, click on the Edit Email button.
5. In the Email Content, click on the Source Code icon, and press CTRL/CMD + A to highlight all text, and CTRL/CMD + V to paste the code.
6. Finally, click on the Save button.

Give it a try and let us know how it goes.