How to Automatically Pre-Fill a Shack Form Field Using a Link

shack form

In some scenarios, you may want to pre-fill one of the fields of your Shack Form with a value. And you would like your Shack Form to get this value from a web link in a Joomla article.

For example, you may want your site visitor to open a trip booking form clicking on a link "Click here to book a trip to London".

Once the form is open, your visitor will see the "London" bit inside of one of its fields. This will improve the form user experience.

Let's take a look at how to achieve this.


Step #1. Create the required form

  • Create a regular Shack Form.

Your Shack Form with a field to be automatically pre-loaded upon a click on a link is a regular Shack Form.

Please, read our documentation on how to quickly start building a Shack Form if you are new to form building in Joomla.

There is nothing special about it. The magic of pre-loading will actually heppen in your link.

  • Select which field of your form will get pre-loaded.
  • Copy this field alias.

For my demonstration, I created a basic form with the following fields:

  • First Name.
  • Last Name.
  • Email Address.
  • Trip to book.

This is how my form looks at the backend:

basic form backend

And this is how my visitors will see this form at the frontend:

basic form frontend

The "Trip to book" is the field that I would like to be pre-loaded.

For the next step, I need to copy this filed alias, which is "tripname":

field alias

  • We created our form.
  • We selected which field of this form we would like to be pre-loaded.
  • We copied the alias of this to be pre-loaded field.

We are ready to move to the next step.


Step #2. Create the required link

This is where the magic of pre-loading actually gets created.

  • Create your link using the following format:
<a href="#" class="pwebcontact98_toggler" data-pwebcontact-fields="tripname=London">Your link text goes here</a>

The key for preloading to happen is the "tripname=London" pairing after the data-pwebcontact-fields= bit.

  • Place your own field alias to the left of the equal sign (instead of my alias "tripname").
  • Place your own value to populate this field with to the right of the equial sign (instead of my London").
  • Click Save & Close.

If you now go to your site frontend and click on this link, you will see your form gets displayed with the "Trip to book" field pre-loaded with London:

trip to book preloaded with london


What's Next?

Save $1000's when you sign up to the Everything Club today! You' ll get access to all our extensions, templates, and Joomla training.


About the author

Alex is a based in England self-taught Microsoft Certified Professional. He enjoys learning Joomla and helping beginners and web site administrators make the most of it.