Problems with form

[miguelduarte81]

Hi all!

I’ve gone through most of the issues here regarding the submission of forms. Well, this is just one more, because unfortunately, I cannot get this working.

I’m having issues submitting data into a Netlify form.
I’m using Gridsome (Vue.js) as a static builder, Element UI for the form elements, and Axios to submit the data.

The form appears in the Admin UI, but no data is being passed to it.

I can see the data-netlify and data-netlify-honeypot attributes, have the hidden honeypot field and I’m encoding the data before posting.

Also tried just the example code in both the Gridsome and Netlify documentation without success…
Cannot figure out what I’m doing wrong.

Here’s the link for the form, and I’m consoling the data just before posting it.
https://amardesign.netlify.app/en/contact/

Here’s the form code and post action:

Any help would be much appreciated!
Thanks in advance!

[perry]

hi there, can you share the code of the html form you are including in your site with us? I know you mentioned you had read through some issues regarding forms, but just to be sure, did you read this guide?

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

There are many other support guides containing useful information you might find helpful:

https://answers.netlify.com/tags/c/netlify-support/support-guides/52/netlify-forms

[miguelduarte81]

Hi @perry,

Thank you for your reply.

I had a look at the guides, but I’m not rendering the form with javascript, just submitting it. As I mentioned, the form displays in the Admin UI, so I’m guessing the data-netlify attribute is being recognised. When submitting, I’m getting a 200, so cannot understand what really is the issue.

One thing I’ve read in one of your replies actually is that it seems to be an issue with arrays.

Here’s the code for the form (using https://element.eleme.io/ as a component library).

<el-form 
                ref="contactForm"
                name="contactForm"
                :model="contactForm" 
                :rules="rules" 
                label-position="top"
                data-netlify="true"
                data-netlify-honeypot="bot-field"
                @submit.prevent="submitForm('contactForm')" 
              >
                <input hidden name="form-name" value="contactForm">
                <p hidden>
                  <label>Don’t fill this out: <input name="bot-field"></label>
                </p>

                <el-form-item label="Your Name" prop="name">
                  <el-input v-model="contactForm.name" placeholder="Insert Your Name"></el-input>
                </el-form-item>
    
                <el-form-item label="Your Email" prop="email">
                  <el-input v-model="contactForm.email" placeholder="Insert Your Email"></el-input>
                </el-form-item>

                <el-form-item label="Your Project" prop="project">
                  <el-input v-model="contactForm.project" placeholder="Describe Your Project" type="textarea" autosize></el-input>
                </el-form-item>

                <el-form-item label="You are interested in:" prop="services">
                  <el-checkbox-group v-model="contactForm.services">
                    <el-checkbox label="Branding" name="services" border></el-checkbox>
                    <el-checkbox label="Creative Concepts" name="services" border></el-checkbox>
                    <el-checkbox label="Marketing Campaigns" name="services" border></el-checkbox>
                    <el-checkbox label="Graphic Design" name="services" border></el-checkbox>
                    <el-checkbox label="Web Design" name="services" border></el-checkbox>
                    <el-checkbox label="App Design" name="services" border></el-checkbox>
                    <el-checkbox label="Web Development" name="services" border></el-checkbox>
                    <el-checkbox label="App Development" name="services" border></el-checkbox>
                    <el-checkbox label="E-Commerce" name="services" border></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="Project Budget (GBP)" prop="budget">
                  <el-radio-group v-model="contactForm.budget">
                    <el-radio label="< 1K" border></el-radio>
                    <el-radio label="1-5K" border></el-radio>
                    <el-radio label="5-10K" border></el-radio>
                    <el-radio label="> 10K" border></el-radio>
                  </el-radio-group>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="submitForm('contactForm')">Submit</el-button>
                </el-form-item>

              </el-form>

And here’s a sample of the data being passed.

form-name=contactForm&name=Miguel%20Duarte&email=info%40miguelduarte.me&project=Awesome&services=Branding%2CWeb%20Design%2CWeb%20Development&budget=%3C%201K

Thank you again for your time.

[perry]

hi there, just checking in to see if there have been any changes here? I have been thinking about this and I am honestly not sure what to suggest - but maybe you have made some progress?

[miguelduarte81]

Hi @perry, unfortunately, I haven’t made any progress on this, as I’m not sure what else to try…
I will probably need a different solution instead of using the Netlify Forms.
Cheers.