Would it be possible to get a full example? Basically just an implementation that show

This was a great starter. Thanks! I have updated <a href="https://gi

Full example about gatsby-source-gravityforms HOT 7 CLOSED

robmarshall commented on May 30, 2024 1

Full example

from gatsby-source-gravityforms.

Comments (7)

robmarshall commented on May 30, 2024 1

Hi Martin,

This is still being developed. The plugin is still very new.

See this repo for an in-progress solution - https://github.com/robmarshall/gatsby-gravityforms-component

Once it is finalised I will link it to this plugins readme file.

If you have anything you have been working on that could help flesh out this process please send it my way!

What exactly have you been failing with? Maybe I can point you in the right direction.

Cheers

from gatsby-source-gravityforms.

robmarshall commented on May 30, 2024 1

This was a great starter. Thanks!

I have updated https://github.com/robmarshall/gatsby-gravityforms-component
Still very much a WIP, but might help you on the next step.

from gatsby-source-gravityforms.

MartinConde commented on May 30, 2024

Thanks for the quick reply,

that repo looks very promising and way more sophisticated than my current approch haha. For now I am still stuck mapping over all the choices of an optionsfield, to get them into a dropdown.

I'm pretty sure I just gotta brush up on some fundamentals but no matter what/how I parse the data, it remains a string. So if you could show an example that maps through a fields choices to display all of them that'd be much appreciated :)

from gatsby-source-gravityforms.

robmarshall commented on May 30, 2024

The field choices are stringified, as specified at the bottom of the readme.

You will need to grab the formFields['choices'] value and then parse it back to JSON. Something like:

let choices = JSON.parse(formFields['choices']) let options = choices.map(choice => { <option id={choice}>{choice}</option> }) return (<select>{options}</select>)

I bashed this out without testing, so may (probably) has errors. But that is how it would work.

from gatsby-source-gravityforms.

MartinConde commented on May 30, 2024

Hm that's pretty much what I've been trying to do but I always get an error "Unexpected token u in JSON at position 0" or similar. Any ideas? Might just be be better to wait for your finalised repo to see where I went wrong ;)

EDIT:
I tried switching to regular JSON.stringify inside /utils/fixType.js and it worked hehe just not sure if by doing that something else will go haywire, I am sure you had your reasons to use javascript-stringify.

So now it looks like this:

case 'choices':
        field[key] = JSON.stringify(field[key]);
        break;

and just a quick try to rendering it worked as well:

<select>
     {Object.values(choices).map(text => {
     console.log(text.text)
          return <option>{text.text}</option>
     })}
</select>

from gatsby-source-gravityforms.

robmarshall commented on May 30, 2024

Nice one! I have pushed that change to this repo. Won't push on NPM until next big change.

Would you be able to share your component parsing? I can see it being quite time consuming, and if you could give me a head start that would be really helpful.

from gatsby-source-gravityforms.

MartinConde commented on May 30, 2024

Sure but still just messing around with it as well. This is my current approach, let me know what you think so I can either keep going into that direction or maybe try something else.

I currently have one Form Component rendering the fields according to their field-type. The component also exports a Fragment so that you can re-use the form with very little effort. Right now I only got textfield, select, radio and checkbox. Might be a good idea to create a component out of each field-type so it doesn't get to messy. This is what I've got so far:

/components/TestForm.js

import React from "react"
import { graphql } from "gatsby"
import styled from "styled-components"

const FormWrapper = styled.form``

const TestForm = ({ formdata }) => (
  <FormWrapper>
    {formdata.formFields.map(function(field, i) {
      let choices = JSON.parse(field["choices"])

      return (
        <div>
          {field.type === "text" && (
            <div key={field.id}>
              <label htmlFor={field.id}>{field.label}</label>
              <input id={field.id} type="text" name={field.label}></input>
            </div>
          )}

          {field.type === "select" && (
            <div key={field.id}>
              <label htmlFor={field.id}>{field.label}</label>
              <select id={field.id} name={field.label}>
                {Object.values(choices).map(text => {
                  return (
                    <option key={`${text.value} + option`} value={text.value}>
                      {text.text}
                    </option>
                  )
                })}
              </select>
            </div>
          )}

          {field.type === "radio" && (
            <div key={field.id}>
              <fieldset>
                <legend>{field.label}</legend>
                {Object.values(choices).map(text => {
                  return (
                    <>
                      <input
                        key={`${text.value} + ${field.id}`}
                        id={field.id}
                        type="radio"
                        name={text.text}
                        value={text.value}
                      />
                      <label
                        key={`${text.value} + ${field.id} + label`}
                        htmlFor={text.text}
                      >
                        {text.text}
                      </label>
                    </>
                  )
                })}
              </fieldset>
            </div>
          )}

          {field.type === "checkbox" && (
            <div key={field.id}>
              <fieldset>
                <legend>{field.label}</legend>
                {Object.values(choices).map(text => {
                  return (
                    <>
                      <input
                        key={`${text.value} + ${field.id}`}
                        id={field.id}
                        type="checkbox"
                        name={text.text}
                        value={text.value}
                      />
                      <label
                        key={`${text.value} + ${field.id} + label`}
                        htmlFor={text.text}
                      >
                        {text.text}
                      </label>
                    </>
                  )
                })}
              </fieldset>
            </div>
          )}
        </div>
      )
    })}
  </FormWrapper>
)

export default TestForm

export const query = graphql`
  fragment FormFields on GF__Form {
    id
    slug
    apiURL
    formFields {
      id
      type
      choices
      label
    }
    button {
      type
      text
    }
    confirmations {
      id
      message
      name
    }
  }
`

/pages/testpage.js

...
import TestForm from "../components/Forms/TestForm"

class TestPage extends Component {
  render() {
    const testform = this.props.data.testform

    return (
      <div>
        <TestForm formdata={testform} />
      </div>
    )
  }
}

export default TestPage

export const pageQuery = graphql`
  query {
    testform: gfForm(slug: { eq: "werben" }) {
      ...FormFields
    }
  }
`

from gatsby-source-gravityforms.

Full example about gatsby-source-gravityforms HOT 7 CLOSED

Comments (7)

Related Issues (19)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent