Hi, I'd like to add a select item in the customizable Contact Form of the theme. It's okay to have Name, Email, Subject etc fields, but what if I want to add other items? For example I want to add a list of selectable items, a dropdown list, or a multiple selections items using the same style as the one that could be easily customized using the WP Bakery Builder.
Also, there is no way to add a placeholder for the form fields. I added it using jQuery but it isn't a good practice.
Thank you in advance.
-Edit-
As you can see here I added it, it's the "Position" label, but obviously it doesn't work when you send the email because there is no call for Position in the script
<script> var _k = _k || {}; _k.contact_form = _k.contact_form || {}; _k.contact_form["el_5b86a72388493"] = {"uniqid":"el_5b86a72388493","name_title":"Nome e Cognome.","email_title":"Email.","subject_title":"Oggetto.","message_title":"Messaggio.","has_subject":true,"use_subject":true,"receiver":"****@viceadv.it","hash":"00df1b353d7ddb8588fb90e466874685"};</script>
Our contact form doesn't implement other fields except those default ones. We are going to implement a more customizable contact form in the future however we don't have any ETA.
If you really want to stick to our contact form and add the position field, I have created a JavaScript snippet only for you to add the position field, which will append/pack the Position select field in Message text area right after user clicks submit button as shown in this video:
Hi, I'd like to add a select item in the customizable Contact Form of the theme. It's okay to have Name, Email, Subject etc fields, but what if I want to add other items? For example I want to add a list of selectable items, a dropdown list, or a multiple selections items using the same style as the one that could be easily customized using the WP Bakery Builder.
Also, there is no way to add a placeholder for the form fields. I added it using jQuery but it isn't a good practice.
Thank you in advance.
-Edit-
As you can see here I added it, it's the "Position" label, but obviously it doesn't work when you send the email because there is no call for Position in the script
<script> var _k = _k || {}; _k.contact_form = _k.contact_form || {}; _k.contact_form["el_5b86a72388493"] = {"uniqid":"el_5b86a72388493","name_title":"Nome e Cognome.","email_title":"Email.","subject_title":"Oggetto.","message_title":"Messaggio.","has_subject":true,"use_subject":true,"receiver":"****@viceadv.it","hash":"00df1b353d7ddb8588fb90e466874685"};</script>
Can you tell me how can I solve this?
Hi ViceAdv,
Our contact form doesn't implement other fields except those default ones. We are going to implement a more customizable contact form in the future however we don't have any ETA.
If you really want to stick to our contact form and add the position field, I have created a JavaScript snippet only for you to add the position field, which will append/pack the Position select field in Message text area right after user clicks submit button as shown in this video:
https://d.pr/v/G9U8Rk
This may not be good on looking but it will work with our contact form, unless you decide to use another form builder.
So the code you can add in the page with Raw HTML/JavaScript (via WPBAkery Page Builder) is this:
<script> jQuery( document ).ready( function() { if ( jQuery( '.contact-form' ).length ) { var select = '<select name="info" class="form-control"><option value="Richiedi Preventivo">Richiedi Preventivo</option><option value="Richiedi Informazioni">Richiedi Informazioni</option><option value="Richiedi Tirocinio">Richiedi Tirocinio</option><option value="Registrazione Marchio">Registrazione Marchio</option></select>'; var selectWrapper = '<div class="form-group labeled-input-row"><label for="el_5b87a15144ddc_name">Position.</label>' + select + '</div>'; selectWrapper = '<div class="col-sm-12">' + selectWrapper + '</div>'; var $message = jQuery( '.contact-form .col-sm-12' ); var $submit = jQuery( '.contact-form button[type="submit"]' ); function setPosition() { var position = jQuery( '.contact-form select' ).val(); var $textarea = $message.find( 'textarea' ); var positionAppend = "--------\nPosition: " + position + "\n--------\n\n"; var newVal = $textarea.val(); newVal = newVal.replace( /-{8}.*?-{8}\n\n/s ); newVal = positionAppend + newVal; $textarea.val( newVal ); } $submit.on( 'mouseup touchstart', setPosition ); $message.before( selectWrapper ); } } ); </script>You can modify the code as it describes itself. There are no other alternatives for our contact form.
Please note that this code works only with our contact form WPBakery widget, not with CF7.
Thank you so much!
Hi ViceAdv,
Glad to hear that
Have a great week.
P.S: If you like the theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab.
A huge thank you from Laborator in advance!