WordPress forms

Introduction #

In SaaSBuilder you can follow the full life-cycle of your customers: from a visitor of your website up to an active subscriber of your platform. 

Or to put it in funnel terms: from a top of the funnel cold prospect, all the way down to a hot (paying) subscriber. 

How exactly is this done?

You can connect your WordPress form with your SaaSBuilder account: as such you can manage all incoming subscribers as contacts.

WordPress doesn’t come with a built-in form builder, so you will have to use a WordPress plug-in for this functionality. 

Currently, we support 2 different WordPress form plug-ins:

  • Contact Form 7: Contact Form 7 is a free WordPress plugin
  • Elementor Form: Elementor is a WordPress page builder with many widget types, one of them is a form builder, but you will need to have a license key for the pro version

Contact Form 7 #

Coming soon!

Elementor Form #

In order to create a WordPress Elementor form, you will need to have a WordPress website with an active Elementor license.

You can create any form layout, but here we will illustrate how to create a basic form:

First, you will need to open your page with the Elementor page builder: press the “Edit with Elementor button”.

Then you will need to look for the Elementor Form widget. You can find the widget in the “Pro” section:

Now you can drag & drop the Form widget onto your page. Next, you need to configure the fields of your form. You can create any field as needed:

For the form shown above, we create the fields: First Name & Email.

In order to link a form field with a contact property inside SaaSBuilder, you need to configure the ID inside the advanced tab of Elementor:

The following ID’s are recognized as properties of a contact:

  • firstname
  • lastname
  • email
  • phone

Any other ID will be stored as custom properties of your contact.

The next step is to configure the “Action After Submit” as “Webhook”:

You may also add other actions, but the webhook is essential to get your subscriber into SaaSBuilder.

Finally, you have to configure the settings of the Webhook.

Therefore you have to enter the URL of the webhook, this will look something like (remark: these are example links and will not work):

https:// api-europe-west1.saasbuilder.dev/wordpress-elementor?projectId=your-project-id&tag=webform&mergeBy=email

This URL exists of 3 parts:

  1. The base URL:  https:// api-europe-west1.saasbuilder.dev/ (will be provided if you have a SaaSBuilder account)
  2. The function processing the form: wordpress-elementor
  3. Then, after the question mark sign ‘?’ you can provide some variables (separated by ‘&’ symbols):
    • projectId=your-project-id   > this is mandator: fill in your SaaSBuilder project id
    • tag=webform                     > optionally, you can attach a tag to the contact (later on, you know that the contact was created via this webform)
    • mergeBy=email                 > optionally: if you don’t want duplicate entries in your contacts, specify the mergeBy variable

Very important: do NOT forget to toggle the “Advanced Data” to YES. Otherwise, SaaSBuilder will not recognize the incoming data.

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *