Articles in this category

GOOD STUFF!

Form element

Do you want to be in touch with your site visitors and enable sending you messages through your website? You'll definitely need a Form Element here. To add one, just drag and drop the ‘Form’ icon to the canvas.

General Settings

You can customize the Fonts, Borders and Paddings of the Form. You add Fields, Change the Form Design and decide where the submitted data is sent to. You can even edit the name of the 'Attach file' field!

Style - Click on your Element and change its width by simply moving the black pointers to match your site Layout perfectly. Green controllers are designed to change the height of the element.

Click on the Form, hit ‘Edit Style’  and a wide range of options will show up: Fonts, Borders, Paddings, Height, Margins, Colors, Alignment. With their help you'll be able to customize and completely change the styling of the Element.

If you need more information from your site visitors, you can add more fields accordingly. Just click ‘+’ and choose the ones you want.

Let's add a 'Date' field, for instance. 

Input the label, point if it's required and click ‘Add’.

Once you've designed a nice Form, you can make sure you've chosen the most convenient way for you to receive the submitted data.

You'll find options to connect the Form Element to Mailchimp, Email (the one that's associated with your account by default) or Intercom accounts at hand, too. Just choose the option you prefer, click Connect and Log in to your account.

In case of connecting Mailchimp, you'll also need to choose your List ID from the dropdown menu.

Step by step instructions to connect your form with Mailchimp can be found here.

Connect your Form element to Intercom? The first thing you should do is enter Intercom Key. To create your Access Token (Intercom Key) head to the dashboard in the Intercom Developer Hub or click on Dashboard at the top of the page and hit 'Get an Access Token'. 

When setting up your Token, you will be asked to choose between two levels of scopes Standard Scopes and Extended Scopes. Use Standard as these scopes will be approved and useable straight away.

Once you have created your Access Token you will see it in the same section in your Dashboard. Simply copy and paste it to your Form Element >Edit Subscription >Send Data to >Intercom Key section. Easy as that! :)

Additional settings

If you want your visitors to receive a backward message after they have submitted the message, you can enable "Thank You" messages and edit the text here, change the background color of the message or easily redirect your visitors to other pages. To have all the changes saved, click ‘Save’. Pretty handy, right?

Want to prevent spam on your website? Then, the invisible reCAPTCHA is just what you are looking for!

Basically, it is an image with numbers and letters, which the user is required to enter in order to submit the Form. But Google took a step further and made it invisible! So now ‘human’ users will be let through without ticking the “I’m not a robot” box.

Let’s get right into it!

First, head over to the reCAPTCHA intro page and click the “Get reCAPTCHA” button. Just enter the Label, to identify your website in the future, and select the Invisible reCAPTCHA. 

Type in the domain and subdomain pointing to your website. Click Accept and Register!

Google will generate a Site Key and a Secret Key, which you will be using later on. Scroll down to the Advanced Settings to set the Security Preference. Don’t forget to hit Save!

Now open your website and go to Edit Form, then go to Invisible reCAPTCHA, enable it, enter the Keys and click Save!

That’s all! Now you can forget about the annoying spam messages!

You can also add integrate Facebook Pixel with Subbly's Form Element by taking the following steps:

  1. Create your Facebook Pixel
  2. Add the Facebook Pixel base code to all your pages from your Dashboard > Site Settings > Code Injection > Before section 
  3. Create an exciting custom 'Thank you' page from your Dashboard > Pages > Secondary pages
  4. Add your event code to the 'Thank you' page using the Custom HTML element
  5. Now add a Form element on another page and from its settings set it to redirect to the 'Thank you' page on successful form submission.

It's all set now!

Alignment - If you don't like the position of the Form on your Page, you can change it in seconds, simply click on the element, choose 'Vertical Alignments' option and align it as you need.

Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the visibility of the elements on your page.

Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Due to security reasons the Form element will be visible when viewing the page via your custom domain only.

Trash Icon - If you want to remove your Element, click on the ‘Trash’ button and hit ‘Delete’ to confirm your action.

How am I going to be notified?

You will get an email notification directly to the email address registered on your Subbly's account.

In order for you to identify it easily in your inbox you can customize the name of the form and the email title through the Form Settings: 

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free