2 Column option / 2 Kolommen optie?

Ik heb voor het volgende formulier:
https://www.unlimitedtheinnerway.nl/mollie-register/
een truc gedaan.
De combinatie van abel en input/select wordt omhuld door een <p>
Met de volgende code neem ik de class van de input en zet die ook op de p over, daarna kun je met css alle p’s vormgeven. als je ze bijv. allemaal width:50% geeft, zullen de inputs 2 aan 2 naast elkaar komen.
if ( jQuery(‘body’).hasClass(‘page-id-xxx’) ) { i=0;
jQuery(‘body.page-id-xxx article#post-xxx form p’).each(function() {
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_checkbox_hidden_427’ ) clsinp = ‘paymethd’;
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_open_amount_427’ ) clsinp = ‘amountpay’;
else if (jQuery(‘input’,this).length > 0 && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_checkbox_hidden_xxx’ && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_open_amount_xxx’ ) {
clsinp = jQuery(‘input’,this).attr(‘class’) + ‘ input’;
}
else if (jQuery(‘select’,this).length > 0) {
clsinp = jQuery(‘select’,this).attr(‘class’) + ‘ select’;
}
else clsinp = ‘no_input’;i++;
jQuery(this).addClass(clsinp);
});
xxx is hierin het nummer dat Wordpr4ess genereert voor deze pagina, moet je even in de broncode in de browser kijkenn.
clsinp is de class die overgezet wordt, de code kijkt nog naar een aantal specifieke inputs.
Misschien kun je hier iets mee, als je tenminste een beetje thuis bent in jQuery. Als je dat nog niet bent, verdiep je er dan eens in, het is bijna onmisbaar.

Bedankt voor je reactie. Ik ben bekend met Jquery dus ik zal me erin verdiepen. Ik had gehoopt op een custom css oplossing. Maar als het werkt, dan werkt het. Bedankt!

Hoi Simon,

Ik heb de volgende code toegevoegde aan de pagina met de plugin “jquery in posts pages”:

if ( jQuery(‘body’).hasClass(‘page-id-9504’) ) { i=0;
jQuery(‘body.page-id-9504 article#post-9504 form p’).each(function() {
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_checkbox_hidden_9525’ ) clsinp = ‘paymethd’;
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_open_amount_9525’ ) clsinp = ‘amountpay’;
else if (jQuery(‘input’,this).length > 0 && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_checkbox_hidden_9525’ && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_open_amount_9525’ ) {
clsinp = jQuery(‘input’,this).attr(‘class’) + ‘ input’;
}
else if (jQuery(‘select’,this).length > 0) {
clsinp = jQuery(‘select’,this).attr(‘class’) + ‘ select’;
}
else clsinp = ‘no_input’;i++;
jQuery(this).addClass(clsinp);
});

ID 9504 komt overeen met de pagina en ID 9525 komt overeen met ID uit de code van Mollie Forms. Helaas werkt het niet. De P’s krijgen geen extra class mee. Wanneer ik naar jouw source code kijk, zie ik de door jou geadviseerde JS code niet terug. Mag ik vragen waar je deze geplaatst hebt? Ik heb een functions.php bestand maar helaas werkt dat niet goed met The7 Theme. En verder gebruik ik geen Child Theme op dit moment.

groeten,

Tim

Je moet nog wel zorgen dat hij de code ook uitvoert.
Heb je dit wel om je code heen staan:

jQuery(document).ready(function (){

je code

});

De Plugin voert dit automatisch uit. In de broncode staat:

jQuery(document).ready(function() {
if ( jQuery(‘body’).hasClass(‘page-id-9504’) ) { i=0;
jQuery(‘body.page-id-9504 article#post-9504 form p’).each(function() {
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_checkbox_hidden_9525’ ) clsinp = ‘paymethd’;
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_open_amount_9525’ ) clsinp = ‘amountpay’;
else if (jQuery(‘input’,this).length > 0 && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_checkbox_hidden_9525’ && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_open_amount_9525’ ) {
clsinp = jQuery(‘input’,this).attr(‘class’) + ‘ input’;
}
else if (jQuery(‘select’,this).length > 0) {
clsinp = jQuery(‘select’,this).attr(‘class’) + ‘ select’;
}
else clsinp = ‘no_input’;i++;
jQuery(this).addClass(clsinp); });

• This reply was modified 7 years, 3 months ago by timmiieehh.

Mag ik anders vragen waar jij de code hebt geplaatst?

je mist nog de afsluiting van de document ready function

dit moet je nog een keer onderaan zetten volgens mij:

});

Ik heb de code in een file formfunctions.js staan die in de head van de html wordt gelinkt.
Dat linken doe je door in header.php in je theme een extra link erbij te zetten naar je javascript file:

iets in de geest van:
<script type=’text/javascript’ src=’https://www.jesite.com/wp-content/themes/themexx/js/formfunctions.js’></script&gt;

Ik hoop dat het zo lukt.

Nogmaals bedankt voor je hulp. Toch heb ik de hoop opgegeven.

Script staat in de header <script type=’text/javascript’ src=’https://www.dentalzorg.nl/wp-content/themes/dt-the7/js/formfunctions.js’></script&gt;. Script is ook toegankelijk.

De code staat in: https://www.dentalzorg.nl/wp-content/themes/dt-the7/js/formfunctions.js.

De code is:

jQuery(document).ready(function() {
if ( jQuery(‘body’).hasClass(‘page-id-9504’) ) { i=0;
jQuery(‘body.page-id-9504 article#post-9504 form p’).each(function() {
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_checkbox_hidden_9525’ ) clsinp = ‘paymethd’;
if (jQuery(‘input’,this).attr(‘id’) == ‘rfmp_open_amount_9525’ ) clsinp = ‘amountpay’;
else if (jQuery(‘input’,this).length > 0 && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_checkbox_hidden_9525’ && jQuery(‘input’,this).attr(‘id’) != ‘rfmp_open_amount_9525’ ) {
clsinp = jQuery(‘input’,this).attr(‘class’) + ‘ input’;
}
else if (jQuery(‘select’,this).length > 0) {
clsinp = jQuery(‘select’,this).attr(‘class’) + ‘ select’;
}
else clsinp = ‘no_input’;i++;
jQuery(this).addClass(clsinp); }); });

Ik heb in het Mollieformulier geprobeerd met een ingevulde en een lege class. Maar de P wordt niet aangevuld met een class

Dus helaas. Bedankt voor de moeite in ieder geval.

Beste @simonpresp,

Ik ben op zoek naar een eenvoudige manier om de betaalknop in Mollie aan te passen. Ik zie op uw website dat je een grote betaalknop hebt, kan je me laten weten hoe je dat hebt gedaan? Vriendelijke groeten, Elke