apostrophecms / apostrophe-sandbox

This sandbox site is the basis for our live demo. For your own projects, you can use apostrophe-boilerplate as a more streamlined, cleaner point of departure via the apostrophe-cli tool.
MIT License
112 stars 41 forks source link

{committing custom form modules #62

Closed stljeff1 closed 6 years ago

stljeff1 commented 7 years ago

I am trying to customize a form. I am encountering two issues that I hope can be reviewed by someone from the PunkAve team.

Issue one, it appears any button will submit the form. I need a file upload field in my form, and I am trying to style the upload field by using a button element to trigger the file upload.

Furthermore, the form will not submit after customizing the form fields. I think I am changing the schema correctly but I'm not sure.

RE: http://stackoverflow.com/questions/41708130/creating-forms-in-aposstrophe-cms

boutell commented 7 years ago

The submit issue has been addressed elsewhere — you need to either set a different type attribute on the button so it doesn't default to submit, or use a click handler that does preventDefault. Either way, nothing to do with Apostrophe as such.

Looking into the other issue — thanks for the test case!

boutell commented 7 years ago

Sorry Jeff, is the widget enabled on a page somewhere? What are my steps to reproduce the problem with this fork?

stljeff1 commented 7 years ago

Sorry for the confusion.

the form is not added.

I am using this code to add the form to a page:

            {{
                apos.area(data.page, 'body', {
                    widgets: {
                        'contact-form': {}
                    }
                })
            }}
boutell commented 7 years ago

OK, after I enabled the modules and added that code I was able to reproduce the trouble.

The issue is that you are not using our fieldset markup, and your own markup lacks the data-name="fieldname" attributes you will see when you look at our markup.

Without these the schema conversion code cannot find the fields.

Currently this attribute must exist on an element that wraps around the actual input element. Such as a fieldset element.

We have tickets open to work on making it more convenient to use this code without our markup:

https://github.com/punkave/apostrophe/issues/800

Also I note that you're working with a file input element. Consider letting Apostrophe make this a lot easier for you. Check out the "attachment" field type (see the apostrohe-attachments module documentation). Just adding an input type="file" element won't do the trick automatically.

On Fri, Jan 20, 2017 at 7:51 PM, Jeff Wilkerson notifications@github.com wrote:

Sorry for the confusion.

the form is not added.

I am using this code to add the form to a page:

        {{
            apos.area(data.page, 'body', {
                widgets: {
                    'contact-form': {}
                }
            })
        }}

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/punkave/apostrophe-sandbox/pull/62#issuecomment-274217800, or mute the thread https://github.com/notifications/unsubscribe-auth/AAB9fYRIKMSn8C5cKPE_NUKOjeaI9z4jks5rUVaQgaJpZM4Lp4z4 .

--

THOMAS BOUTELL, SUPPORT LEAD P'UNK AVENUE | (215) 755-1330 | punkave.com