To be in touch with your site visitors and enable sending you messages through your Ucraft website use Form Element. Just add the ‘Form’ Element from the Elements Section to the Crafting Area.\
General Settings - 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 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, 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, Intercom accounts at hand, or send the Data to Customers App on Dashboard. \ Just choose the option you prefer and enable the toggle.
Google Sheet
For the Google Sheet, go ahead and choose the desired Spreadsheet and make sure to add your Worksheet name respectively.
Please note, that once you've connected Google Sheet, you can't edit the Spreadsheet, but disconnect and connect a new one instead.
Mailchimp
In the case of connecting Mailchimp, you'll also need to choose your List ID from the dropdown menu.\
Intercom
To connect your Form element to Intercom you should first 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.
Customers App
Choose the option to send collected Data to your Customers App. \ Once you enable the Toggle, you'll see all the Fields in Customers App. Manage the settings to map the collected data with them.\ 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?
To prevent spam on your website you can enable the invisible reCAPTCHA!
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.
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 Ucraft'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 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.
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 the '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 making certain elements visible only to the logged in users of your website. This works well with the User Account element and 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 in 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.