Hi!
I am setting up review post type with fields
1.Title (text)
2.Description (text area)
3.Rating (radio button with values 1,2,3,4,5)
Post field set up is done...
Cred form set up is done...
But I want to show up stars instead of radio buttons on front end form...
I have tried this task using page source code...and achieved some success...but not 100%
Plz check link; https://www.gurujan.net/form-test/
To get this link I took reference from this site: https://www.cssscript.com/simple-5-star-rating-system-with-css-and-html-radios/
Further modification is required....
Please refer to the first comment on this article:
https://www.cssscript.com/simple-5-star-rating-system-with-css-and-html-radios/#comment-174
This script does not work. The radio button never becomes "checked" when you click a star rating. We don't support custom interfaces like this here in the forum, so my recommendation is to figure out how to make the correct radio button "checked" when you click a star. If the correct radio button is "checked", then the form might work.
Yes ! It works....
After working few hours I managed to work it.
Just again one problem raised..<b>Invalid Form Submission (nonce failure)</b>
Experimental procedure is below :
1.Created CRED from for review cpt
2.Inserted in Page (add review page)
3.Opened page and copied 'page source code' from browser.
4.Again created new CONTENT TEMPLATE for this form (ex.review test )
5.Pasted form source code (of step-3) in content template.
6.Modified source code related to related to radio inputs (by changing classes)
7.Added css for star feilds...
Now result is :
1.When i open 'content template inserted page' I can see embedded 'review form' with all fields ( reviews name,review description,Stars rating field)
2.When I fill up form (including star rating) all values are passing to original 'cred form inserted page' with proper values.
but form is not submitting due to <b>Invalid Form Submission (nonce failure)</b> error,
Why this is happening ?
Is it due to embeded mode or due to security reason?
n Again If I succeeded this task then how much secure it is ?
Hi !
Have you any conclusion about this ?
3.Opened page and copied 'page source code' from browser.
Do not copy + paste page source code like this - it won't work for security reasons. If you try to insert copied source code into a different form, or anywhere other than a CRED form editor, CRED may throw a security error. You must use the CRED form builder to create your form. Autogenerate the form HTML first. Do not copy + paste any page source code. If you want to insert custom HTML inside the CRED form, auto-generate the CRED form code, then insert your custom code inside the generated code.
Hello !
CRED form code for star rating field is
[cred_field field='ratings' post='review' value='' urlparam='' output='bootstrap']
and I want to replace it with
<div class="stars" data-item_name="radios-wpcf-ratings">
<input type="radio" id="form-1377492100" name="wpcf-ratings" value="5" class="wpt-form-item wpt-form-item-radio radio-5 star star-5" data-wpt-type="radio" data-wpt-id="cred_form_7644_1_form-1377492100" data-wpt-name="wpcf-ratings" /><label class="star star-5" for="form-1377492100">5</label>
<input type="radio" id="form-811932737" name="wpcf-ratings" value="4" class="wpt-form-item wpt-form-item-radio radio-4 star star-4" data-wpt-type="radio" data-wpt-id="cred_form_7644_1_form-811932737" data-wpt-name="wpcf-ratings" /><label class="star star-4" for="form-811932737">4</label>
<input type="radio" id="form-1016724231" name="wpcf-ratings" value="3" class="wpt-form-item wpt-form-item-radio radio-3 star star-3" data-wpt-type="radio" data-wpt-id="cred_form_7644_1_form-1016724231" data-wpt-name="wpcf-ratings" /><label class="star star-3" for="form-1016724231">3</label>
<input type="radio" id="form-1940341014" name="wpcf-ratings" value="2" class="wpt-form-item wpt-form-item-radio radio-2 star star-2" data-wpt-type="radio" data-wpt-id="cred_form_7644_1_form-1940341014" data-wpt-name="wpcf-ratings" /><label class="star star-2" for="form-1940341014">2</label>
<input type="radio" id="form-1010114793" name="wpcf-ratings" value="1" class="wpt-form-item wpt-form-item-radio radio-1 star star-1" data-wpt-type="radio" data-wpt-id="cred_form_7644_1_form-1010114793" data-wpt-name="wpcf-ratings" /><label class="star star-1" for="form-1010114793">1</label>
</div>
Above code works in embeded mode but not directly in cred form.Because cred form have shortcode for rating field and i am trying html to get it through star buttons. I am not getting proper way to insert it in cred form.Because cred form accept values from radio buttons not from stars.How to solve this puzzle ?
There is not a built-in way to create this type of custom interface with different CSS classes for each radio input. The only way I know how to do something like this is to write custom JavaScript that adds the necessary CSS classes after the page loads. I will provide some sample code here:
<div class="stars" data-item_name="radios-wpcf-ratings">
[cred_field field='ratings' post='review' value='' urlparam='' output='bootstrap']
</div>
// initialize CRED form star elements
jQuery(window).bind('load', function(){
// loop over the star inputs
jQuery('.stars').find('input').each(function(index, item) {
// add classes to each input
jQuery(item).addClass('star star-' + index);
// continue manipulating the DOM here as needed
});
});
Here's some more information about the jQuery "each" function:
http://api.jquery.com/jquery.each/
Great ! Thank you for your valuable time.My issue is solved.
How can I see hidden link here
Hello jiaxinz I have updated the hidden links in this post.
