Input form integration

Integrations & API
1

Hi community!

I hope you can help me. I don’t expect a ready-made solution, and will be happy if you could at least direct me for digging what to look for.

I am working on a project - a help center for one of online platforms. So in my posts I will be explaining how to use the platform functionality. And for many instructions it would be very useful to generate direct urls, so users will be able to click and accomplish what they need without reading and following the instruction.

For example. Users may ask “How can I find my receipt?”

In the system all the receipts are stored in the following format https://www.website.com/receipt?code=XXXXX where XXXXX is user’s order number. And all users know this number.

So if we could embed a form asking to input the reservation number and generate url replacing XXXXX for the actual order number of each particular user after they submit their number. So they can just click the link and access their receipt directly.

Do you have any ideas how it can be accomplished on Ghost? Maybe you know some “input form” which can be integrated with Ghost?

I will be grateful for any hints or ideas.

Thank you in advance

2

If it’s just a one-off (e.g. just included in the FAQ page), you can use an html card for that:

<label for="js-receipt-input>Receipt Number</label>
<input type="text" id="js-receipt-input" />
<a id="js-receipt-link"></a>
<script>
  const receiptInput = document.getElementById('js-receipt-input');
  const receiptLink = document.getElementById('js-receipt-link');
  const validateReceipt = value => value !== 'bad!';
  receiptInput.addEventListener('input', () => {
    const {value: receipt} = receiptInput;
    if (validateReceipt(receipt)) {
      const fullUrl = `https://example.com?reciept=${receipt}`;
      receiptLink.textContent = fullUrl;
      receiptLink.setAttribute('href', fullUrl); 
    } else {
      receiptLink.removeAttribute('href');
      receiptLink.textContent = 'Invalid Receipt';
    }
  });
</script>

And if it’s used on multiple pages, you can create an internal page that’s embedded throughout the site

1 Like
3

Thank you so much, that’s what I need.

P.S. I don’t know why but initially when copy-pasted the code to Ghost it didn’t work (showed blank page) I checked in html validator it showed blank page with no errors. So I manually re-typed html markup and it showed up.