How to embed a form in another page in Softr?

Hello,

I have a requirement similar to what is explained in this Youtube video

I followed the same where I created a page with just a Customizable form which has only one button. I mapped that to a table with 2 hidden fields. I’m now trying to embed this form in another page which is a list block.

When I add a field type of Embed, I only see the fields mapped against the list block. I don’t see an option to mention the other form (with single button). What is that am missing? Here is a screenshot:

image

Any help will be great help. Thank you!

Hi @prettycold let me share the steps that should be taken one by one. Let me know whether you added the formula fields or not.
Note that on the Form block page, there should be no other blocks but only List Details, no headers, footers, and the paddings should be reduced to the minimum and no other fields should be visible.

  1. Create a page with Form and 2 hidden fields - logged-in user’s email or recordID, URL parameter recordID (e.g. /cart)
  2. Create a formula field in Airtable (field name: Add to cart Formula)

CONCATENATE('https://angelia-723.softr.app/cart?recordId=', RecordID())

Instead of https://angelia-723.softr.app please use your Softr app’s subdomain.
Instead of /cart please use the path of your Form block page

  1. Add a new Airtable Formula Field with the following formula:

CONCATENATE('<iframe class="airtable-embed" src=','"', {Add to cart Formula} ,'"',' ','frameborder ="0" onmousewheel="" width="100%" height="50" scrolling="no"; style="background: transparent; border: 0px solid #ccc;"></iframe>')
Instead of Add to cart Formula field select the field from step 2.

  1. Add an embed field on the List block from where you would like to Add to Cart and map it to Button Snippet field from step 3

You can also send me a published page link If you went through all of these steps for me to check what is missing.

1 Like

Let me follow the steps you mentioned and update you in a bit. Thanks so much!

1 Like

When I give this formula in Airtable, I get “Sorry, there was a problem creating this field. Unknown function names: RECORDID”

And yeah I gave my app’s url and instead of /cart, I gave /bag as I’d named the button as “Add to bag”, the name of table in Airtable in Bag

@Maria - I followed the steps, but it doesn’t work. Regarding the RecordID() error, I fixed it by changing it to Record_Id(). So that part is fine.

With respect to the hidden fields, I’m not sure to which field should I map them to as I added only those 2 formula fields in “Bag” table.

Here’s a quick context. i have a list-block that displays Books that come from a Book table. I’m trying to provide a “Add a Bag” button beside each book, so that when clicked that particular book goes to the User’s bag (similar to a cart).

Try this one CONCATENATE('https://angelia-723.softr.app/cart?recordId=', RecordID() )

and make sure you place the last bracket “)” a bit further from the other brackets so that Airtable recognizes the record id formula. If it is recognized it becomes green.

https://mindful.softr.app - This is my published URL

Which page should I check?

/member-book-list is where I’m trying to add the form button.

/add-to-bag is the page where I added just a form and a button.

I don’t see the embed field there so I guess you are still having a hard time connecting it. Would you mind sharing some screenshots from your data source where all the formulas used and fields are visible as well? you can send in DM as well. As well as would appreciate If you could add support@softr.io as a collaborator to your studio.

Great, I sent an invite to support@softr.io as a collaborator to my app.

Yes, embed field, I did not add as the content does not show the form button as an option yet.

Let me see how to send the screenshots in a DM.

1 Like