SAB Form

  • Hey guys


    Some asked for a simple form extension. I just uploaded a beta version to the marketplace. Install it, head over to https://github.com/IamSAB/pagekit-form checkout the readme and copy its first form example to your pagekit editor on a random site to get started.

    Remember to set before the SMTP mail configuration correctly. I couldn't figure out, how to get PHP Mailer working ...

    Feel free to open issues or enhancements on github itself. Pull request are also welcome. Hope this extension meets your requirements.


    Don't forget about Christmas and what it is about. Enjoy it.


    Cheers,

    SAB

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • SAB 😀😀😀


    sounds fantastic, is it uikit v3 compatible?


    Regards,


    Fossy


    edit:


    i checked the source code looks like you use your own marginal css and it's extendable as the Form itself can be customized plus multiple instances on one page? 😍😍😍 This sounds just like freedom finaly on forms in pagekit.

  • You setup the forms with native html, how you style it is up to you.


    The extension only wraps your form with a template and mounts it with vue js application to be able to submit form data to the server, which sends the mail.

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Good afternoon,

    I installed the extension and then pasted the example code from the extension's documents page:



    I tried to save the page but my system stalls and I cannot safe the page. What am I not getting?

  • Good afternoon,

    I installed the extension and then pasted the example code from the extension's documents page:



    I tried to save the page but my system stalls and I cannot safe the page. What am I not getting?

    Hey there,


    i found in the github documentation following:


    Quote

    HTML 5


    • types: email, url, number, range, color, date, datetime, datetime-local, month, search, tel, time, week
    • attributes: required, pattern

    This validation type is dependend on the client browser!

    When using e.g. the required attribute in the backend, the save button does not work. Use instead Ctrl+s, then the form is saved.

    Would you try to hit ctrl+s to save the form?


    Thanks in advance and regards


    Fossy

  • The required attribute prevents the submission/saving the page. Using Ctrl+s it does work. If its still not working use v-validate:required instead and remove required.

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Hoi SAB . Thanks for the plugin. Once @Foesphatic Duke directed me to use SMTP, it worked. However, my own plug (Mercator Gallery) seems to stop working. For example, on mercator.li I am displaying on the front page a random image using the command

    Code
    1. (mercator_gallery){"files":"Frontpage/*", "position":"left", "mode":"randomimage", "columns":"1"}

    This suddenly does not display the image when I install your plugin. Once iI disable your plying it works again. Interestingly:


    Code
    1. (mercator_gallery){"files":"Frontpage/*", "position":"left", "columns":"1"}

    works.. I don't get it (yet).

  • Hoi SAB . Thanks for the plugin. Once @Foesphatic Duke directed me to use SMTP, it worked. However, my own plug (Mercator Gallery) seems to stop working. For example, on mercator.li I am displaying on the front page a random image using the command

    Code
    1. (mercator_gallery){"files":"Frontpage/*", "position":"left", "mode":"randomimage", "columns":"1"}

    This suddenly does not display the image when I install your plugin. Once iI disable your plying it works again. Interestingly:


    Code
    1. (mercator_gallery){"files":"Frontpage/*", "position":"left", "columns":"1"}

    works.. I don't get it (yet).

    OK, solved. This triggered an error on my end - no idea why it did not show up previously. The form now works really great!

  • SAB


    could explain please how this div success and div error thing works?


    we tried to make a modal with success or error message but somehow it don't work at all. At least not the way expected.


    However I never seen before that div is without ID or class before the name of it. Probably you have an idea how to implement uikit 3 native modal. As Form we used the provided example an when we do the anchor on submit button then modal is shown and email is sended, but in the moda we do see the success and the error div unfortunately. Same if we. tried the p class example inside of the modal.


    Regards


    Fossy

  • Fosphatic Duke : Good morning!


    SAB : Great stuff!. One more thing, Fosphatic Duke and I tried to get rid of the frame around the form when using Fosphatic Duke 's UIKit3 theme. And we were only able to by changing the views/form.php code to:

    The only change is in line 3, where it seems the fieldsets were turned off in the original code. After that it worked just great.

  • One more: I have copied and pasted a UIKit Form example:


    Originally it looks like the the first attachment (as expected)m, but the "SAB-formed" does not (second attachment). Any ideas?

  • Fosphatic Duke the success and error attributes are just replace with v-show="status == 2" & v-show="status == 3". you can also just skip this & use directly vue js syntax for hiding/showing on different from status.

    Mercator i only wrapped all inputs in a fieldset to disabled them all at once. propably the grid does not work inside a fieldset in uikit v3. if you want to get rid of the frame, just remove the fieldset tag an place a v-show="status > 0" as form attribute to hide the form after submit.

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Thanks sab this probably will do the job. The Grid thing mercator is complaining about is probably because he tries to use a new syntax that was not available with uikit rc 20 or 21 i don't remember when i have updated it last time. Well however they add more syntax now in the documentation in forms section so that's why i guess upgrading uikit first should solve his problems. Actually I'm unmotivated to merge the latest uikit version somehow as i hope that they will release a final candidate soon, as it is annoying to get an update or two each week like and it cost me around 2 hours to merge the new version with template modified css version at all.

  • Hi SAB and Fosphatic Duke !

    After hours and hours, Fosphatic Duke and I almost "killed" our "online friendship" but finally The Duke reviewed again SAB 's documentation. Below is a pretty nice and responsive contact for people to use. It was tested with UIKit3 (RC20 or so).

    Again, thanks to SAB for the great plugin and Fosphatic Duke for his patience.


    By the way: Bixie form has been removed from my system as this nicely serves the purpose.

  • Fosphatic Duke the success and error attributes are just replace with v-show="status == 2" & v-show="status == 3". you can also just skip this & use directly vue js syntax for hiding/showing on different from status.

    Mercator i only wrapped all inputs in a fieldset to disabled them all at once. propably the grid does not work inside a fieldset in uikit v3. if you want to get rid of the frame, just remove the fieldset tag an place a v-show="status > 0" as form attribute to hide the form after submit.

    Thank you, SAB . I finally adapted views/form.php to have no borders. In order not to break any other css, I changed the third line only:

    Note that I check for "status < 3" as in case of an error I want the form to stay.

  • Just to give a preview. I nearly rewrote the form extension in a better approach (in my opinion). It is not yet published as it integrates with pagekit captcha which is broken right now, but I plan to as soon as they fix it.


    https://github.com/IamSAB/page…/tree/dev/better-approach


    For you guys nothing much changes, check the changelog for that.

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7