Developers: Quick Snippets

Published in Convert Forms
Updated 20 Oct, 2021

In this page you can find quick code snippets to change or extend functionality of Convert Forms.

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 and without the need of a submit button.

// 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 as well as change the number 1 to match your form's ID.

How to reset the submissions counter

To reset the submissions counter you will need to run the following SQL query which will reset both convertforms_conversions and convertforms_submission_meta database tables.

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: Remember to 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.

  1. Add an extra Submit button to the form
  2. Set its CSS Class option to reset
  3. Place the following JS code to 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

You may want your template to handle all the styling of all forms in your site, including Convert Forms. To do that first, you will need to disable Load Stylesheet under Global Configuration > Convert Forms > General.

Then you will need to remove the inline styling that is being added in each form field. You can add the following PHP snippet in 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. Now your template can handle all the styling of the forms.

How to change the color of the fields placeholder

To set the placeholder text color you can use the following CSS snippet on your Form > Design > Advanced > Custom CSS section.

 /* 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 as well as set the color of the placeholder.