Forms, input fields and member details in hidden fields

Off-topic
1

Hi and thanks in advance,

My content within ghost for free subscribers comes in the form of interactive forms vs static written content. I use tally.so for my forms.

I simply want to make sure that every free subscriber who is logged in does not have to fill out their name and email address every-time they fill in the form to get a respondent notification (sent by tally).

So the tally form somehow grabs their name and email address from ghost and inputs into a hidden fields in tally.so (form tool) and then send them the results of how they went/answered.

I understand ghost have attributes: @member.email @member.name but i just don’t understand how they feed into the hidden fields and how it works.

Thanks again,

Rogue

2

Based on the kb here:

It looks like you need to add something like this to your theme:

<iframe src="https://tally.so/embed/nPdDxn?{{#if @member.name}}name={{@member.name}}&{{/if}}{{if @member.email}}email={{@member.email}}{{/if}}" ... />

If you’re trying to do it with code injection, you’ll have to fetch the member data, something like this (not tested):

<script>
async function updateUrl(iframeElement) {
  const {name, email} = await fetch('/members/api/member').then(r => r.json());
  const currentUrl = new URL(iframeElement.src);
  if (name) {
    currentUrl.searchParams.set('name', name);
  }

  if (email) {
    currentUrl.searchParams.set('email', email);
  }

  iframeElement.src = currentUrl.toString();
}

updateUrl(document.querySelector('iframe[src^="https://tally.so"]'));
</script>
3

Thank you so much for helping out. Your code with the form ref 3Ek1vX brings up an error on the test page: Domain error

I also have tried the following two embeds and whilst they show up, they do now input the member name or member email into the hidden fields in the form.

Surely there is a way… I am not familiar how or where I would inject that script or what to modify.

Thanks again for your kindness and responses.

4

Can you try using https://tally.so instead of just tally.so? I forgot to include the scheme, and without it, the URL resolves to https://test-profitable-questions.ghost.io/see-if-member-details-parse-on-in-a-tally-form/tally.so/embed/3ek1vx/

5

Thanks but it isn’t passing them member.name or member.email into hidden fields into tally at all. I don’t know what else to try.

6

Are you adding this via code injection or as part of your theme? If it’s done via code injection, you need to use the other method I shared. If you’re adding this via an html block in the editor, you have to use code injection.

7

Oh Apologies for not understanding. I tried the code injection in conjunction with the html and it did not result either.

If I added it to theme would I not have to download theme and upload everytime I added a form to the blog?

8

I don’t see the iframe or the injected code on https://test-profitable-questions.ghost.io/see-if-member-details-parse-on-in-a-tally-form/ - did you remove it? Make sure both parts exist!

If you created the URL via your theme, yes, every time you want to add a new form you would have to upload a new version of your theme. I would recommend code injection if you have multiple forms.

1 Like
9

I will have a fresh look at it today and see if I can make it work. Thank you for such a generous effort to help me.

10

@goneroguenow did you ever get it working?

I’m trying to do something similar. I want to embed Tally forms into my posts and to pass the member email address (if available) as a query string.

Is this possible to do inside a (any) post? I had a quick play with the HTML embed block but it can’t parse the “#if” or “@member.email”. Is there any way that I can make this work?

Also, the email address will need to be URLencoded so how would you do this?

11

Here’s a way to embed a Tally form into a post and pass the member’s first name & urlencoded email address to the form as “hidden fields” (You could use the logic to create a custom contact form page).

This assumes you have the ability to create a custom post template. (Ref How to Make Custom Templates in Ghost Themes)

Create a custom post that looks similar to the following; (copy everything under {{ content }} and before </section> and insert under the {{ content }} line of your template)

<section class='c-content {{#unless access}} c-content--has-shadow {{/unless}}'>
    {{ content }}

    {{#if @member}}

      <iframe id="thetallyembed" data-tally-src="" loading="lazy" width="100%" height="" frameborder="0" marginheight="0" marginwidth="0" title="What content would you like to see?"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

      <script>
        let var_email = "{{@member.email}}";
        let var_name = "{{@member.name}}";
        let var_firstName = var_name.split(' ')[0];
        let var_tallyurl = "https://tally.so/embed/" + var_formid + "?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1&email=" + encodeURIComponent(var_email) + "&firstname=" + var_firstName; 
        document.getElementById('thetallyembed').setAttribute('data-tally-src', var_tallyurl);
        document.getElementById('thetallyembed').setAttribute('height', var_formheight);
      </script>

    {{/if}}
    
  </section>

Then when you create a post

  1. select this template
  2. add the following code to the code injection Post header
<script>let var_formid = 'y3NXyr'; let var_formheight = 436;</script>
  1. Set the formid to the Tally form id & the height of the form to whatever Tally’s embed code suggests you make it.