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.
Here you easily can customize Form Fonts, Borders, Paddings, etc. to create a unique form.
Let's move to General Settings now to check all the options available.
As you see, you can Add Fields, Change the Form Design as well as decide where the submitted data is sent to.
You can even edit the name of the “Attach file” field!
What about changing the button style and text and going further to explore more options?
Now you can change the width as well as the style of the Form to make it match your site Layout perfectly. To change the width of the element, move the black pointers.
The green controllers are designed to change the element height.
You have a great chance to change the styling of the form clicking on the form area and pushing ‘Edit Style’.
Sometimes you need more information from you site visitors, so 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 Save once it's all set!
You'll find options to connect the Form Element to Mailchimp or Google Sheets 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.
Shall we go ahead and 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! :)
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 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 click 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!
The next icon comes for the Form Alignment. To change the alignments of button, label and placeholder, click ‘Alignments’ in the Dialog Window.
Click the Arrow and select the position (left/center/right) from the dropdown menu.
If you've decided to remove the Form Element, just click on it and push the ‘Trash’ button.
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!
For more insight on how to use certain tools or site elements, check out the rest of the articles or type particular keywords in the search box of the Help Desk Section.