Phone field conditional require based on radio button

Get Help
, , , , ,
1

Hello Gravity Forms Community,

I’m facing a challenge with customizing the Conditional Logic in one of my forms and could really use some assistance. My goal is to allow users to choose their preferred method of contact through radio buttons – either by phone or by email. Based on their selection, I want to make the phone field required if they choose the phone option, but leave it optional if they choose email.

In summary, what I need is

  • Users select their preferred contact method via radio buttons.
  • If “Phone” is selected, the phone field becomes a required field.
  • If “Email” is selected, the phone field remains optional.

I have a basic understanding of how Conditional Logic works in Gravity Forms but my knowledge, especially in PHP, is quite limited. I’ve found a basic script in another thread that adjusts the Conditional Logic requirement based on the value of an input field.

add_filter( 'gform_pre_render', 'set_conditional_requirement' );
add_filter( 'gform_pre_validation', 'set_conditional_requirement' );
function set_conditional_requirement( $form ) {
 
    $value = rgpost( 'input_2' );
        if ( $value == 'no' ) {
        return $form;
    }
     
    foreach ( $form['fields'] as &$field ) {
        if ( $field->id == 1 ) {
            $field->isRequired = true;
        }
    }
 
    return $form;
 
}

However, I’m not sure how to modify this for a radio button being checked.

These are my two radio button input fields and the belonging telephone field:

					<input class="gfield-choice-input" name="input_9" type="radio" value="Telefon" checked="checked" id="choice_1_9_0" onchange="gformToggleRadioOther( this )" aria-describedby="gfield_description_1_9">
					<input class="gfield-choice-input" name="input_9" type="radio" value="E-Mail" id="choice_1_9_1" onchange="gformToggleRadioOther( this )">
<input name="input_4" id="input_1_4" type="tel" value="" class="large" placeholder="Telefon" aria-required="true" aria-invalid="false" autocomplete="off" style="padding-left: 85px;">

Could someone guide me on how to achieve this functionality? I would greatly appreciate it.

Thank you in advance for your help and guidance. I’m eager to learn and implement this feature to improve the user experience on my site.

Best regards,

Claudio

2

Anyone from Support who can assist?

3

Hi Claudio,

You can create double Email and Phone fields as optional and required and then use conditional logic to display one of them based on the preferred contact method selection.

For a visual guide, please refer to the following screen recording: :point_down:

Give it a try, and let me know how that goes! :smile:

4

You can offer a radio button choice of “Preferred method of contact” with Phone and Email. Make that field required.

Make the Phone and Email fields required.

Use conditional logic on the Phone to show when the radio button choice is Phone, and similarly show the Email field when the radio button is Email.

When the required field is hidden, the form will still be submitted as expected. A hidden field that is required acts like it’s not present in the form. You can test a form on my set that is set up like that:

https://chrishajer.com/conditional-contact/

If you have any other questions, please let us know.

5

Thank you so much for your reply!

Yes for sure - this sounds logical - but i only have one fault why this solution isn´t working…

When the phone field is not required it should stay there but as not required. So the sulution with two phone fields, one required and one optional showing as conditional based on the selection is not working because i only can map one phone field for hubspot export feed…

So i think i have to work with a code snippet and not the build in conditional field or do you have another hint for me?

6

Hi Claudio,

You can try the following code, but it needs some adjustment here. For more details, please have a look at the following documentation. Thank you

Conditionally Required Field:

add_filter( 'gform_pre_render', 'set_conditional_requirement' );
add_filter( 'gform_pre_validation', 'set_conditional_requirement' );

function set_conditional_requirement( $form ) {
 
    $value = rgpost( 'input_2' );
        if ( $value == 'no' ) {
        return $form;
    }
     
    foreach ( $form['fields'] as &$field ) {
        if ( $field->id == 1 ) {
            $field->isRequired = true;
        }
    }
 
    return $form;
}
7

Hi Faisal,

yes for sure - i posted the code in my own first message here. I need help to customize this code to my radio button input to conditional manage the requirement of the phone field… Can you help me to customize?

8

Hi Claudio,

To explain things more clearly, I have created a screen recording for you. Please watch it below and use the provided code to find a quick solution to your issue. Please note that the code will provide a quick fix but will not form validation. Thank you.

jQuery(document).ready(function($) {
        $(".phone_or_email input[type='radio']").change(function() {
            if ($(this).is(":checked")) {
                if ($(this).val() === "phone") {
                    $(".phone_req").addClass("gfield_contains_required");
                    $(".phone_req label").append('<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>');
                    $(".phone_req input").attr("aria-required", true);

                    $(".email_req").removeClass("gfield_contains_required");
                    $(".email_req label .gfield_required").remove();
                    $(".email_req input").removeAttr("aria-required");
                } else if ($(this).val() === "email") {
                    $(".email_req").addClass("gfield_contains_required");
                    $(".email_req label").append('<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>');
                    $(".email_req input").attr("aria-required", true);

                    $(".phone_req").removeClass("gfield_contains_required");
                    $(".phone_req label .gfield_required").remove();
                    $(".phone_req input").removeAttr("aria-required");
                }
            }
        });
    });

Give it a try and let me know how that goes! :smile:

9

:slight_smile: Hi Faisal!

Thank you so much for your fast reply and help! I have added the code and the required marks are workin - howether the real validation is not coming up.

One Question to customize - when phone is marked as communication way the e-mail field should stay required. Could you give me a new Code for showing both fields required for Phone and just e-mail field required for email communication? This would be my final solution…:slight_smile:

Thank you so much! Claudio

10

Hi Claudio :wave:

You’re welcome. I mentioned that it will be frontend validation, not backend. This way, you can have a temporary fix. Here is the updated code for you to try. :smile:

jQuery(document).ready(function($) {
    $(".phone_or_email input[type='radio']").change(function() {
        if ($(this).is(":checked")) {
            if ($(this).val() === "phone") {
                $(".phone_req").addClass("gfield_contains_required");
                $(".phone_req label").append('<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>');
                $(".phone_req input").attr("aria-required", true);

                $(".email_req").addClass("gfield_contains_required");
                $(".email_req label").append('<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>');
                $(".email_req input").attr("aria-required", true);
            } else if ($(this).val() === "email") {
                $(".phone_req").removeClass("gfield_contains_required");
                $(".phone_req label .gfield_required").remove();
                $(".phone_req input").removeAttr("aria-required");

                $(".email_req").addClass("gfield_contains_required");
                $(".email_req label").append('<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>');
                $(".email_req input").attr("aria-required", true);
            }
        }
    });
});

Give it a try and let me know how that goes! :smile:

11

Workin like a charme!! thank you so much - im happy! :slight_smile: best regards, claudio

1 Like
12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.