How can I format my SendFox HTML form?

Style your SendFox form’s colors, button, and corners visually in the form builder’s Design tab. Prefer to hand-code? The legacy HTML embed still accepts inline CSS.

Two ways to style a form

Most SendFox forms are styled in the builder now — no code required. The one-line embed you paste into your site renders server-side from your form’s saved settings, so its look comes straight from the Design tab. Editing inline style attributes will not change that embed.

Design tab (recommended) — pick a color template, set your own colors, and adjust the corner radius. Applies to the default one-line embed and your hosted form page.
Inline CSS (legacy embed only) — the older pasted-HTML embed (the one that loads form.js) is plain HTML you can style with standard inline style attributes.

Style your form in the Design tab

Open Growth → Forms, open the form you want to style, and select the Design tab. Everything here updates the form’s live look automatically.

SendFox form builder Design tab with color templates and Button, Background, and Text color swatches

Templates — choose a ready-made color template (Classic, Ink, Coral pop, Blush, Mint, Indigo, Slate, Sunshine, Paper, or Teal) as a starting point.
Colors — set the Button, Button text, Background, and Text colors. Click a swatch, or use the custom color picker (the + tile) to enter your own brand hex.
Corner radius — drag the slider (0–24 px) to make the button and fields sharp or rounded.

Because these settings are stored with the form, your changes appear everywhere the default embed is used — and on your hosted form page — without re-copying any code.

Style the legacy HTML embed with inline CSS

If you use the legacy HTML embed (found under the collapsible “Prefer the legacy HTML embed?” section on the embed screen — it still works but won’t pick up Design tab or display-mode changes), it’s plain HTML you can style with inline style attributes. Grab that code first (see How to create an embeddable HTML form?) and use hex codes to match your brand colors. The examples below apply only to this legacy embed.

Change the button’s color

Add a style attribute to the button tag, e.g. <button style="background-color:red; color:white" type="submit">Submit</button>:

Sign-up form with a red Submit button

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj" data-async="true" data-recaptcha="false">
<p><input type="text" placeholder="First Name" name="first_name" required /></p>
<p><input type="text" placeholder="Last Name" name="last_name" required /></p>
<p><input type="email" placeholder="Email" name="email" required /></p>
<!-- no botz please -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
<p><button style="background-color:red; color:white" type="submit">Submit</button></p>
</form>
<script src="https://sendfox.com/js/form.js"></script>

Change the input fields’ colors

Add a style attribute to each input tag, e.g. <input style="color: #FFFFFF; background-color: #72A4D2;" ... />:

Sign-up form with blue input fields and white text

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p><input style="color: #FFFFFF; background-color: #72A4D2;" type="text" placeholder="First Name" name="first_name" required /></p>
<p><input style="color: #FFFFFF; background-color: #72A4D2;" type="text" placeholder="Last Name" name="last_name" required /></p>
<p><input style="color: #FFFFFF; background-color: #72A4D2;" type="email" placeholder="Email" name="email" required /></p>
<!-- no botz please -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
<p><button type="submit">Submit</button></p>
</form>
<script src="https://sendfox.com/js/form.js"></script>

Add a style attribute to the label tag, e.g. <label style="color: red">:

Sign-up form with the GDPR consent text in red

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p><input type="text" placeholder="First Name" name="first_name" required /></p>
<p><input type="text" placeholder="Last Name" name="last_name" required /></p>
<p><input type="email" placeholder="Email" name="email" required /></p>
<p><label style="color: red"><input type="checkbox" name="gdpr" value="1" required /> I agree to receive email updates and promotions.</label></p>
<!-- no botz please -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
<p><button type="submit">Submit</button></p>
</form>
<script src="https://sendfox.com/js/form.js"></script>

Center the form

Add style="text-align: center;" to each <p> tag:

Sign-up form centered on the page

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p style="text-align: center;"><input type="text" placeholder="First Name" name="first_name" required /></p>
<p style="text-align: center;"><input type="text" placeholder="Last Name" name="last_name" required /></p>
<p style="text-align: center;"><input type="email" placeholder="Email" name="email" required /></p>
<p style="text-align: center;"><label><input type="checkbox" name="gdpr" value="1" required /> I agree to receive email updates and promotions.</label></p>
<!-- no botz please -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
<p style="text-align: center;"><button type="submit">Submit</button></p>
</form>
<script src="https://sendfox.com/js/form.js"></script>

Display the form inline

Add style="display: inline-block;" to each <p> tag:

Sign-up form fields displayed inline on one row

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" id="3l6oj6" data-async="true" data-recaptcha="false">
<p style="display: inline-block;"><input type="text" placeholder="First Name" name="first_name" required /></p>
<p style="display: inline-block;"><input type="text" placeholder="Last Name" name="last_name" required /></p>
<p style="display: inline-block;"><input type="email" placeholder="Email" name="email" required /></p>
<!-- no botz please -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
<p style="display: inline-block;"><button type="submit">Submit</button></p>
</form>
<script src="https://sendfox.com/js/form.js"></script>

Hide the reCAPTCHA badge

If reCAPTCHA is enabled on your form, add this style block before the form to hide the badge:

<style type="text/css">
.grecaptcha-badge {
visibility: hidden;
}
</style>

Troubleshooting

My inline CSS isn’t changing the form

Inline style attributes only affect the legacy HTML embed. The default one-line embed is rendered server-side — change its look in the Design tab instead.
Make sure the style attribute is inside the correct tag and your quotes are straight (not curly).
Keep the SendFox <script src="https://sendfox.com/js/form.js"> line — the legacy form needs it to submit.

My edits disappeared

If you re-copy the legacy embed code from SendFox, it replaces your styled version. Re-apply your style edits, or keep your customized copy separate.

Need a hand? Reach us through the Help Center.

Frequently asked questions

Why doesn’t inline CSS change my one-line embed?

The default embed loads your form live from SendFox and renders it from your saved Design tab settings, so it ignores inline styles in pasted HTML. Adjust its colors and corner radius in the Design tab — the change appears everywhere the embed is used.

Can I style the legacy embed with my own CSS file instead?

Yes — the legacy form has the class sendfox-form, so you can target it from your site’s stylesheet rather than using inline styles.

Can I add more fields to the form?

Yes. See Can I add custom fields to my form?