Details
Once you've created your lists, added your forms and customised their appearance it's time to add your form(s) to your website. This is particularly useful for subscription forms - so users can subscribe to your mailing list to receive your emails.
Here are some ways you can use webforms once added to your website:
- You could use a subscribe form on your website to collect new newsletter subscriptions organically
- You could add a contact us form to collect customer inquiries - perhaps for a quote request or similar
- To offer an easy means for your contacts to update their profile
- To request feedback via surveys
- To request RSVPs to an event.
How-to Guide
This article contains a number of guides for various related topics. Click below to jump ahead to a particular guide.
- Add Form to Website Using Basic Form Code
- Linking to a Form (via a URL)
- Add Form to Website Using the WordPress Plugin
- Add Form to Website Using Plain HTML Code
- Advanced Form Embeds: Using Hidden Fields To Submit Additional Data With Your Form
- My Form Looks Different, or Isn't Displaying Correctly
- Using the JavaScript SDK (this goes to a separate article)
Add Form to Website Using Basic Form Code
This is the most popular method for embedding our forms onto your website. It 'embeds' the form on your website, so that any changes made to the form (such as adding new fields) are reflected on your website automatically.
- Select Lists and Forms from the sidebar.
- Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
- Select the tab that corresponds to the form you'd like to edit.
- Click the Add Form to Website option.
- The HTML code required to embed this form onto your website is now displayed. Copy this code and paste it into your website's HTML where you need the form to appear.
If you don't have access to your website or aren't sure what to do, consult your web developer. - You can also use the Email Code tab to send this code to your web developer for implementation on your website.
Linking to a Form (via a URL)
You can also link directly to the form - this is handy for sharing the form on social media, via online chat or in an SMS.
- Select Lists and Forms from the sidebar.
- Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
- Select the tab that corresponds to the form you'd like to edit.
- Click the Add Form to Website option.
- On the Basic Form Code tab, you'll find a URL (including a short URL) that will link directly to your form. Anyone can open this link in their web browser and fill in your form.
Add Form to Website Using the WordPress Plugin
Use this if your website runs WordPress. You will also need the accompanying WordPress plugin.
- Select Lists and Forms from the sidebar.
- Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
- Select the tab that corresponds to the form you'd like to edit.
- Click the Add Form to Website option.
- Select the WordPress tab. Here's you'll find the shortcode to insert onto your page at the spot where you'd like your form to appear.
Don't forget to install the WordPress plugin (also linked on the dialog) - otherwise the shortcode won't work. Looking to do more with your forms - such as use multiple pages, conditional fields, data submission to multiple lists at the same time, custom styling and so on? If your site runs WordPress, why not use our integration with Gravity Forms instead - where you can achieve all of the above & more!
Add Form to Website Using Plain HTML Code
This method offers the most flexibility from a design point of view, as you can completely customise the appearance of all form elements on your website yourself using CSS (Cascading Style Sheets).
However, note that if you add a new field to your form in our platform, it will not automatically appear on your website when using this method. You will need to re-copy & re-paste the form code onto your website.
- Select Lists and Forms from the sidebar.
- Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
- Select the tab that corresponds to the form you'd like to edit.
- Click the Add Form to Website option.
- Select the Plain HTML tab.
- The plain HTML code required to embed this form onto your website is now displayed. Copy this code and paste it into your website's HTML where you need the form to appear.
If you don't have access to your website or aren't sure what to do, consult your web developer.
Advanced Form Embeds: Using Hidden Fields To Submit Additional Data With Your Form
Did you know that you can send extra (hidden) information into your list when a contact submits a form? Let's say you have the same subscribe form embedded in multiple places on your website (ie. the same form on different pages - a page for each state of Australia), but you want to know which state-page the contact subscribed from, and store that data against the contact's record.
This can be achieved by using a special hidden value (or values, if you need more than one) in the form's embed code and sending it along with the form when the contact submits it. Perfect for marketing or data analysis purposes!
- Select Lists and Forms from the sidebar.
- Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
- Select the tab that corresponds to the form you'd like to work with; usually it would be a subscribe form, as these are generally intended for embedding onto your website to collect new mailing list subscribers.
- On the right, you should see a list of fields. Note down the name(s) of the field(s) you wish to submit data into. In our case, we are going to submit data into our field called 'State' - so that we know which state's page they were on (on our website) when they filled in our subscription form.
This field doesn't need to be displayed on your actual form - in fact, it's probably best if it isn't, as it will likely just confuse the contact. As such, we'll make sure the 👁️ icon is off for this particular field, which will hide it from the form. - Click the Add Form to Website option.
- Select the Basic Form Code tab.
- Copy the embed code that you see (yours will be different to ours shown below!) and paste it into a text editor such as Notepad.
- Edit the code and alter the URL to include your field name. We also want to save the value 'QLD' (for the state of 'Queensland') into that field so that it submits with the form, so we'll add that into the code too. Shown below in purple you can see everything that we manually added to the end of the embed URL in the code. Essentially, &FieldName=VALUE
- Place the entire block of altered embed code onto your website and test it by filling it out. The contact that gets created when you submit the form should now have the extra information added alongside whatever they entered into the form. Well done! If not, then it's likely your field name was not correct, or something else isn't quite right with your code.
Other Embed Options
If you wish to add multiple fields to the end of the URL, separate them with an ampersand ('&'). For example:
If the 'hidden' data you're looking to submit contains a space, replace it with %20 - as URLs cannot contain spaces (nb. '%20' is the code for a space). Note the space between 'Gluten' and 'free' has been replaced with %20 in the example below:
My Form Looks Different, or Isn't Displaying Correctly
If your webform isn't displaying correctly once embedded on your website, begin by opening the direct URL to your form in your web browser - as per the section titled "Linking to a Form (via a URL)", above.
If it displays correctly in your browser via the URL, then something on your website (or in your website's code) is causing the design or layout to change - generally this is due to a CSS conflict.
We recommend reaching out to a web developer for more details.