Topic Tag: Toolset Forms

Problem:
Form radio inputs have the labels wrapping the inputs which makes it difficult to style them with CSS.

Solution:
This occurs when your settings say that the site is not using Bootstrap. Edit the cred_field shortcode that inserts the radio field and add the attribute output="legacy" to force the markup so that the inputs are outside the labels.

Problem:

The issue here is that the user had a phone number field on their form. However this field stopped working.

Solution:

Upon investigating the issue I found that the user was using some custom code to format the field into a telephone number, however the code had some issues and caused the field to stop working.

The correct code can be seen below.

document.getElementsByName('wpcf-telephone')[0].addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

To get this to work for your site just replace 'wpcf-telephone' with "wpcf-myfield" where myfield is the slug of your custom field.