Do you want to be in touch with your site visitors and enable sending you messages through your SpringBuilder website? You'll definitely need a Form Element here. To add one, just drag and drop the ‘Form’ icon to the Crafting Area.
Let's make a start!
General Settings - Name the form and Email title that is being sent to the website owner. You can customize the Fonts, Borders and Paddings of the Form. add Fields, Change the Form Design, 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. The 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, Padding, 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 you 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.
It is being sent to the Email address you've initially used to register your site, but you can change the Email address in seconds.
Don't forget to save your new Email address by hitting the Save button once it's all set!
You'll find options to connect the Form Element to Mailchimp, Google Sheets or Intercom accounts at hand, too. Just choose the option you prefer, click Connect and Log in to your account.
For the Google Sheet, go ahead and choose the desired Spreadsheet and make sure to add your Worksheet name respectively.
In case of connecting Mailchimp, you'll also need to choose your List ID from the dropdown menu.
Please note, that once you've connected Google Sheet, you can't edit the Spreadsheet, but disconnect and connect a new one instead.
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 usable 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 :)
Let’s move forward!
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 on 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 SpringBuilder's Form Element by taking the following steps:
Create your Facebook Pixel
Add the Facebook Pixel base code to all your pages from your Dashboard → Site Settings → Code Injection → Before </head> section
Create an exciting custom 'Thank you' page from your Dashboard → Pages → Secondary pages
Add your event code to the 'Thank you' page using the Custom HTML element
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.
Mind the Session visibility as well. The latter one, allows to make certain elements visible only to the logged in users of your website. This can come in handy if you want to hide some content from users until they sign up to your website.
!Note: Due to security reasons the Form element will be visible when viewing the page via your custom domain only.
Trash Icon - If for some reason you want to remove your Element, click on the ‘Trash’ button and hit ‘Delete’ to confirm your action.
Buttoned up! Hope you find this article helpful while creating a Form for your brand new site. Feel free to hit the chat button it the lower right corner in case of further questions!