How to add a Sign-up Form to Your Website

Adding a signup form to a website is not difficult, though it does require a level of comfort manipulating html and javascript code.

GENERATE THE CODE FOR YOUR FORM

Log into the Konvey admin area and go to Settings > Public API.

Profile Fields

Click in the Profile Fields field to bring up a list of available data fields you would like to add to your signup form. Note that the EmailAddress field – always required – is pre-populated in the field.

In the list of available fields, click on the desired fields in the order in which you would like to see them in your form. The fields will be added to the Profile Fields field.

Lists

Click in the Lists field to bring up a list of all available lists into which you may add your new subscribers. Click the desired list names.

If you do not select any lists for this field, new subscribers will be added to any lists that are pre-configured as “Subscribed by Default,” in the admin.

Tags

If you wish to add one or more tags to those subscribers who are entered into your contact list via this signup form, click in the Tags field to bring up a list of all available tags.

Options – Use Bootsrap Styling

Your website may or may not have styling (display formatting) associated with the html elements that make up an online form (i.e. fonts, colors, spacing, etc.).

If you wish to include Bootstrap styling to your form code, check this box.

If you will use your website’s existing form styling, or if you will style your form on your own, do not check this box.

When finished configuring these four fields, click Generate HTML Sample. A box containing the necessary html code and javascript links to create a basic html page, including your form, will be displayed, as will a preview of what the form will look like with any configured styling from Options above.

For the next steps, you may copy the form code directly from this window, or you may find it easier to copy all of the code in this box and paste it into a text editor, like Notepad++ or Notepad.

ADD THE FORM CODE TO YOUR WEBSITE

The process for adding this code to a page on your website will vary, depending on the content management system (CMS) used to construct and manage your website. The two basic steps you need to take are:

Add form styles and javascript links to the page.

Ideally, these snippets are added between the <head> and </head> tags of the page. If that’s not possible, they may be added just above the form code, as described below.

In the html code you generated, select and copy all of the code between (but not including) the <head> and </head> tags and paste it onto your page.

Dirigo Ski Platform Users:

  • Copy and paste the inner <style>…</style> code into the CSS tab of the page. Do NOT include the <style> or </style> tags.
  • Copy and paste the included javascript links above your form code (below) in the HTML

Add the form code to the page.

For this step, you will need to be able to view/edit the html code for the desired page in your CMS.

In the html code you generated, select and copy all of the code between (but not including) the <body> and </body> tags and paste it into the desired location on your page.

Ideally, you would split this code into two snippets, by separating the <script>… </script> code below the <form> and placing it just above the </body> tag on the page.

Dirigo Ski Platform Users:

  • Copy and paste the code from just below (but not including) the <body> tag to the bottom of the form (including the </form> tag) into the HTML tab of the page, in the location where you want the form.
  • Copy the code between (but not including) the <script> and </script> tags into the Javascript tab of the page.

 ADD CUSTOM STYLING TO YOUR FORM (OPTIONAL)

Now that the form has been added to your website page, you may wish to add additional styling/formatting to make it match the design of your website. This is done by applying styles that you create to the various elements that make up the form (i.e. <div>, <label>, <input>, etc.). These styles should be added either to your website’s existing style sheets, or they may be added to the <style> code you added to your form page in the first step.

If you are not experienced in creating and using styles, you may want to enlist the help of your website designer or developer.

Dirigo Ski Platform Users:

Add the appropriate button class to the <input> tag for submitting the form (typically “button” or “button action” or the like).

For example, the <input> tag to submit the form might look something like this:

<input type="button" value="Submit" class="button action solid" />