Conditional Forms in Web-App

User Talk Webforms
1

Your Setup:

  • SeaTable Cloud

Describe the Problem/Error/Question:

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.

2

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:

  1. 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

  2. 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!)

    dummy_form
    dummy_form853×367 14.1 KB

  3. 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)

  4. 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

  5. Create a new n8n workflow triggered by a webhook (I’ll detail it just after) and using a Respond to Webhook Node as response

  6. 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:

  1. Gets triggered by the POST request on the webhook URL (don’t forget to set Respond to Webhook Node as response!)
  2. Search the row in the table fed by your first form using the submissionformid from the POST request
  3. 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
  4. Send the whole row or only the URL back to your html page with a Respond to Webhook node
  5. Eventually, delete the row if you don’t need it anymore

What will happen when a user fill the first form:

  1. The user opens the html page, the init() function set the iframe src value to the URL of your first form (cpt=1)
  2. The user fills the first form.
  3. 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
  4. 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
  5. 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 :sweat_smile: . 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.).