Contact Forms like contact form 7

🙋Get Help
1

I was going through Frontity, i did not find anything regarding forms like how i can create forms in my Wordpress and use them in my theme? any ideas?

2

I think @imranhsayed and @smit.soni22 are about to start working on a CF7 package for Frontity :slight_smile:

Once that’s done, it will be as easy as adding that package in your frontity.settings.js file. No coding required.

I’ll keep you updated.

3

Yup we are on it. :computer:
Thanks @luisherranz :slightly_smiling_face:
Will update on this soon :wave:

1 Like
4

That will be amazing because the only thing remaining in the introduction to frontity was the contact form. When this will be done many front end developers like me will have their life at ease :smile:

2 Likes
5

What about custom forms (it doesn’t need to be present at wp-admin) with custom POST endpoints? Can I see any example of such form at work (code appreciated) :slight_smile: ?

6

With Frontity, you are in the React world, so you can create whatever you want and connect it to whatever service you want.

The only two things I’d recommend you are:

  • Use fetch instead of axios or superagent, because it won’t make your app bigger. We made sure it works in both the server and the client if you import it from "frontity":
import { fetch } from "frontity";
  • Use Frontity’s state manager to simplify your components instead of internal state:

This is a rough example, but something like this:

const myTheme = {
  roots: {
    theme: Theme
  },
  state: {
    theme: {
      form: {
        sending: false,
        succeed: false,
        error: false,
        fields: {
          name: "",
          email: "",
        }
      }
    }
  },
  actions: {
    theme: {
      setField: ({ state }) => ({ name, value }) => {
        state.theme.form.fields[name] = value;
      },
      submitForm: async ({ state }) => {
        state.theme.form.sending = true;
        try {
          const response = await fetch("http...", {
          });
          const body = await response.json();
          // Do something with the response of the form.
          state.theme.form.sending = false;
          state.theme.form.succeed = true;
      } catch (error) {
          state.theme.form.sending = false;
          state.theme.form.error = error.message;
      }
    }
  }

And something like this for the <Form>

const Form = ({ state, actions }) => {
  return (
    {!state.theme.form.succeed ? (
      <form onSubmit={event => {
         event.preventDefault();
         actions.theme.submitForm();
      }>
        <input
          name="name"
          placeholder="Your name"
          value={state.theme.form.fields.name}
          onChange={event => {
            actions.theme.setField({ name: "name", value: event.target.value });
          }}
        />
        <input
          name="email"
          placeholder="Your email"
          value={state.theme.form.fields.email}
          onChange={event => {
            actions.theme.setField({ name: "email", value: event.target.value });
          }}
        />
        <input
          type="submit"
          value="Send"
          disable={state.theme.form.sending}
        />
        {state.theme.form.error && <div>Something went wrong: {state.theme.form.error}</div>
      </form>
    ) : (
      <div>Form sent!</div>
    )
  );
};
2 Likes
8

Just FYI, for anyone coming to this thread as I was, the package mentioned in the op above no longer works, nor appears to be maintained. There is another forked, fixed, and [somewhat] maintained package here: GitHub - aamodtgroup/frontity-contact-form-7: Contact Form 7 extension for Frontity.

1 Like