Hi @finomozart
This javascript should accomplish that:
jQuery(document).ready(function($) {
var uid = jQuery('#forminator-module-622').attr('data-uid');
jQuery('#forminator-field-text-1_' + uid).attr('readonly','readonly').css("cursor", "default");
});
This sets the form to “read only” (so the user can’t input anything manually, but your custom script works), and changes the default “read-only” hover cursor (which had a 🚫 next to it) back to a regular looking cursor.
Thank you Aakash. I entered your JS on the individual page JS space. The phone keypad still comes up.
Hi @finomozart
You have a CSS rule in the beginning of the <script> block that’s meant only for JavaScript. I’d remove that, and place it where CSS belongs.
It also looks like the first “j” in “jQuery” is missing.
https://i.imgur.com/g1OfH2r.png
The custom seat selector code was contributed by a friend, I have no control over that.I will forward your advice. To clarify, should I transfer the “script block” from the page JS section to the CSS section? Thanks Aakash.
-
This reply was modified 3 years, 6 months ago by
finomozart.
-
This reply was modified 3 years, 6 months ago by finomozart.
Hi @finomozart,
To clarify, should I transfer the “script block” from the page JS section to the CSS section?
There is a CSS code inside the “<script>” block. Which isn’t needed. Both are different codes, and it needs to be added separately.
The CSS code is:
.forminator-custom-form {
display: block !important;
}
If needed, you can remove the above code and add any custom CSS using the default customizer.
If the “Season Ticket” field won’t be having a manual entry and only dynamic then you could also try this CSS to disable user inputs too.
#forminator-module-622 > div:nth-child(3) > #number-1 > div > input {
background: #ccc;
outline: none;
pointer-events: none;
}
The CSS can be added via the default WordPress customizer, under Appearance > Customize > Additional CSS.
Kind Regards,
Nithin
Unfortunately, on a phone view port, the keypad still appears! Possibly the original developers, like Patrick Mr. Cohen, can solve this…
The field DOES have user input – this is where a buyer clicks to select their seat(s.) What we want to avoid is the appearance of the phone keypad visually blocking the seating chart!
@finomozart
The issue isn’t with the seating plugin, but with how the code I recommended was pasted onto the site.
You have CSS and Javascript in a Javascript (<script>) tag.
https://i.imgur.com/g1OfH2r.png
Remove the CSS portion of the code:
.forminator-custom-form {
display: block !important;
}
And paste it in your Theme Customizer CSS area:
https://mozartorchestra.org/wp-admin/customize.php
Hope this helped
Aakash, I am just the Music Director/Conductor. I need more specific instructions. Do you mean the <script> tag on the live site/page? I do not know how to edit the actual code, I use the WordPress Cornerstone editor. Can the <script> tag be edited with Cornerstone? I also noticed that this tag is on the JS section of the two pages in question using Forminator module 390 and 622. The same pages also have CSS sections. Should I try doing that? I hope you reply soon, It is evening time here in California.
Clarifying: the CSS code you mention IS on the JS section of the tickets and season-tickets pages.
Hi @finomozart
I hope you are doing well,
You can find a step on step how to add the custom script to your site from https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/ but could you let us know which device you see the issue?
I tried using iOS > Safari, but when I click on the text-1 field it opens the modal only, I also tried to use the controls but it jumped the field to next instead of going in “Click to select” https://monosnap.com/file/CMfLJdQnQbrn6CXTz6nV8RYK3Yx6LP
Best Regards
Patrick Freitas
I deleted the CSS from the JS <script> tag as Aakash suggested earlier in the Theme Customizer CSS/JS areas: https://mozartorchestra.org/wp-admin/customize.php
My mobile device is a Galaxy J7 Prime. “text-1” imput field works correctly now as it no longer triggers the phone keypad. Mr. Patrick, did you change anything on my live site/code?
Thanks,
AP
Aakash, THIS was YOUR work that solved my issue. THANK YOU!
Please modify the following so I can apply it globally to my 3 Forminator modules (390,622,987):
#forminator-module-622 div[id^=”address-1″] {
flex-grow: 2;
}
/*
#forminator-module-622 .forminator-row.forminator-paypal-row {
margin-bottom: 5px !important;
}
/*
#forminator-module-622 .forminator-row .forminator-suffix {display:none !important;}
#forminator-module-622 .forminator-row .forminator-currency { padding-right:5px !important;}
Hi @finomozart
Mr. Patrick, did you change anything on my live site/code?
Just to be clear: none of us did any modifications to your site. We don’t have any access to your site to be even able to do this.
Please modify the following so I can apply it globally to my 3 Forminator modules (390,622,987):
You can simply replace
#forminator-module-622
everywhere in this code with
.forminator-custom-form
This way the rules should be applied to all those three forms and, in fact, any other form that you may add in future (provided that they use “address-1” field and/or paypal field); it won’t affect forms that do not use those fields anyway.
Kind regards,
Adam
