In this tutorial, we will walk through the process of creating a dynamically populated contact form on your website. This form will be designed to pre-populate certain fields based on parameters sent through the URL. This is useful when you want to create personalized contact forms based on which link the user clicks. Here’s how to do it step by step:
In order for this to work, it’s best to add your new form to a dedicated page. This way we can pass URL parameters along with our link to that page and populate the form dynamically.
You can add a Form Builder from the Breakdance Add panel by clicking or dragging it onto the page.
Once the Form Builder is added, make sure to add any fields the form needs, adjust the design, and then save the page.
In order to pass data to be dynamically populated in the Form, we’re going to be using URL parameters. They look like this: ?someKey=someValue&someOtherKey=SomeOtherValue.
To construct your customized links that will dynamically populate the Form, you’ll need to make note of the base URL of the page you created in step 1. In our example, it might look like this: https://example.com/contact.
Next, add a URL parameter to the base URL for each field you want to populate dynamically. In our example, I want to populate an “Agent Name” and “Agent Email” field, so my link for an agent named John would look like this: https://example.com/contact?agentName=John&agentEmail=john@example.com.
Note that the first URL parameter after the base URL is always prepended with a ? character. Any subsequent URL parameters must be prepended with the & character.
Compose special links like this for any button or link elements you want to have linked to the dedicated form page with pre-populated field values.
Finally, it’s time to tell Breakdance to grab those values from the URL and put them into the appropriate form fields.
Open up Breakdance on your dedicated form page, select your Form Builder, and follow these steps for each field that should be dynamically populated:
And that’s it! You now have a dedicated contact form page with the ability to dynamically populate the fields in the form simply by using a customized URL.