Sérgio

Co-founder & CTO @ Bondlayer
I love coding, gaming, rock climbing, trekking and enjoying nature.
Hi Petr. Right now our forms only work with third parties like formspree, formkeep, getform, Mailchimp, and many others https://css-tricks.com/a-comparison-of-static-form-providers/

We do intend to launch a feature called Collection Forms soon (it's one of our main priorities right now) that will enable users to submit content to collections and, if needed that content can be listed on the site or just forward to different emails.

Right now you can use one of the services I mentioned before.
You can add a form and the necessary fields using the UI elements panel and then customize the form URL to your form provider (ex: formspree) and change the method to POST. Then you must likely receive an email validating the service so that the next users can submit the form without issues.

Hope this helps!
Best regards

Example images:
Hi!

You have to create different fields in the collection (Image and File) and then create 2 separate blocks inside the flex item.  Select each block and add a dynamic visibility condition using the Data panel.

Select the attribute of you want (File) and select "Is Set"

Repeat the same procedure for the image/photo.

So each block will only appear if the corresponding value is filled in the CMS. 

Hope this helps!  


Hi!

This animation involves a external library as it requires splliting the words into chars and animating them sequencially.

This can be achieved using a library like "Splitting.js" and using custom css.

You can load external libraries on bondlayer using this custom code method:

var splittingJsUrl  = "https://cdn.jsdelivr.net/npm/splitting@1.0.6/dist/splitting.min.js";
bond.loadScript(splittingJsUrl, function(){
  // my code here
   Splitting();
});


  1. You need to create a text element, and add a custom attribute called "data-splitting" with the value "chars"
  2. Add the script to invoke the library and begin the animation in Settings > Custom code 
  3. Add the necessary CSS to the animation

    Publish and check the animation!

    Result: https://sergio.bondlayer.site/demo-splitting/ (this is just a demonstration, you have to adjust to your specific needs)

You can check the splitting guide here for more detailed info on how to use
https://splitting.js.org/guide.html#what-is-splitting

Check some demos and the CSS used and try to adjust to your needs.
https://codepen.io/collection/XpROaV/

I've attached the custom code i've used in the demo.

customcss.txt
477 Bytes

customjs.txt
173 Bytes

Hope this helps.
Cheers!



Welcome to the Bondlayer community! 😀😀 We hope we can help you make great stuff 🥰
Hi Rui! Thanks for the feedback! that's something in our plans for the upcoming weeks. We are going to make an official launch very soon.
Stay tunned!