[katw]

What I suggested was correct.

You just needed the !important to force it to change.

The prefix I used on my answer .quform was to limit the change to pages with Quform forms.

Whereas, they have given you code that will apply across the site on all forms.

Anyhow, glad its working

[katw]

Is it the same form as the one you had issues with arrows?

I can have a look at page if live?

I just re-looked at your image from the first post and see it isn’t what I thought. Apologies the ideas above wouldn’t work as the red color is being applied ‘AROUND’ the Tip icon.

It has nothing to do with Quform settings. It is the theme.

If you share a link to a form showing this error I can look at it and advise.

• This reply was modified 6 years, 8 months ago by katw. Reason: Share link suggestion

[katw]

I see in plugin settings an override for allowing risky file types “Allow uploading all file types”.

I want to expand the “allowed” to include EML but keep other risky types away; so I haven’t activated this option.

Will wait to hear from you.

[katw]

Hi Nathan,

Do you recall actually choosing red or playing with CSS styles for QTip?

To confirm you have STYLE ‘DARK (qtip-quform-dark)’ selected in your Tooltip style menu. Correct?

Is the issue with the tooltip icon or tooltip text bubble?

If ICON:

Add the following style to the QuForm > Settings > [Custom CSS & JS] tab.

insert:

.quform-tooltip-icon { color: black;}

You may need to flush cache if it doesn’t change via [Tweaks & Troubleshooting] tab… scroll bottom click [rebuild script cache].

You can add a ‘!important’ to the class if needed; but try without.

If TOOLTIP BUBBLE:

Assuming the style theme you chose was ‘qtip-quform-dark’; add the following style:

.qtip-quform-dark {
      background-color:#151515;/* default color for this theme */
      border-color:#151515;
}

• This reply was modified 6 years, 8 months ago by katw. Reason: Added question
• This reply was modified 6 years, 8 months ago by katw. Reason: added qtip icon color fix
• This reply was modified 6 years, 8 months ago by katw. Reason: added second fix

[katw]

Hi @nathanjrb

Thought I could help out.

Yes the issue is coming from your theme stylesheet: /themes/uncode/library/css/style.css.

It has a css style called .style-light select:not([multiple]) which is doing a repeat background on form single select fields.

You need to override by adding something like:

.quform select:not([multiple]) {
  background-image: no-repeat;
  background-position: 10% center;
}

This needs to go in your child stylesheet or customiser additional css. Don’t edit the theme directly.

The .quform class prefix means any quform form will no longer be affected by the repeat issue on single select popup fields.

You are likely to find others similar to this as you add other form field types.

[katw]

OK you win 😉

In my head I had the digits validator still operating, therefore it would error message “no text”.

So if I want a message I have to take off the digits filter. I get it now.

Thanks. Close ticket

[katw]

Thank you very much for that explanation. Close ticket

[katw]

Hi Nathan,

Edit Form > Click Form Settings [cog] > Style tab > Tooltips tab > scroll down to tooltip style.

see attached.

Hope that fixes it for you

Attachments:

You must be logged in to view attached files.

[katw]

You’re welcome.

It was a challenge, but I enjoyed it… actually it was a diversion from code I am doing battle with 🙁

See how you go with it.

You will see I upgraded the function to include a minimum word count option which you can choose to use or not.

[katw]

It is also worth mentioning the front-end word count indicator uses a different method of counting words to the back-end validator.

You many need to run a few tests to see if they are both in agreement with the word count max.

Otherwise users may get frustrated being told they have too many words when the counter says they are under.

I don’t know if this will happen but you should check. If they don’t agree, you may have to adjust to bring them into agreement (suggest tweaking the javascript one).

You can use a content generator like Lorem Ipsum to make test entry samples of set word counts.

All the best

[katw]

Hi @dasub I have mocked up a validator that appears to work ok.

This should give you a hand while waiting for an answer from the support team.

This code needs to be added to functions.php or turned into a plugin (which is what I do).

Enjoy and do a lot of testing as I have only done basics.

add_action('plugins_loaded', function () {
	class Quform_Validator_WordCount extends Quform_Validator_Abstract
	{
		// ADDED - Used with message handling function
		const INVALID = 'WordCountInvalid';
		const TOO_LONG = 'WordCountOver';
		const TOO_SHORT = 'WordCountUnder';

		// REQUIRED - Does the validation of the field contents
		// Returns True if valid and False if not
		public function isValid($value) {

			if ( ! is_string($value)) {// check contents is a string
				$this->error(self::INVALID);
				return false;
			}

			// Set word count parameters below:
			$min=3;//minimum
			$max=10;//maximum
			if (str_word_count($value) > $max) {
				$this->error(self::TOO_LONG);
				return false;
			}
			if (str_word_count($value) <= $min) {
				$this->error(self::TOO_SHORT);
				return false;
			}
			return true;
		}

		// ADDED For improved error messages and readability
		public static function getMessageTemplates($key = null) {
			$messageTemplates = array(
				self::INVALID => __('Invalid data type, string expected',  'quform'),
				self::TOO_LONG => __('Word count exceeded, please reduce length',  'quform'),
				self::TOO_SHORT => __('Too brief, please add more',  'quform')
			);

			if (is_string($key)) {
				return array_key_exists($key, $messageTemplates) ? $messageTemplates[$key] : null;
			}

			return $messageTemplates;
		}

		// REQUIRED - Sets validator baseline or defaults, 
		// Array() can be empty if not using the added messageTemplates function
		public static function getDefaultConfig() {
			$config = apply_filters('quform_default_config_validator_WordCount', array(
				'messages' => array(
					self::INVALID => '',
					self::TOO_LONG => '',
					self::TOO_SHORT => ''
				)
				// Above array -^- added for error messages
			));

			$config['type'] = 'WordCount';

			return $config;
		}
	}
});

// REQUIRED Adds this validator to form builder interface. Change ### to max number
add_filter('quform_admin_validators', function (array $validators) {
	$validators['WordCount'] = array(
		'name' => 'WordCount ###',
		'tooltip' => 'Retricts response to ### words',
		'config' =>  Quform_Validator_WordCount::getDefaultConfig()
	);
	return $validators;
});

// REQUIRED Sets field types available to this validator
add_filter('quform_visible_validators', function (array $visible) {
	$visible['text'][] = 'WordCount';
	$visible['textarea'][] = 'WordCount';
	return $visible;
});

[katw]

@dasub I made an error on class name, the word count script in its current form requires a form input field ID for the Line 9 entry.

Which would be .quform-field-1_28 in my example. ‘Field’ not ‘input’ label.

Word count front-end is working fine for me, my code:

<script type="text/javascript">

// When DOM ready, do:
jQuery(document).ready(function($) {
	// WordCount function
	var countre = /[\w\u2019\x27\-]+/g;
	var cleanre = /[0-9.(),;:!?%#$?\x27\x22_+=\\\/\-]*/g;

	function wordCount(tx) {
		var tc = 0;
		if (tx) {
			tx = tx.replace(/\.\.\./g, ' '); // convert ellipses to spaces
			tx = tx.replace(/<.[^<>]*?>/g, ' ').replace(/&nbsp;| /gi, ' '); // remove html tags and space chars
			// deal with html entities
			tx = tx.replace(/(\w+)(&.+?;)+(\w+)/, "$1$3").replace(/&.+?;/g, ' ');
			tx = tx.replace(cleanre, ''); // remove numbers and punctuation
			var wordArray = tx.match(countre);
			if (wordArray) {
				tc = wordArray.length;
			}
		}
		return tc;
	}

	var $counterText = $('<div class="word-counter" />');

	// Get the textarea field
	$('.quform-field-1_28').after($counterText);

	// Bind the counter function on keyup and blur events
	$('.quform-field-1_28').bind('keyup blur', function () {
		// Count the words
		var val = $(this).val(), count = wordCount(val);

		// Set the counter text
		$counterText.text(count + '/400 words');// <-- change 400 to word count allowed
	})

	// Trigger the counter on first load
	.keyup();
});
</script>

[katw]

Hi @DASub, saw your post and thought I could offer a few suggestions.

Are you wanting to use the word counter in both contexts?

1. Front-end (as a gauge for user entry)
2. Back-end (as a form submission validator)

Steps 1 and 2 should still work fine with QuForm 2.

Amend line #9 with the new format of element ID class e.g .quform-input-1_28

For example my textarea field is ID 1_28, and the DIV containing the textarea form field has a CSS class prefix called: .quform-input-.

Which results in the identifier .quform-input-1_28. I would use that if I was applying it to the textarea field on my form.

I haven’t tried the Javascript code out but as it’s JQuery this hasn’t changed and should work ok.

Step 4 also works for QuForm2.

It is only the Validator part (Step 3) that has changed a lot and wont work in its current form.

See how you go.

[katw]

Hi Ally,

I have found a solution that works. But that involved copying the following code from entries/view.php to entries/edit.php.

if ($element instanceof Quform_Element_Html) {
    if ($element->config('showInEntry')) {
        echo sprintf('<tr class="qfb-entry-row-html"><td colspan="2">%s</td></tr>', $element->getContent());
    }

    continue;
}

I inserted it after LINE 30 which is: <?php foreach ($form->getRecursiveIterator() as $element) : ?>

Not a pretty hack but seemed to solve my immediate needs.

BTW both the Entry View and Edit View is inserting colspan="2" for Group and HTML elements when your current table layout is only ever one column wide.

• This reply was modified 6 years, 8 months ago by katw. Reason: fixed codeview
• This reply was modified 6 years, 8 months ago by katw. Reason: typos

[katw]

Hi Bill,

Found an interesting support post along similar theme for item 2.

They save data entered and reload next part of form with this saved data in background to continue on.

From experience using another form builder we generated a unique token. The user then used this to “identify” themselves and re-activate form entry.

This token unlocked (and reconnected) partly saved data so we could build a full POST FORM for Save at end. The ‘Threads’ were then deleted at time of full submit.

Sometimes if doing a survey, the partial data was just as interesting to evaluate as a full set. Depends on your situation.

Cheers

• This reply was modified 6 years, 8 months ago by katw. Reason: typos fixed

[Author]

Posts