In this article
Before you start
When you generate an HTML form with our tool, you get a complete HTML code to insert on your site that can be edited or used as is. The code we provide you for the HTML form does not include any css style or javascript code.
You can safely change texts, add classes or modify </div> and other html structures as needed.
Be careful though:
- The code of your HTML form is not saved in our system.
- Do not modify the id and name attributes of the fields, which are essential for the form to function properly.
- Be sure to keep the part that contains the invisible configuration fields. It should look like this:
<div style="display:block; visibility:hidden; height:1px;">
<input type="hidden" id="ci_groups" name="ci_groups" value="1" />
<input type="hidden" id="ci_account" name="ci_account" value="XXXXXXX" />
<input type="hidden" id="ci_language" name="ci_language" value="en_ca" />
<input type="hidden" id="ci_sent_url" name="ci_sent_url" value="" />
<input type="hidden" id="ci_error_url" name="ci_error_url" value="" />
<input type="hidden" id="ci_confirm_url" name="ci_confirm_url" value="" />
</div>
And finally, don't forget to test your form!
Customize CSS
Depending on where you use it, your HTML form may style itselfwith no further effort: your site's CSS may already be configured for form elements. If not, you can adjust them. A good practice is to apply a class on your form and use it to limit the application of styles, for example:
<form class="my-form" action="https://app.cyberimpact.com/optin" method="post" accept-charset="utf-8">
...
<label for="ci_firstname">First Name</label>
<input type="text" id="ci_firstname" name="ci_firstname" maxlength="255"/>
</form>
To add CSS, you can work in your site's stylesheet, if you're already comfortable there, or add a style tag above the code for your form. For example, the excerpt below changes the color of the field label.
<style type="text/css">
.my-form label {
color: red;
}
</style>
If you need help customizing the appearance of your form with CSS, we invite you to consult the documentation on the Mozilla website:
Add Javascript
If you want to add javascript to your HTML form, you can do it in an external js file or in a script tag on the same page. In the example below, we add the jQuery library to capture the submission of the form.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-form').on('submit', function(e){
// code here
});
});
</script>
Javascript is a flexible language, but it can quickly become complex. Again, Mozilla offers excellent documentation on the subject.