How to add "Contact Form-7" form to a page using ACF fields or page into page in frontity?

🙋Get Help
1

I am trying to integrate my Contact Form 7 in frontity on my homepage.

Initially, I have created my contact form 7 in WP and integrated it with my frontity staging app using Frontity Contact Form 7 Package and its working perfectly on Contact page .

Issue to resolve:
But I want to add Contact Form 7 in my <Footer /> component. I read the Frontity Contact Form 7 Package setup guide but have found no solution.
Then I tried to execute the short-code into my ACF Fields under this endpoint: https://staging.moosaconsulting.com/MC-ACF/wp-json/acf/v3/services_section
I got the rendered form under acf: key in the JSON object and then created the custom-handler to fetch the rendered form data like this:

import React from "react";

import { connect } from "frontity";

// In a React component that uses "connect":

const Nav1 = ({ state }) => {

  const data = state.source.get("acf-srvices-section")

  console.log('data');

  console.log(data['0'].acf.content);

  // return data;

  return(

    <div

    dangerouslySetInnerHTML={{

      __html: data['0'].acf.content

    }}></div>

    );

};


export default connect(Nav);

But it stopped working like Frontity Contact Form-7 Package functionality as it’s not getting treated as CF-7. Its simple text/html.

Question: Can anybody please suggest solution that how can i render page into page (like Contact Page into the homepage above the footer) or render contact form 7 in my own component not in page???
someone who can let me know how can i use CF-7 in any component or page?**
Thanks

2

Hi @hammad

Can you provide a repo with the code of your frontity project so we can have a look at this issue in your project?

4

Thanks @juanma for replying:

For now its hosted on our staging domain.
But I just have uploaded my source code here under this git-repo:

6

Hi @hammad

Apologies for the delay in getting back to you on this issue.

To add a contact form to each page on your site in the footer I suggest creating a page in WordPress just to hold the contact form, i.e. the page contains the contact form shortcode and nothing else. Let’s assume it has the slug/path /contact/.

Add a beforeSSR action to the theme’s actions object to “pre-fetch” the contents of the /contact/ page:

beforeSSR: async ({actions}) => {
        await actions.source.fetch("/contact");
}

You can then create a <Footer /> component similar to this:

import React from "react";
import { connect, styled } from "frontity";

const Footer = ({ state, libraries }) => {

    const data = state.source.get("/contact");
    const contactForm = state.source.page[data.id]
    const Html2React = libraries.html2react.Component;

    return (
      <>
        <ContactForm>
            <Html2React html={contactForm.content.rendered} />
        </ContactForm>
      </>
    );
};

export default connect(Footer);

const ContactForm = styled.div`
   // style the component here
`

You need to use Html2React otherwise the the HTML for the form will be rendered in the footer, rather than the form itself.

Hope this helps.

1 Like