I would like to use the SeaTable web app or a form contained within it for creating shipping labels in combination with n8n. Since we want to control 4 shipping methods with it, I would like to be able to populate different fields from one form based on a selection of the shipping service provider. For shipping via freight forwarder, for example, I need to specify the pallet size. This is irrelevant for parcel shipping.
Can I have the form adapted based on the initial selection, or do I need to use 4 different forms?
Update:
The second problem i will certainly run into is that i need to display the delivery adress in the form for keeping sure that it’s the right adress. I have read, that it is possible to redirect after form submission. Would that be a solution for both of my problems?
I need two forms in my universal App:
Form 1: input of the shipping number
input of the shipping method
redirect to Form 2
Form 2: based on the entries in Form 1 displays the shipping adress and displays the needed form fields for the specified shipping method.
Hi @ToHo,
I’m glad you asked and really curious about the answers you can get as I have a pretty similar problem… For now, here is the most advanced idea I’ve had, but I still not completely satisfied as you can see in the pros/cons balance. Besides it’s actually not based on a web app but on traditional forms.
Pros
Forms are directly hosted and maintained in SeaTable (as opposed to a tailor-made HTML/JS form coded from scratch)
Each form is independent (you don’t have to deal with complex display rules)
Cons
Need to self-host at least one html file somewhere
Need some HTML/JS skills
Can’t remove the Powered by SeaTable label (I don’t care but maybe you do)
Definitely not the best user experience ever (because of the two successive redirections and the dummy form)
Need n8n (doesn’t seem to be a problem for you)
Now the actual solution:
Create both of your forms. For the first form, you’ll need both a particular text column (let’s call it FormSubmissionID) and a URL column
Create a "dummy"empty form. It could look like this: just a title and a note, you actually don’t need to add any input field to it (of course you’ll have to change the title and the note!)
Set the URL of this dummy form as the redirection address from your first form (you can also add an explicit message such as “Please wait, we’re processing your request” or whatever)
Create an automation (either in SeaTable or in n8n) triggered by the creation of a new row by your first form to compute the actual URL of the second form (for example, choose between the 4 URLs of your different shipping methods, eventually prefilling values depending of the input from your first form
Create a new n8n workflow triggered by a webhook (I’ll detail it just after) and using a Respond to Webhook Node as response
Create an (almost) empty html page just containing an iframe. The body’s background color is the same as in SeaTable forms so you don’t actually see that the form is embbed. As we need a value for the FormSubmissionID column (to be able to make difference between each submission), we can’t directly fill the src param of the iframe, so the body will have an init() function launched at loading
<!DOCTYPE html>
<html>
<body onload="init()" style="background-color:#f5f5f5;">
<iframe id="iframeId" src="#" width="100%" height="800px" style="border-style:none;background-color:#f5f5f5;">
</iframe>
<script>
const firstFormURL = 'REPLACE_BY_THE_ACTUAL_URL_OF_YOUR_FIRST_FORM';
const webhookURL = 'REPLACE_BY_THE_ACTUAL_URL_OF_YOUR_N8N_WEBHOOK';
function init() {
// creating a counter to know when you should actually send requests to n8n
var cpt=0;
// generating an ID for the FormSubmissionID column
const uuid = self.crypto.randomUUID();
const iframe = document.querySelector('iframe');
// setting this src value of the iframe to display the first form (with the FormSubmissionID value prefilled and hidden)
iframe.src = firstFormURL + '?prefillHiden_FormSubmissionID=' + uuid; //'https://cloud.seatable.io/dtable/forms/93cc412c-1040-4903-b4fa-b8ac4b44778f/?prefillHide_Id=' + uuid;
// add an onload event listener to the iframe (detect each URL change)
iframe.addEventListener('load', () => {
// increment the counter
cpt += 1;
// do something only for even values of the counter (as defining the src to the first form URL already increments the counter to 1)
if (cpt == 2) { // possible to check only if cpt == 2 for simple two forms scenarios or to check for 2,4,6 etc. for more complex scenarios with more forms
let data = new FormData();
data.append('formsubmissionid',uuid);
// send a POST request to the n8n webhook
fetch(webhookURL, {
method: "POST",
body: data
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data); // for debugging purpose
// the response data contains
document.querySelector('iframe').src = data.URL
// eventually resize the iframe depending on your form's height
// (unfortunately you can't get directly the height so you have to hardcode this value)
document.querySelector('iframe').height = '1910px';
});
}
});
}
</script>
</body>
</html>
back to 5.: n8n workflow
As you can see bellow, the process is pretty straightforward:
Gets triggered by the POST request on the webhook URL (don’t forget to set Respond to Webhook Node as response!)
Search the row in the table fed by your first form using the submissionformid from the POST request
Do any needed operations in SeaTable. You might not need any if the automation from point 4 already set the appropriate URL for the second form
Send the whole row or only the URL back to your html page with a Respond to Webhook node
Eventually, delete the row if you don’t need it anymore
What will happen when a user fill the first form:
The user opens the html page, the init() function set the iframe src value to the URL of your first form (cpt=1)
The user fills the first form.
Once done, he/she is redirected to the dummy form.
a. cpt=2 as the viewed page changed > the POST request is sent, the onload function of this iframe is waiting for the POST request response.
b. At the same time, the automation computes the appropriate URL value
The n8n workflow from point 5. is triggered by the POST request and sends back to the html page the JSON response containing the appropriate URL for the second form
The src value of the iframe element is changed according to this URL (phew!)
It’s definitely neither perfect nor entirely based on native SeaTable features, but it does work, if the constraints involved (hosting, HTML/JS skills, etc.) are acceptable to you.
Bests,
Benjamin
I love spending time gathering information and explaining solutions to help you solve your problems. I spend… quite a bit of time on it . If you feel grateful for the help I’ve given you, please don’t hesitate to support me. I am also available for paid services (scripts, database audit or architecture, custom development, etc.).
thanks for the detailed answer. as you have already written, it’s not quite that simple. I have therefore decided to design the frontend solution with retool and leave Seatable as the database and n8n as the workflow in the setup. This works very well in combination.
. If you feel grateful for the help I’ve given you, please don’t hesitate to 