I have made a contact form with contact form 7. Due to the styling of the theme, the selectbox does not work properly.
You cannot select multiple options and you can scroll in the select box instead of it expanding as a dropdown.
Can someone help me with this?
url: https://www.lghairdressers.nl/basis-opleiding/
The issue you are facing is that the select field has multiple=true, and this is the default styling for multiple fields.
If you want to retain a dropdown list for a multiple select, you will need to convert your field using a JavaScript plugin such as a HybridDropdown field using the following script on your page,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelectorAll('.wpcf7-select');
sel.forEach(function(){
hyd = new HybridDropdown(this,{});
})
})
})
</script>
Related
everyone.
The gravity form plugin is using standard File Input Element.
I can make it looks like the custom UI by adding custom css into File label tag and using the gform_field_content filter.
after that, how can I display the imputed file name like the following status?
as you see, the imputed filename Group 386.svg is showing.
how can I do this? or is there any other good way?
Regards
I found the solution myself.
I added the custom style to label by following this guide (W3 Custom File Upload
) https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp
after that, I added the js event to display the selected filename like the following.
// contat form, join us form
// customize file upload
jQuery(function () {
jQuery(document).on('gform_post_render', function () {
jQuery('.contact-form__form input[type=file], .join-us__form input[type=file]').on('change', function () {
const fileName = jQuery(this).val().split('\\').pop()
jQuery('label', jQuery(this).parent().parent()).html(fileName)
})
})
})
I have never used MailChimp Easy Forms before. I'm trying to make the pop-up apear when a user pressing a button instead of the pop-up to just showing when the user gets to the website.
My js code:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup- forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
alert('inside the button click');
require(["mojo/signup-forms/Loader"], function (L) {
L.start({
"baseUrl": "mc.us1.list-manage.com", "uuid": "81016de6debaf524b31df317af5480b1-us17",
"lid": "8517f84634"
})
})
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
</script>
And the HTML:
<button id="open-popup" onclick ="showMailingPopUp();">Email signing</button>
In the inspection tool I get this error:
This is how it looks in MailChimp:
Currently i'm using the listid from MailChimp as "lid" and my API-key as "uuid" and I think it's the uuid that break, but what is the uuid? If it's not the id's thats wrong what is it then?
Thanks in advance :-)
Install Easy Forms for MailChimp WordPress Plugin and set the mailchimp API key and it will fetch all of your list now create new form and assign list with it then save it one shortcode will generate.
Now open one pop up using jquery and in content paste the shortcode then it will work.
https://wordpress.org/plugins/yikes-inc-easy-mailchimp-extender/
I am new for MeteorJs. Some one could you please provide info for form area text tag.I tried to add text area and tried to implement using with event.
I got answer from refer few docs.. below is the correct one
html:
JS:
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
var message=event.target.newMessage.value;
I have a form in a Meteor application that contains a list of radio buttons that is made accessible by a Bootstrap accordion. I have implemented a validation routing in meteor that inserts classes into the input elements to mark them as valid/invalid.
Problem is: Everytime a validation state of one input element changes, the template is redrawn and the currently open accordion closes.
I solved this by doing this clumsy approach:
Meteor.startup(function() {
// track collapse state of accordion....
$('.collapse').on('shown', function() {
Session.set(addBookingCollapse, $(this).attr('id'));
});
});
Template.addrecord.helpers({
openAccordion: function(accordion) {
if (Session.get(addBookingCollapse) == accordion) {
return 'in'
};
}
});
<div id="collapseOne" class="accordion-body
collapse {{openAccordion 'collapseOne'}}">
...and so on for the other four collapsible elements
But for whoever's sake, there must be a more elegant solution? I do not want to waste a session variable for this....
It may help to put the input elements in {{#isolate}}{{\isolate}} blocks to avoid re-rendering the entire template. See: Meteor Isolates
I haven't really looked super close at your code/problem, but why do you use id's to target each of them on their own? Why not use a class for all of them like this:
$('.a-class-that-you-name').on('shown', function() {
var thisSpecificId = $(this).attr('id');
Session.set('addBookingCollapse', thisSpecificId);
});
Would that work?
Is there any way I can create custom/conditional registration/profile fields in buddypress.
I tried Googling a lot about this, but I am not getting proper solution.
The condition what I am thinking of is :
I want to create 2/3 dropdowns, suppose if 1st one contains vehicles type(car, bike,),
then the second dropdown's option should change according to what user is choosing in dropdown 1.
any help would be appreciated.
Thanks a ton in advance. :-)
Currently there is no working plugin or hack for that. I saw such thing on some sites - but this is done via JavaScript and heavily modifying of a registration page source code.
It will be little tricky unless you touch register/resgistration.php source.
you can do like this if you little familiar with jquery.
Theres a hidden field ( id "signup_profile_field_ids" ) in buddypress registration form which tells server what fields in registration form, it will look like
<input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="5,11,1,10,32">
value of that field contains field ids of the registration form.
Now, you need to select a parent field to show conditional fields. you need to know parent and conditional field ids
now use this jquery code
<script type="text/javascript">
$(function(){
var childs = new Array("Child id 1","Child id 1"); // your child fields ids
var options = new Array("Car","Bike"); // your parent field options, notice option and child number is same, which means, one child for one option
var parent = "Parent Field id"; // place you parent field id
var currentFields = new Array();
currentFields = $("#signup_profile_field_ids").val().split(','); // take all current fields ids in an array
$.each(childs, function(index,value){
$('#field_'+value).parent().hide(); // hide all child fields first
currentFields.splice(currentFields.indexOf(value),1);
});
$("#signup_profile_field_ids").val( currentFields.join() );
$('#field_'+parent).after('<div id="conditional-fields-conteiner></div>"');
$('#field_'+parent).change(function(){
var option = $(this).val();
var appendField = childs[options.indexOf(option)];
var html = $("#field_"+appendField).parent().html();
$('#conditional-fields-conteiner').html(html);
$.each(childs, function(index,value){
currentFields.splice(currentFields.indexOf(value),1);
});
currentField[] = appendField;
$("#signup_profile_field_ids").val( currentFields.join() );
});
});
</script>
This may seems complex, but this is the easiest approach. if you are planning it in membership site, dont use it. user can manupulate conditional fields simply by editing html.
Theres also a plugin for this, going to release soon. I am developing it
http://rimonhabib.com/coming-up-next-buddypress-nested-conditional-fields/