Using Advanced Custom Fields and Contact Form 7 to display a form

Question

I want my users to be able to put a Contact Form 7 shortcode into a custom field in the Wordpress editor. I've created the custom field using ACF and I can pull the value onto the page, but when I try to include it in the shortcode, it comes back with a 404.

This code:

<?php echo do_shortcode(get_field('contact_form_shortcode')); ?>

Returns:

[contact-form-7 404 "Not Found"]

If I create a variable out of the value like this:

<?php
 $formCode = get_field('contact_form_shortcode');
 echo $formCode;
?> 

The echo returns:

[contact-form-7 id="473" title="Learn More Form"]

But I get the same 404 after putting that value into the echo do_shortcode function list this:

<?php echo do_shortcode($formCode); ?>

What am I missing?

Intersect

What happens when you use the shortcode in a standard Wordpress page/post? Does it work then? – Diocese

Yes it does. I had also been hardcoding the shortcode into the template, but my users want to be able to choose the form they want to appear in that spot. My backup plan is to use a WYSIWYG field and then let Wordpress execute the shortcode itself. I'd like to avoid that though because my users could ultimately put anything in there that they want and that could get messy. – Intersect

If you want users to be able to pick a CF7 form, you can also set the field type to Relationship and then filter by Contact Form as the post type. This will present a much nicer back-end experience than manually pasting in a shortcode. – Lejeune

Answer 1

I was able to resolve this issue by using the technique I discussed in my comment above. By using the WYSWIG field set to 'Run filter "the_content"' I'm able to pull the field value in the way I want it. The only drawback is that users could type something else in there besides a form shortcode.

Here's my final code:

<?php
    if (get_field('contact_form_shortcode')):
        echo get_field('contact_form_shortcode');
    else:
        echo do_shortcode('[contact-form-7 id="473" title="Learn More Form"]');
    endif; 
 ?>

Intersect

Answer 2

To do it With ACF pro plugin and without other extra plugins.

1. Create a relation field ( example: contact_form )

2. add the below code into your page loop:

   <?php $posts = get_field('contact_form');
      if( $posts ): 
        foreach( $posts as $p ): // variable must NOT be called $post (IMPORTANT) 
          $cf7_id= $p->ID;
          echo do_shortcode( '[contact-form-7 id="'.$cf7_id.'" ]' ); 
        endforeach;
      endif; ?>
   

Shut

Answer 3

Instead of using a WYSIWYG field, you can simply set a Text field to "Convert HTML into tags" under the Formatting setting on the field. This will stop the 404 errors from CF7 and properly process the form. The WYSIWYG fields tend to be too hard to control from bad user input.

Hacienda

Thanks, I don't think that was an option when I posted this question 2 years ago. – Intersect

I searched first before trying it and came across this, but a normal ACF text field worked fine for me when I used <?php echo do_shortcode(get_field('hero_form')); ?> so this may be the more "correct" nowadays. – Lejeune

Answer 4

Here's my solution:

Create a "Post Object" type Field which will returns the post ID. the Filter by Post Type for this field should be sett to "Contact Form" and Filter by Taxonomy leave empty.

Then in page template: (php)

<?php $contact_form = get_field('contact_form'); ?>

HTML:

<div class="col-12 col-md-8 offset-md-2">
  <?php echo do_shortcode('[contact-form-7 id="'. $contact_form .'"]'); ?>
</div>

acf field screenshot

Castile

Answer 5

Another Solution :

1) Install https://github.com/taylormsj/acf-cf7

Installation

> 1 Copy the acf-cf7 folder into your wp-content/plugins folder
> 2 Activate the Contact Form 7 plugin via the plugins admin page
> 3 Create a new field via ACF and select the Contact Form 7 type
> 4 Please refer to the description for more info regarding the field type settings

2) Insert following code into template :

            <?php if( get_field('field_acf') ):
                 the_field('field_acf');
            endif; ?>

This applies to create a contact form 7 in a modal or Pop Up, multiple forms on the same page.

Vaughnvaught

Answer 6

To paste CF7 shortcode (or any other generated shortcode) into ACF field as you were asking, just use the @armadadrive solution, which is exactly what question was about and it works.

1. create ACF text field with some name, eg hero_form
2. paste your shortcode into it
3. display contents like so <?php echo do_shortcode(get_field('hero_form')); ?>

Thanks @armadadrive

Cervelat

Answer 7

Here you can try please check the code for the shortcode below:

<?php echo do_shortcode(get_field('YourACFfieldNameHere')); ?>

I tried it on my website and it works.

Mia

Please don't link to your own content unless necessary, and when you do so, you must disclose your affiliation in the answer in order for it not to be considered spam. – Cally

Answer 8

I use the regular text for ACF, then copy and paste the Contact Form 7 shortcode in to the Wordpress page templates (example: [contact-form-7 id="12345" title="Main Contact Form"]) and then this works for me when I add this to the template-parts/content-contact.php file.

                <?php
                    if (get_field('contact')):
                    echo do_shortcode( get_field( 'contact' ) );
                    else:
                    echo 'No Contact Form'; 
                    endif; 
                 ?>                 
                

Anglophobe