NoCodeJac

I run a tech recruitment company and build #NoCode tools for businesses to automate processes and explore new ideas.
Hi Makerpad friends - We are opening up this project today for new beta users. If you are semi-remote or your company is starting to return to an office I would be very greatful for any feedback or ideas. The landing page has a live demo of the app on if you want to check it out!

www.toggledesk.com

We have a few beta users signed up already and the feedback so far has been really useful. The plan is to launch is a few weeks once we have some more beta feedback and have added some key features (am/pm booking, more powerful reporting etc)

Wait....is this nocode?

We prototyped the app in glide + webflow before moving to code and the landingpage / marketing will always live in webflow. Prototyping the app first is such a great way to figure out exactly what you want and how it should work - the whole project from idea to beta has taken ~2 weeks.

Please give the launch tweet some love too if you can :)
Hey NoCodeJac
spotted some misspelling "Set custom attedance rules". Besides that, we are a semi-remote company at least till December but we are based in France. Don't know if it's an issue. If not, I can check it out.
Sorry for the slow reply - thanks for the heads up on that error!

We have some people joining from France and other parts of Europe too so all fine. Let me know if you want me to set you up (easiest if you put your email in to the website and ill get back to you today).
Matt Evans just told me about Dorik and it looks *really* good. Integromat integtation + lifetime deal is an instant buy for me! Thought i should share before the deal runs out - enjoy!

https://dorik.io/
Subscribed for the lifetime offer as well! I used Carrd before but dorik.io is way easier to use (I'm new using no-code tools). Also, the integrations in their roadmap seem very useful. Lastly, the customer service is exceptional.
Mizan replied
  ·  1 reply
Does anybody know what tools were used (or could possibly have been used) to build Dorik? As their website states "Made by Dorik with ❤️ without writing code" and I'm really curious how?
Mizan replied
  ·  3 replies
Firstly - I am terrible at design. You need to make this look nicer if you want to use it! You can style the 2 containers, you just need to make sure that the IDs correspond with the IDs in the code.

https://priceswitch.carrd.co/

A code embed makes this work - a css switch from w3schools and a little bit of JS to show/hide sections when you use the toggle. If you scan through the code you can change parts of it an experiment. Put all of this in one code embed.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}

.switch input { 
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}

input:checked + .slider {
 background-color: #2196F3;
}

input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}
</style>

<span style="margin:16px; position:relative;top:8px; font-family:Nunito,sans-serif;">Monthly</span>
</head>
<body>


<label class="switch" >
 <input type="checkbox" checked id="toggle">
 <span class="slider round"></span>
</label>
<span style="margin:16px; position:relative;top:8px;font-family:Nunito,sans-serif;">Annual</span>
</body>
</html>

<script>
const toggle = document.querySelector('#toggle');

toggle.addEventListener( 'change', function() {
 if(this.checked) {
document.querySelector('#earlypricing').style.cssText = 'display:block;';

document.querySelector('#normalpricing').style.cssText = 'display:none;';

 } else {
document.querySelector('#earlypricing').style.cssText = 'display:none;';

document.querySelector('#normalpricing').style.cssText = 'display:block;';

 }
});
</script>

<style>

#btn2 {display:none;}
#normalpricing{display:none;}

</style>

If you want this please DM me on twitter / in slack with your email address and ill send you a copy.

https://twitter.com/NoCodeJac


code on a 'no-code' community - who would've thunk it 😅
NoCodeJac replied
  ·  3 replies

Getting data from your forms in Webflow is a bit fiddly. You can go via something like Airtable to make it easier and that is especially useful if you are using airtable as your main backend. However if you just need forms to go back into the webflow CMS there is an easier way! This might seem a bit fiddly but once you have it set up you can pretty much forget about it - you only need to use standard Weblow + text aggregator modules.

Integromat makes this really easy (1000 free operations / month).
Each part of the submission is compared with your webflow CMS so that single-reference, multi-reference, options etc can all be handled. You dont need any custom code and you dont need any hidden CMS IDs attached to your values. My set-up is:

My form name is the same as my CMS collection name, ‘Restaurants’ in this example. The Restaurants CMS collection looks like this:

The Integromat scenario is triggered by a new form submission in Webflow, this is what the data it gets looks like:

For the single reference (SREF) we need to know the Webflow ID that corresponds with the form entry ‘Italian’. So the first thing we do is pull in all of the available options for that collection (Webflow “List items module”):

Now we filter the data so only the CMS item with the same name as the option the user selected gets through:

Now that we have the option from our collection matching the user choice we just need to grab the Webflow ID:

The next module pulls in all of the options in my multi-ref CMS field:

The data from our form looks like this — MREF Service Types: Eat In,Take Out. So we need to split them up and then do the same thing we did for the SREF.

Here we are saying only let through the CMS items that also match one of the individual choices in our form selection. Now we want to get the CMS IDs for each item that gets through the filter:

(Note that we added in a comma seperator here!)

The next multi-ref is very similar but this time we had checkboxes as an input so the filter needs to be modified.

Here we are telling the filter to see if the form data contains the CMS item name, if it does then it will return true and let that CMS item name through the filter.
Then we do the same thing again, grab the CMS IDs and put them in a text string with a comma seperator:

Now all we have to do is tell Webflow what to do with our data!
My Create Webflow Item module looks like this:

The SREF ID can go straight in, each of the MREFs needs to be put in to an array (because thats how Webflow expects it). The bitcoin Yes/No option looks complicated but the module has the corresponding ID suggestions for you underneath the input. This formula is just saying “if accepts bitcoin = true, this ID, if not, this one”.

Things to keep an eye out for — your form option values must be the same as the CMS names. If you have “Italian” on the form and “Italian Food” in the CMS you can still get it to work like this:

Here is the final result, in all its glory:

Suggested improvements! This scenario is watching for form data and sending that form data to my CMS but you will probably have more than one form and will probably want the data to end up in a different CMS collection. If you add in a router after the trigger then you can use the form name and a filter to send each form to the correct modules.

Thanks to my friend Ness for all of your help with this!
If you like this you can follow me on Twitter for more automation / nocode ramblings. I’ll also share the scenario for this in my automation newsletter next week (link in Twitter bio).

Love the breakdown NoCodeJac! 🤩Thanks for taking the time to put this together!
This is next level! Thanks for sharing!
Thank you for sharing :-)