[Plugin: SimpleModal Contact Form (SMCF)] Tutorial: Adding custom form fields

Very nice tutorial, but.. if the field we want to add is a radio button field?

I′m afraid the last validation step is not possible.. in the jQuery validation process is not possible to add this:

if (!$(‘#smcf-container #smcf-gender’).val()) {
req.push(smcf_messages.gender);
}

Because the radio button does not suppor id=”#”… Any idea?

Thanks in advance, good tutorial indeed!

Hi Javier,

I believe that when I encountered this issue, I instead used a non-mandatory single checkbox since I only required two choices for the user e.g. “Yes” or “No”.

Example: $somecheckbox = isset($_POST["somecheckbox"]) ? $_POST["somecheckbox"] : "No";

I’ve researched the non-WordPress version of the plugin but could not find anything specifically of use regarding radio button validation: https://www.ericmmartin.com/projects/simplemodal_v12/

Still, you have 3 work-arounds in making this work (personally, I’d go with work-around 3):

1. Use a checkbox instead of radio buttons (this won’t work if you have more than two radio options however).
2. Use a <select> element instead of radio buttons (this will allow for unlimited options).
3. Use radio buttons but instead of following the above tutorial, create a hidden text box (https://www.echoecho.com/htmlforms07.htm). Using jQuery, you can then set the radio buttons to dynamically change the value of the hidden text box ( here’s the full code and a live example: https://jsfiddle.net/jcoc611/rhcd2/1/ ). Then, you simply have to apply the above tutorial steps to the hidden text box. The end user knows no different. Problem solved.

If you’re absolutely insistent on forcing the plugin to validate radio fields rather than using my above recommendations, post a question on https://www.stackoverflow.com. Include an example of the default code of the “last validation step” and ask how to modify it to validate radio fields.

If you need further help on any of the above, please elaborate on what you’re trying to achieve. i.e. How many radio options do you require? Is your radio group a mandatory field? Provide the HTML mark-up of your radio field.

Good luck. Let me know what approach you’ve taken.

Thanks for your quick and accurate reply!!!

I agree with you the best method is third one. I′m trying to implement it, but I am having a minor issue (Im sure its my fault, Im not very good with js..).

I′ve included the hidden text field in the form in this website. The form is, of course, simple modal contact form – it can be shown clicking in the button with the calculator icon just above the blue footer zone.

BUT: Althoug Ive included the js code in a new js file, and linked it, see below, the code gives no new values to the hidden input field while we click in the radio buttons. I ve testing it using a normal “text” field to know if everything were working properly.. and doesn′t.. ??

<script type='text/javascript' src='https://www.acquajet.com/wp-content/plugins/simplemodal-contact-form-smcf/js/smcf2.js'></script>

I am afraid Ive included badly this code, because of my js unexperience… Surely including it in a different way, or in other place, everything work..

Moreover, the rest of the validation works perfectly, so if we can make this little issue works, everything will be ok!!

If not, I will try with the select option, but this one seems to be much more elegant and complete..

Can you give it a try? Thanks in advance!! Regards!

EY! EVERYTHING IS WORKING PROPERLY NOW!

In the meantime I was writing to you, I decided to review the new js file, and found some errors on my side..

Thank you very much for your help, you can see it working in this link, just clicking in the button with the calculator icon just above the blue footer zone.

Thanks, kind regards,

Thanks for confirming what approach worked for you. Well done on persisting and resolving the issue. The end product and the overall website is well designed.

Hello,

I tried to add two new fields to the modal.
Placement below the email field. Are now Phone and Activity.
These are not required or I am not concerned if they are even filled in properly.

I followed the above instruction and now the syntax is stating that I have an extra < sign somewhere and getting an error on the new additions/lines. The FOR and CLASS are highlighted. If I remove them and save it is working when I add them back it give the error message.

The other two files are changes and no issues.
Data and JS changed and look good according to the instructions only the PHP is giving the issue.

Can you identify what could be the cause? Around FOR and Class having the issue?

Thanks,

Seem to be, as you have just said, a syntax error.. can you check you don′t have any extra “<“, o any non-closed “, or ”.. ?

Copy here the php code, in order to double check it.

Thanks, regards,

I had the same issue gdisalvo, but I found that I had an extra “; after

<input type=’text’ id=’smcf-phone’ class=’smcf-input’ name=’phone’ value=” tabindex=’1003′ />

Just make sure “; comes after the last field in your list.

I deleted the extra one and it worked great.