Creating a contact form for a landing page

Creating a contact form for a landing page

Contact forms are one of most important sources to get information from your website visitors. When a visitor fills in a form with their details they are already interested in your offer. I will show you how to create a contact form in Kentico

In my previous blog post I have created a simple landing page template. We will use this as a playground for this example.

Creating a contact form

Before we start creating a form for our site I would recommend that you read up “Creating new forms” in the Kentico documentation:

Once you’re ready we can start working in Kentico. Go to Forms > new form.

Here are parameters for our new form:
Form display name White paper download form
Form code name Leave it empty. Kentico will generate it
Table name Leave it empty. Kentico will generate it

In general we will setup these 2 things:

After the form is submitted (Display text) Thank you for download!                            
Submit button text Download now  

Now go to Field and add these fields:

Field name FirstName LastName Email
Data type Text Text Text
Size 200 200 200
Required Yes Yes Yes
Field caption: First Name Last Name E-mail
Form control Text box Text box Text box
Watermark Text Ninja Master name@domain
Default error message: Please enter first name Please enter last name Please enter valid e-mail
Validation rules     Email

Now we will add two more complex drop down fields:

Field name MarketingService Employees
Data type Integer Number Integer Number
Required Yes Yes
Field caption: Do you provide marketing services? * How many employees does your organization have? *
Form control Drop-Down list Drop-Down list
List of options 0;Please chose
0;Please chose
Default error message: Please answer yes or no Please chose answer
Validation rules: Minimum value 1 Minimum value 1

Finally we want to add the field “Terms and Conditions”. This field will be a little bit simpler because we won’t store it in a database but it will need to be checked to submit a form.

Field type Field without database representation
Field name Terms
Data type Boolean (Yes/No)
Required Yes
Field caption: I agree to Terms and Conditions
Form control Checkbox
Default error message: You need to agree to Terms and Conditions
Validation rules: General Condition
Enter Text (in validation rules) Value == True

One more thing a form needs is a layout. But since this requires some HTML knowledge I cannot explain it in this blogpost. If you have imported my demo site you can check and use my layout. It is a straight forward bootstrap form.

Mapping contact fields to Contacts

In a previous blog post (link) I have blogged on how to setup Contact Management. Please check mapping contact fields to contacts, it will explain in detail how you can map the contact fields correctly.

Notification emails

If you want every form entry to be sent to your email, go to Email notification and check: Send form data to email. In here you can populate your email data and every form entry will be forwarded. You can also customize the email layout by using the custom layout option.

Please note that this option will only work if your email server is configured. You can check here for more info on this:

Recorded data

In Recorded data you can check every form entry. This is more like a table view of all of the values. You can also export this to excel by clicking the action icon on the left top corner of a table.

Next steps

We have learned how to create a contact form and here are few ideas of info that we want to collect:

  1. Contact details that will be used for other marketing processes
  2. Are they interested in our marketing services? This will answered by the question if they an agency or not.
  3. What kind of potential clients are we dealing with? That will be answered by the number of employees.
What do we do next?
  1. Contact groups – we need to segment our contact based on their answer
  2. Email automation – thank you email with link to download
  3. Activity analysis – reports on contact activities
  4. A/B tests for our page
  5. A/B test for email