On this page, you can find quick code snippets to change or extend the functionality of Convert Forms.
- How to submit the form without a submit button and when a field value changes
- How to change the background color of the success message
- How to reset the submissions counter
- How to add a Reset button to the form
- How to remove all Convert Forms CSS styling
- How to change the color of the fields placeholder
- How to group fields into separate sections (block divs)
How to submit the form without a submit button and when a field value changes
This example shows how you can submit your form when the value of a field changes without the need for a submit button.
Add the following code in your form -> Design -> Advanced -> Custom Code.
// Set the ID of your form and the name of the field
var formID = 1;
var fieldName = 'myFieldName';
// Do not edit below
ConvertForms.Helper.onReady(function() {
var form = document.querySelector('#cf_' + formID).ConvertForms;
var field = form.selector.querySelector('.cf-input[name="cf[' + fieldName + ']"]')
field.addEventListener('input', function() {
form.submit();
});
});How to change the background color of the success message
To change the success message background color, you can add the following CSS snippet in your form > Design > Advanced > Custom CSS:
#cf_1.cf-success .cf-response {
background: #333;
}Set the background color to anything you desire and change the number 1 to match your form's ID.
How to reset the submissions counter
To reset the submissions counter, you must run the following SQL query:
TRUNCATE j_convertforms_conversions;
ALTER TABLE j_convertforms_conversions AUTO_INCREMENT = 1;
TRUNCATE j_convertforms_submission_meta;
ALTER TABLE j_convertforms_submission_meta AUTO_INCREMENT = 1;
Note: Replace j_ with your database prefix before running the queries.
How to add a Reset button to the form
Although Convert Forms doesn't have a Reset button, you can use an extra Submit button that can be transformed into a Reset button using Javascript. Here's what you need to do.
- Add an extra Submit button to the form
- Set its CSS Class option to reset
- Place the following JS code in the Custom Code option of your form
document.addEventListener('DOMContentLoaded', function() {
var btn = document.querySelector('.cf-control-group.reset button');
btn.setAttribute('type', 'reset');
});How to remove all Convert Forms CSS styling
If you want to handle styling all forms on your site, follow the steps below.
First, disable the Load Stylesheet option under Global Configuration > Convert Forms > General.
Secondly, you must remove the inline styling added to some form fields. To do so, add the following PHP snippet to your form > Behavior > PHP Scripts > Form Display.
$formLayout = preg_replace('/style=\\"[^\\"]*\\"/', '', $formLayout);Once you save the form, all fields will no longer have inline styling. Your template can now handle all the form styling.
How to change the color of the field's placeholder
Use the following CSS snippet on your Form -> Design -> Advanced -> Custom CSS section to set the placeholder text color.
/* WebKit, Blink, Edge */
#cf1 input::-webkit-input-placeholder {
color: red;
}
/* Mozilla Firefox 4 to 18 */
#cf1 input:-moz-placeholder {
color: red;
opacity: 1;
}
/* Mozilla Firefox 19+ */
#cf1 input::-moz-placeholder {
color: red;
opacity: 1;
}
/* Internet Explorer 10-11 */
#cf1 input:-ms-input-placeholder {
color: red;
}
/* Microsoft Edge */
#cf1 input::-ms-input-placeholder {
color: red;
}
/* Most modern browsers support this now. */
#cf1 input::placeholder {
color: red;
}
/* Most modern browsers support this now. */
#cf1 textarea::placeholder {
color: red;
}Remember to replace cf1 with your Form ID, i.e., #cf55, and set the placeholder's color.
How to group fields into separate sections (block divs)
By default, Convert Forms renders all fields in the same parent div, making displaying them in separate sections hard. The script below attempts to fix this by wrapping certain groups of fields into a separate div.
// Set the ID of your form
const formID = 1;
// Here, you define how to group the form fields. For instance, the value below will create 3 section blocks.
// The 1st block will contain fields 1 to 4, the 2nd group will contain fields 5 to 8 and the remaining fields 9 to 12 in the 3rd block.
const splitGroups = [4, 8, 12];
// DO NOT EDIT BELOW
const elForm = document.querySelector('#cf_' + formID);
const elAllFields = elForm.querySelectorAll('.cf-fields > .cf-control-group:not([data-type="submit"])');
const elFormButton = elForm.querySelector('.cf-fields > .cf-control-group[data-type="submit"]');
const allFieldsArr = Array.from(elAllFields);
splitGroups.forEach((pos, index) => {
const wrapper = document.createElement('div');
wrapper.classList.add('cf-fields', 'cf-wrapper');
let startPos = index == 0 ? 0 : splitGroups[index-1];
let grouFields = allFieldsArr.slice(startPos, pos);
grouFields.map(element => wrapper.appendChild(element));
elForm.querySelector('.cf-fields').insertBefore(wrapper, elFormButton);
})The code can be placed into the Custom Code option of your form. Before pasting the code, you should wrap it with the <script> tag.
Next, place the following CSS code into the Custom CSS option of your form.
.cf-wrapper {
background-color: #f7f7f7;
padding: 15px;
margin: 10px !important;
border: solid 1px #e8e8e8;
}