CODEWITHSUNDEEP
wordpressvalidationcontact-form-7
Maanstraat
Maanstraat

Reputation: 1251

Contact form 7 required one of 2 different fields

I have a image upload field and a URL field in CF7 and how can i make it that a user needs to use one of the 2 fields. So select a image or put a link in the URL field?

I already search a little and i saw some options to do it on normal txt fields but that was not working for me i think because of the upload field.

Upvotes: 1

Views: 2979

Answers (2)

Maanstraat
Maanstraat

Reputation: 1251

I think i found the solution with a little help of the code from @Aschi33.

I made the image (upload field) required and the url field not. So there needs to be alwasy a image selected. But with this code:

function alter_wpcf7_posted_data( $data ) {

    if($_POST['url'] != "") {
        $_FILES['image']['tmp_name'] = "urlprovided";
    }

    return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");

if the URL field is filled in then the required image field is faked to be filled in so then the URL field can be used to submit the form.

And then with this code:

function cf7_custom_url_check( $result, $url ) {
    if ($result) {
        $regex='/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/';
        if (!preg_match($regex,$url)) $result=FALSE;      
    }
    return $result;
}
add_filter( 'wpcf7_is_url', 'cf7_custom_url_check', 10, 2 );

I check if its a real video link from YouTube and if not the field will give a error.

Upvotes: 0

Aschi33
Aschi33

Reputation: 53

I don't think that CF7 can do this out of the box. You would probably have to go down to code to solve this issue.

Since I don't know how big you form is this could maybe help you out:

https://wordpress.org/plugins/cf7-conditional-fields/ - Plugin for conditional field inside CF 7

https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/ - Tutorial how to use it.

So with this plugin you could basically create a dropdown in which the user first has to select if he wants to use an image or use the URL field. After that, only his selection would pop up and he can proceed with the selected option.

If you want to do the coding you can add some JS to the site and check on validation if one of the two fields is filled out or not.

If the plugin solves your issue - great, if not let me know so I can help you out with the code validation.

###Edit since we need code###

So to dynamically alter the required function I found a pretty good post: Dynamically Disable Contact Form 7 Field Validation

Some Background information: CF7 does the validation on server side, so working with JS or JQuery won't help in this case. What we are going to do is manipulate the server validation. If one of the fields is filled out correctly we are just putting content in the other field on the validation.

I created a form that looks like this: enter image description here

The form in CF7 module looks like this:

<label> URL 
[url* url ] 

<label> Image
[file* image ]

[submit "Send"]

Then you just have to add the following code to your functions.php file of your theme.

function alter_wpcf7_posted_data( $data ) {
if($_FILES['image']['size'] != 0) {
    $_POST['url'] = "http://fileupload.com";
}
if($_POST['url'] != "") {
    $_FILES['image']['tmp_name'] = "urlprovided";
}
return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");

Normally both fields will be empty in the beginning, if one of them has contet the other one gets fake data and the use has only to provide one.

Let me know if this helps.

Upvotes: 1

Related Questions