Embed forms in another website

Hi,

Does anyone have experience with embedding form components in another website?

I have used a tadabase form in a number of external websites. Can i help?

@mtif

Thank, yes, could you share an example? Because did you embed the full page or just the part of the page which contains the form?

Hi
Sadly I can’t share as our working examples are all in production sites (client specific and not for public view).

But I can tell you I have used two ways to integrate components.

  1. The first is obvious, using the embeddable component function in Automations which builds a table that will render in a webpage. Its a good way to do it, as the page renders without an iframe and integrates easily (for me at least). Of course you need to access the source HTML source for your webpage. I have used this for Tables only.

  2. The second way is how I have integrated forms.
    I use a standard form that varies (slightly) by the web page that its rendered upon, and I want to record page its coming from. To do this I created a distinct Layout Template in Tadabase, with nothing else on it - just the from.
    I set one hidden field in the form to ‘get value from URL’ and then set Form Rules that will use that result to complete some fields, hide others (basicially to ‘tune’ the form to the specidic page).

I have to use iframe to integrate this way, but I can handle styling issue at source (and mobile access in not an issue for my purposes). But because I am using iframe I am calling a full URL source and can ‘dope’ the URL with the ?&parameter=XX that I need to tune the form to the page.
This has taken a while to set up, but works a treat and I have a flexible form that is used on multiple pages.

I hope that helps - sorry can’t show an example

replace “https://jinnsystems.tadabase.io/” with your own Tb form.
Your website domain has to be registered with Tb else it doesnt work and iframe will display tb error msg. Its not responsive though.

ty<!DOCTYPE html>
<html>
<body>

<p>An iframe with no borders:</p>
<iframe src="https://jinnsystems.tadabase.io/" width="100%" height="300" style="border:none;">

</iframe>

</body>
</html>

@mtif
@Shumon

Thanks both for the reply. I managed the thing I wanted and I use an embedded component (table item).
Just one thing, I would like to show an image ( in fact a logo) per line item in my table. Is it possible to show an image in an embedded data component which is showed as an image (containing a link) and not by the link text.

I tried to do it with a “details” link button first, but details link buttons don’t work in embeddable components, since I embed the table directly and not the page which contains the table (due to lack of responsiveness).

I’m glad this worked for you.
And regarding your other enquiry I think I understand that you want an image, but the table only has the URL of the image at the moment.

If so, what I have done before is a to create a new field using the formula creator (and the concat function) to create the HTML you need to put into the target page.

ie: A new field that contains <img src={field_XXX} … etc>
And of course when you have this working you can extend the same idea to add the URL link.

I hope that makes sense

The image field was taken out by tb last year and is no longer an option. Might be possible using the html route.

heres another option. create new table field with type ‘Link’ and select ‘Format link as image’ in the options list for the field.

@Shumon

No, this option doens’t work, because it shows the actual link and not the image.

Summary

This text will be hidden

lots of different ways to do this. List, Table group, basic table, accordion all shown below.



Your right, the link field type doesnt work when ‘Format link as an image’ is selected. Thats a TB bug which Tim or Chem need to resolve. As a work-around what you can do is use a Rich Text field type and use following code: change “… Picture2.png” with your “…6077.jpeg”
and replace “https://www.w3…” with your link address which appears to be the jpeg image its self.

<p><a href="https://www.w3schools.com/tags/tag_img.asp"><img src="upload://ibpNCSCyUBxSVJzzARc1rfIHvOL.png" alt="test" width="47" height="46"></a></p>