Getting Started with Multi-Form Components in Relume | Relume Community

Getting Started with Multi-Form Components in Relume

Hello, I'm new to Relume and trying out one of the Multi-Form components on a site I'm building. (Multi Form 11) Where can I find documentation on how to move from designing the form to getting it running? I noticed there's a link to the Formly site, but I feel like a kid who's been moved to a new school and dumped on the front door step. Not sure where to go from here! https://preview.webflow.com/preview/jeffs-outdoor?utm_medium=preview_link&utm_source=d[…]&pageId=66f6d3dc8690808b928d8589&locale=en&workflow=preview

84 comments

Mark D.
·
Hello??
Matt J.
·
Mark D. Have you seen our doc on it here? https://www.relume.io/resources/docs/how-to-use-formly-with-relume If so, and its not quite answering your questions - just let me know what questions you have and I'll be more than happy to guide you.
❤️1
Mark D.
·
Thanks Matt. No, I hadn't seen the article, thanks this is useful! I guess I was a bit confused about whether this form component was built in Formly. I realize it's implied, but think it would be helpful if this was explicitly spelled out in the details section, just to be clear for those of us that are still new to the site and figuring everything out! (For example: This component is built using Formly, and requires a Free Formly plan to use on your site.)
Matt J.
·
Thanks for the feedback!
👍1
Mark D.
·
Definitely! I'm working through the article, and had a question?
Mark D.
·
I'm in the section "How Formly is implemented into Relume components" ... do I need to add all 5 of these attributes to the form?
Matt J.
·
I believe the components should already have these attributes but their may be some optional ones mentioned as well.
Mark D.
·
Hmmm. Mine doesn't have any of these attributes. I guess I have to add them in manually.
Mark D.
·
OK, I've added the attributes, but after publishing the site and trying to test the form, it doesn't work at all. Any thoughts?
Matt J.
·
Mark D. would you mind sharing a read-only link?
Mark D.
·
Sure. https://preview.webflow.com/preview/jeffs-outdoor?utm_medium=preview_link&utm_source=d[…]&pageId=66f6d3dc8690808b928d8589&locale=en&workflow=preview
Mark D.
·
The buttons mark the bottom of every page. There will eventually be about 3x the number of pages as this, just trying to get a simpler version up and running first.
Mark D.
·
Hey Matt J., was wondering if you've had a chance to take a look at this? 🙂
Matt J.
·
Mark D. ah apologies - I would also need the published URL - but I'll be around so I can jump on it and we can get this resolved quickly for you.
❤️1
Mark D.
·
Thank you!! Sorry to be so needy on this. 😣 https://jeffs-outdoor.design.webflow.com/?locale=en&pageId=66f6d3dc8690808b928d8589&workflow=sitePreview Does this work?
Matt J.
·
Mark D. okay that wasn't the published URL but I figured it out - found the form - and I'm seeing a few things that you might want to fix - one of which is taking the buttons out of the component - I have a feeling thats messing things up and I'm not sure the reasoning behind that. The next thing would be making sure the "back | submit" buttons are actually in a step.
Matt J.
·
fix those things, and then publish and then let me know - unfortunately we'll have to go back and forth since I have no way of testing any changes since they need to be published.
Matt J.
·
also no apologies necessary - this is my job - happy to help - we'll get this working for you, guaranteed!
🙌1
Mark D.
·
OK, I've made these changes, and tried publishing again. But nothing appears to have changed.
Mark D.
·
I noticed that the radio buttons don't appear to work either. I can't click on them to select one of the two options.
Matt J.
·
yeah radio buttons will be their own set of attributes which I believe was mentioned in the doc
Matt J.
·
and by attributes, I mean an additional JS
Matt J.
·
Mark D. the form seems to be working fine - but you have to actually fill it out - placeholder text doesn't count as data being filled in - I think the placeholder text is pretty confusing and since you seem to have labels above them, might not be necessary - for testing purposes, I would not have any required fields.
Matt J.
·
and which radio buttons weren't working for you? They all seemed to work. Its the fancy radio buttons that need additional JS but I didn't see anything fancy in that form.
Matt J.
·
I guess being more specific about what isn't working with the form would be helpful - was it not going through the steps, or you just couldn't submit the form?
Matt J.
·
ah its because the submit button is not a form button but just a link block. I had thought we had resolved this. You'll just need to drag in a "form button" and then give it the same classes, and it should submit fine
Mark D.
·
Do I need to do something different to test the page besides just hitting the Preview button?
Matt J.
·
yeah you'll have to publish and test on the published URL
Matt J.
·
since its relying on custom code to work, you can't preview custom code https://jeffs-outdoor.webflow.io/book-now/contact-us
Matt J.
·
webflow.io is the published URL - you can grab it from the published window
Mark D.
·
oh man. I had no idea.
Matt J.
·
no worries
Matt J.
·
today, your webflow skills will grow exponentially - let's go!
Mark D.
·
I didn't realize the preview feature didn't have the same functionality as the published URL.
Matt J.
·
I know
Matt J.
·
wild huh?
Mark D.
·
seriously! I'm definitely still new to learning Webflow, so appreciate your patience.
Matt J.
·
all good
Matt J.
·
I've got patience for days
Mark D.
·
ok! I'm working on your note about the Submit button.
Mark D.
·
but tested out the form and yes, everything else seems to be working so far.
Matt J.
·
sweet
Mark D.
·
Can I use my existing button class for the Submit button?
Mark D.
·
I think that's what the problem was, something about the class broke the button.
Matt J.
·
yep for sure
Matt J.
·
naw
Matt J.
·
the function of the form button is completely different than that of just a link that is styled like a button
Matt J.
·
even the "button" element in Webflow is just a link (<a> anchor link in html) which is a bit misleading. One of the many UX issues (and accessibility) of Webflow.
👍1
Matt J.
·
not saying the class couldn't mess with the functionality but I didnt see anything that would cause that within the class and classes are generally just styles being housed within the class (this of course is also not "always" the case).
Mark D.
·
Don't want to say "called it" but just went back and added a new Form Button, and this time didn't change anything, and published and the form worked. 😉
Mark D.
·
So now I'm wondering if I should delete my button class and build a new one.
Matt J.
·
so you're saying you grabbed a form button and added your class and it didn't work - but grabbed a new form button and didn't add the class, and it worked?
👍1
Matt J.
·
are you sure you didn't have it inside of the green component or something?
Matt J.
·
I do see a couple of unnecessary styles with the button class but I dont know why that would prevent the form from submitting so I just think its something else but regardless, we got the form working so hooray
Mark D.
·
Yep. That's exactly what I did.
Mark D.
·
No I don't think so. I went back and detached all the button components.
Mark D.
·
Yeah, I need to clean up and delete my unused styles. I'm still finalizing the design for a number of pages.
Matt J.
·
yeah nice
Mark D.
·
What's strange is that I'm trying to create a new class for the Submit Button, but it's affecting the other buttons ... even though it's not using any other classes.
Matt J.
·
hmm might need a screen recording with no audio for that one
Mark D.
·
sure. just a minute.
Mark D.
·
I think I figured it out actually.
Mark D.
·
(shocking I know. 😂)
Mark D.
·
I think my next challenge with this form is setting up conditional logic.
Matt J.
·
yeah....that'll be fun lol
Matt J.
·
you'll need a premium version of formly for conditional logic though.
Mark D.
·
Yep. I'm going to wait until the site is ready to launch first I think.
Mark D.
·
How difficult is adding the logic?
Matt J.
·
its mostly keeping track of it - if its as simple as a fork like "answer 1 goes to A answer 2 to B" its not so bad, but when it starts to get more complicated than that, it gets tough to keep track of and test.
Mark D.
·
This form shouldn't be too bad. There are multiple places where the logic will be added, but it's usually an A/B split.
Matt J.
·
nice
Mark D.
·
I have one final question for you, and then I think I should (fingers crossed) be good to go.
Matt J.
·
meh ask as many as you'd like!
🔥1
Mark D.
·
I've been trying to make the checkboxes/radio button spaces larger but been having troubles. Is this just about adjusting the styles like any other element, or is there a trick to it?
Matt J.
·
can you snap a screenshot of what you are trying to adjust specifically?
Mark D.
·
Mark D.
·
I'd like to change the color and width of the border of the radio button.
Mark D.
·
I was able to adjust the size, but it's throwing off my vertical alignment. I'm sure I can figure that part out.
Mark D.
·
#famouslastwords
Matt J.
·
ah sure so then you are talking about a custom radio button or "fancy" as I referred to it earlier and you'll need to use this JS https://finsweet.com/attributes/input-active You could use one of these as a basis for your customizations: https://www.relume.io/ui-elements?ui-elements-categories=radio-buttons
Mark D.
·
oh that's a great starting point. yeah, it doesn't need to be "fancy", the boxes just felt a bit on the small side.
Mark D.
·
thanks so much for all your help. I really appreciate it.
Matt J.
·
no problem Mark - welcome to Relume and Webflow - together they'll change your life! Any more questions, you know where to go!
🙌1
Mark D.
·
If I can make a suggestion to pass along ... the text document you linked at the start of all this included a lot of this but it was a bit difficult to understand and digest as someone who's new to WF and Relume. It might be helpful to add more detailed instructions, and examples, painfully spelling out the details of what to do and walking you through it step by step.