How can I format my SendFox HTML form?

You can change the look of your SendFox HTML form by editing the embed code. Below are copy-and-paste examples for the most common styling tweaks — colors, alignment, and more.

Before you start

Grab your form’s embed code first (see How to create an embeddable HTML form?). The code is plain HTML, so you style it with standard inline style attributes. Use hex codes to match your brand colors.

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><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;" ... />:

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

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

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

<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 styling didn’t take effect

• 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 form needs it to submit.

My edits disappeared

• If you re-copy the 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

Can I style the form with my own CSS file instead?

Yes — the 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?