How can I format my SendFox HTML form?
You can change the look of your SendFox HTML form by modifying the HTML code.
Here are some easy copy+paste HTML code examples for some of the most common design elements. Use hex codes to change the colors to match your branding.
Change the button's color
To change the color of your form's button, insert the style attribute within the button tag (button style="background-color:red; color:white" type="submit">Submit</button>). See the example below:
<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 font color and background color of the input fields
To change the font color and background color of the input fields, insert the style attribute within the input tag (<input style="color: #FFFFFF; background-color: #72A4D2;" type="text" placeholder="First Name" name="first_name" required />). See the example below:
<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 color of the GDPR text
To change the font color of the GDPR text, add the style attribute to the label tag (<label style="color: red"><input type="checkbox" name="gdpr" value="1" required />). See the example below:
<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>
Change alignment of the form to center
To change the alignment of your form to center, insert the style attribute into the p tag (<p style="text-align: center;">). See the example below:
<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>
Change your form to inline
To change your form to inline, insert the style attribute into the p tag (<p style="display: inline-block;">). See the example below:
<form method="post" action="https://sendfox.com/form/" 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 Google Recaptcha badge
To hide the Google Recaptcha badge on your SendFox HTML form, insert the code in bold below before the form:
<style type="text/css">
.grecaptcha-badge {
visibility: hidden;
}
</style>
<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>