How do I style my SendFox signup form?

Style a SendFox signup form in Growth → Forms: open the form’s Design tab to pick a template, colors and corner radius. The legacy HTML embed also takes inline CSS.

What are the 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 loads your form’s saved design from SendFox each time the page loads, 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.

Plans: form styling works the same on every plan (Free, Lifetime and Pro); the Free plan includes one form. Putting the form on WordPress? See how can I integrate SendFox and WordPress?

How do I style a 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.

1. Templates — choose a ready-made color template (Classic, Ink, Coral pop, Blush, Mint, Indigo, Slate, Sunshine, Paper, or Teal) as a starting point.
2. 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.
3. 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.

How do I style the legacy HTML embed?

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 do I create and embed a SendFox signup form?) and use hex codes to match your brand colors. The examples below apply only to this legacy embed. Like your copied code, they have a label before each field (for example First Name:), which you can style the same way.

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>:

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj" data-async="true" data-recaptcha="false">
<p><label for="sendfox_form_name">First Name: </label><input type="text" id="sendfox_form_name" placeholder="First Name" name="first_name" required /></p>
<p><label for="sendfox_form_last_name">Last Name: </label><input type="text" id="sendfox_form_last_name" placeholder="Last Name" name="last_name" required /></p>
<p><label for="sendfox_form_email">Email: </label><input type="email" id="sendfox_form_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" charset="utf-8"></script>

Change the input fields’ colors

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

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p><label for="sendfox_form_name">First Name: </label><input style="color: #FFFFFF; background-color: #72A4D2;" type="text" id="sendfox_form_name" placeholder="First Name" name="first_name" required /></p>
<p><label for="sendfox_form_last_name">Last Name: </label><input style="color: #FFFFFF; background-color: #72A4D2;" type="text" id="sendfox_form_last_name" placeholder="Last Name" name="last_name" required /></p>
<p><label for="sendfox_form_email">Email: </label><input style="color: #FFFFFF; background-color: #72A4D2;" type="email" id="sendfox_form_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" charset="utf-8"></script>

Change the GDPR text color

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

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p><label for="sendfox_form_name">First Name: </label><input type="text" id="sendfox_form_name" placeholder="First Name" name="first_name" required /></p>
<p><label for="sendfox_form_last_name">Last Name: </label><input type="text" id="sendfox_form_last_name" placeholder="Last Name" name="last_name" required /></p>
<p><label for="sendfox_form_email">Email: </label><input type="email" id="sendfox_form_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" charset="utf-8"></script>

Center the form

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

<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;"><label for="sendfox_form_name">First Name: </label><input type="text" id="sendfox_form_name" placeholder="First Name" name="first_name" required /></p>
<p style="text-align: center;"><label for="sendfox_form_last_name">Last Name: </label><input type="text" id="sendfox_form_last_name" placeholder="Last Name" name="last_name" required /></p>
<p style="text-align: center;"><label for="sendfox_form_email">Email: </label><input type="email" id="sendfox_form_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" charset="utf-8"></script>

Display the form inline

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

<form method="post" action="https://sendfox.com/form/xxxxx/xxxxx" class="sendfox-form" id="3l6oj6" data-async="true" data-recaptcha="false">
<p style="display: inline-block;"><label for="sendfox_form_name">First Name: </label><input type="text" id="sendfox_form_name" placeholder="First Name" name="first_name" required /></p>
<p style="display: inline-block;"><label for="sendfox_form_last_name">Last Name: </label><input type="text" id="sendfox_form_last_name" placeholder="Last Name" name="last_name" required /></p>
<p style="display: inline-block;"><label for="sendfox_form_email">Email: </label><input type="email" id="sendfox_form_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" charset="utf-8"></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 loads your saved design from SendFox — 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.

Still stuck? Search the Help Center or email support@sendfox.com with the form’s name, the page URL where it’s embedded, and which embed you use (one-line or legacy HTML).

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 — add them on the Form tab. See How do I add custom fields to my SendFox forms?

Does the Design tab change my hosted form page too?

Yes. Your hosted form page renders the form exactly as designed, so the same template, colors and corner radius apply there and in the one-line embed.