How to use forms

Hi, this is Sandra from GREYD. In this video I’d like to show you how to build a contact form with double opt-in very easily with our form generator GREYD.Forms. If you’ve already activated GREYD.Forms among your plugins, you are able to create and manage forms under the WordPress tab “forms” or you can just access it via the GREYD.SUITE dashboard. To create a new form, just click on “create” and then enter a title for your form.

Creating forms with GREYD.Forms works exactly to the same principle as building your page. With our Editor Helper – which you can activate here on the right – you can even adapt the preview in order to have a preview of your form exactly as how it will look like on your website. You can adapt the size and background, which will have no impact on the frontend appearance, but it’s a very handy feature that makes it even easier to build a form. So for our contact form we will start with adding a headline.

The next row should have two columns to display the fields for the first and last name next to each other. In these columns you can then place your form fields. At first, we will need different types of input fields which is a block you can use everywhere in forms where the user should fill something in.

You can then directly edit the label – which is the text above the field – as well as the placeholder in the editor.

In the settings you can then select one of your global form field designs, define the alignment and you will find several text formatting options for the label.

On the right, you can then define what type of input the user should enter. For our two name fields we will need text here.

You can then also edit the unique name of the field that will later be submitted in the backend and you can also activate the autofill feature to help your users filling the form. Additionally, you define whether the field should be mandatory, thus the form would not be submittable as long as the field has not been filled. For the label you can adapt the font size and color and you can also create a hover effect. The width can be defined individually per breakpoint and in different units.

If necessary, you can also add additional information on how to fill the field that will then be placed behind an info icon.

Depending on the type of input you can also further narrow down what exactly the user should be able to enter, for example a maximum or minimum of characters. But for our example that’s not necessary.

If you don’t want to go with your global form field designs, just activate this toggle here and you will find all design options as known from the Customizer. When you are done with the settings for your name field, just do the same for the surname. The easiest way is to just copy the existing field and only make the few changes that are necessary.

According to the same principle you can then create your email address field. The only difference is to define the field type as email instead of text.

Below that, we now insert another input field for the user to enter a message. Here it makes sense to display multi-row field by activating the respective option in the settings on the right and define how many rows should be displayed.

To make our form GDPR-compliant, we also need a checkbox for the user to confirm having read and accepted the privacy policy. Herefore we work with the checkbox block

for which you can either directly enter the text in the editor or you can also use this option here on the right to insert automatically your default privacy text as defined in the GREYD.Forms settings. Here you can also switch between different checkbox styles, like radio buttons or iOS switch.

You should definitely make this field required and if necessary you can also adapt the unique field name. You could also have the checkbox pre-checked and you can adapt its styling in forms of text color, icon color, font size and possibly a hover effect.

In order to enable the user to submit the form we now also need a submit button. It’s very similar to regular GREYD buttons. You can directly edit the text here in the editor and have the alignment, text formatting options and your form field designs.

All the other options are very similar. You have the size, width, icon and if you are using it the individual button design.

Now the content for your form is complete. You can now save your form for later processing or directly publish it. After defining the content of your form, you now have some further options which can be found below your form. Under “general” for example, you can define whether the mandatory field should be marked with an asterisk. To explain the asterisk marks to the user, you can use the note field and enter your text here. With the dropdown menu, you can also decide where the note should be displayed. And if you don’t want a note at all, you can also choose “hide”. Optional fields can also be marked. Under “follow-up action” you can define what should happen after the user submits the form. You can show a message below the form like “your inquiry has successfully been submitted”. Therefore just enter your individual text here. You can also show a popup above the form or even fullscreen or you can select the option “open new page” for example to direct the user to a dedicated thank you page. Don’t forget to save your settings. The tab “email” offers you various options with regards to emails that can be sent after your form has been submitted. Under “admin email” you can define to whom and with which content the form entries should be sent. Choose one or several email addresses as the recipient.

Then enter a name and address to be shown as the sender of the admin email. We recommend to use an email of the existing system. Then define a subject and the content of the email. If you don’t enter anything, all entries of the user will automatically be shown in the email. Now let’s move on to user emails. Here you can define whether the user should receive a verification and/or confirmation email. To meet the GDPR requirements, we recommend using the double opt-in standard procedure. This means that the user will receive a verification email after submitting the form. Further emails -among others the admin email – will only be sent after the user has confirmed his or her authentication. Hook this checkbox to view the double opt-in settings. Again you can define the sender, recipient, subject and content of the email.

As recipient, select the user’s email address. In general, you can enter any content in the verification email. A confirmation link will automatically be included. If you’d like to include dynamic content from the user’s entries, just copy the respective elements from the left and enter them. Thereby you can also display the opt-in link within the text.

Down here, you can select to which page the user should be directed after clicking on the link. If you want to, you can also adapt the link text.

Hook the confirmation mail checkbox to view detailed settings for the confirmation email. If you have activated the double opt-in procedure, a confirmation email can be sent after the user has clicked the verification link. Again, define the sender, recipient, subject and content. Make sure that the sender and recipient match the ones of the verification email. Again, you can enter any content you like. For example it’s possible to include an opt-out link that offers the user the opportunity to reject his or her consent.

If you include an opt-out link, you can define where the user should be directed after clicking on it and also enter an individual link text. Now that you have all settings completed, you can put your form on your page to view it. Therefore go to the respective page and position and enter the block “form”.

The dropdown list should now display the form you’ve just created.

Click on “save”, position your form and use the preview.

If you’d like to change the general look of your form, you can do so in the Customizer. If you’d like to make some small changes on individual form elements, go back to the form settings.

For more videos and information please visit our Helpcenter.

Hi, this is Sandra from GREYD. In this video I’d like to show you which general settings you can make for forms on your website. You will find the general form settings on the left in the forms menu under settings. As you can see, the first settings are about data protection. Here you can enter a default privacy text to which you can refer in every form with the checkbox block.

Therefore just activate this checkbox here. This is a very handy feature especially if you have several forms on your website that should all have the same privacy note. Of course you can also work with different formatting options and also set links for example to your privacy page.

Input length is a security feature preventing users to insert unreasonably long form entries.
If you’d like to change the maximum number of characters you can do that here. GREYD.Forms has a native Honeypot spam protection. If you’d like to use Google reCAPTCHA to protect your forms against bots, just enter your CAPTCHA keys here. You can even adapt the minimum value that rates a form entry as safe.

GREYD.Forms also comes with a native SMTP integration. With that you can configure an SMTP server and send your form emails – for example the double opt-in verification email – via a verified email address. This prevents your mails from being sent to the spam folder.
If you click here, you will be directed to the general GREYD.SUITE settings where you can enter the SMTP host and port of your email provider and your login details for the authentication. You can also decide whether to encrypt your emails and how.

Let’s get back to the form settings.

GREYD.Forms offers interfaces to various CRMs and newsletter tools and also lets you create additional interfaces via Zapier or webhooks. Here in the settings you can activate interfaces for your installation and enter the required data. If you want to learn more about connecting forms with external tools we have a dedicated tutorial video on that waiting for you in our Helpcenter.

Please do not forget to save your settings when you’re done.

For more videos and information please visit our Helpcenter.

Hi, this is Sandra from GREYD. Today I’d like to show you how to view the form entries of your GRREYD.SUITE website and which analytics information you can see directly in the backend of GREYD.Forms. When you’d like to view the form entries of your users, go to the tab entries in the forms settings. Here you will get an overview of all entries on your website in chronological order. The overview shows you which form has been submitted and when and you also get a preview of the entry and can directly see the status – for example whether the double opt-in has been confirmed already.

To view an entry in detail just click on it.

You will then see the input of every single field. Additionally all events – again chronologically. For example which emails have been sent or whether the double opt-in has been verified.

Below you get some meta information, for example the IP address and user token and also the individual opt-out link that you can send manually to the user. And you can also add individual notes.

Let’s get back to the central overview. Here you can also filter the entries by date or form, search for particular entry and also sort and delete form entries.

For the ladder you can also implement an automation. To do that, open the respective form, scroll down to the settings and open the tab automatic deletion of entries.

Here you can then define which entries should be deleted automatically and in which time frame. For example you can delete all entries with opt-out weekly when they are at least 15 days old.

Next, you enter an admin email and a sender. A deletion protocol including all data that has been deleted will then be sent to this address in case you still need to access the deleted data.

Let’s now check out the analytics features offered natively in GREYD.Forms. The big advantage of them is that you do not need to integrate Google Analytics or similar and the stats are GDPR-compliant. You will find them in the forms menu under statistics.

Up here you can select which form you’d like to analyze and will then be presented with several key figures.

For example how many interactions have there been with the form during the last seven days and how much is that compared to the week before. Anything from a click will count as an interaction here. And you can also see how much interactions there have been in total with this form so far.

Here you can see how often the form has been clicked and submitted during the last seven days – again including comparison to the previous week and overall.

And last but not least you also get a conversion rate of clicked forms to submitted forms.

Below you will find more detailed information. On the left you can see in detail how many interactions each of your form field has received. That way you can see exactly how often a field has been clicked that way also getting information for example on which of your form fields is responsible for users stopping to fill out your forms. And here you can see the number of interactions with your form by date – again for clicked and submitted forms. That’s a form with not that many different dates, so let’s just switch the forms. Here we have more information. So here are the interactions with your form by date and also the overall interactions with fields by date.

For more videos and information please visit our Helpcenter.

Hi, this is Sandra from GREYD. Today I’d like to show you how easy you can build even complex multi-step forms with our form generator GREYD.Forms. For a positive user experience – and with this better conversions – it can be good, especially with longer forms, to not show them entirely from the beginning, but to have the user fill the form step by step. You can either prepare your form first and then move your fields into the multi-step container or you can build your form directly as a multi-step form. Both is possible. I will now build my example form directly with several steps. Therefore I place the block multi-step container in my form. Before dealing with the individual form steps, let’s have a look at the general settings first.

To start with, you can select the transition animation with which the form moves between its steps.

Down here, you define that after filling all required fields within a step, the form will automatically go to the next step. Alternatively you can work with back and next buttons, which I will show you in a minute.

Down here, you can define whether you want to show a progress bar to the user either in form of a bar or with a pagination.

For both you can then define the alignment, colors, size, border radius and for the pagination the space between the dots.

Let’s now create all form steps.

Up here you can add and delete any number of steps.

And in the box below, you then place the respective form field or fields for each step. So just enter for example an input field. And you can also restyle and layout your form as usual for example with several columns.

As mentioned before, you can also add next and back buttons to your form. You will find a dedicated block that can be placed in each form step and comes with the usual formatting, design and layout options for buttons.

The important setting is now, what the button should do. You can define it as a regular next or back button or you can also use it to jump to individually defined form steps. That way, you can make the user skip or repeat a form step. What you need to take care of is to not skip any required fields as otherwise the user will have problems submitting the form later.

When you now combine this feature for example with conditional fields, you can easily create complex automations in your forms.

For example here: With conditional fields you could show all users that select option 1 a regular next button and all users that select option 2 will get a different next button that skips one or two form steps for example. So there are absolutely no limits here. And by the way, GREYD.Forms also helps you tracking and monitoring your forms as you can see here with each step the URL adapts, so I can see with analytics tools exactly where you lose a user at which step in your form. For more videos and information please visit our Helpcenter.

Hi, this is Sandra from GREYD and today I’d like to show you how to use GREYD.Forms to create an interactive form with mathematical calculations. From a solar power system planner to an interest calculator nearly anything is possible. That way you can not only create a unique user experience, but also get very valuable website leads. Here for example I’ve got an annuity calculator where the user can select a duration and an interest rate and gets automatically displayed the costs per month and per year and can submit a web lead. So while we have a very appealing form in the frontend, in the background even the most complex calculations can take place.

What do we need for that in the backend? You can work with the block Mathematical Field whenever you want to work with numbers and/or calculations. You can either directly enter a number or you will find here lots of different operators. And you can also include your form fields dynamically to create a calculation. For example I could say I want my field “property” multiplied by the price per square meter. So as you can see, you can either directly type in here or use these field placeholders and/or operators.

Here on the right you can then enter the name of your field, which is definitely important when you want to use that field later in another mathematical calculation. Or also if you want send it with the form entry for example to your CRM. So instead of this automatic name you can use a custom name which will then also be visible as a dynamic placeholder. With these two checked boxes here you can define whether or not you want to show the result and/or the formula itself in the frontend. Depending on what kind of calculation you’re doing here, it might be interesting or important in the frontend, but often it’s also just relevant in the backend and doesn’t have to appear in the frontend. So that’s why I can decide here.

If you activate this checkbox here, you can change your field value depending on certain conditions. We’ll have a look at that later. And here you can define how many decimal places your number or the result should have and if you want to round off or up. “Automatically” means that from 0.5 it will round up and before that it will round off. As just explained, if you want to show the result, you can simply use this checkbox. But you won’t find many styling options then. It looks different if you work for example with a heading or a text field and then implement your numbers dynamically. This works exactly like Dynamic Tags, just that here you only have your dynamic form values here.

So much on this. So now let’s get back to the conditions. If you’ve activated this checkbox here, you can add one or even more conditions here. For example I could say depending on how big the property selected is, the price should not be 200€, but maybe only 150€ per square meter. So I can define a condition that if the property in that case is bigger than let’s say 500 square meters, then I want the calculation be the same but with price per square meter of only 150.

One tip: Even if your reference field is not a number like we have it here in our example, but let’s say a checkbox since you may want to add broker costs if the checkbox is activated, you can also dynamically adapt your calculation with a little workaround. This is where conditional containers and hidden fields come to place. I will now create a conditional container and make it dependent on my broker checkbox and say it has the value “on”. And then add a hidden field and give it the value “1500”. Then I copy the whole thing and define the condition for checkbox is “off”. Then the value should be “0”. And now I can use that here in my calculation. I have to update one time. So now it should be here. Now I can add my broker box in the calculation. So when the checkbox is now activated, 1500 will be added to my calculation and if it’s not activated 0 will be added to my calculation.

So much on a mathematical field. In forms with calculations it’s often a use case to have slider controls like this one here in your form. We also have a dedicated block for that, which I’ve already included here in my form. Different to other form blocks you have two labels here: one before and one after the value that’s automatically inserted. Like you can see here. That’s very handy especially if you want to work with units for example.

Other than that you can work with the regular toolbar options. You can give your field an individual name, which again is very helpful if you want to include that value later in mathematical calculations. You can define whether the field should be required or not. And then you can define the range of your slider control. By default that’s 0 to 50, but you can work with any values you’d like to have. For example here 1 to 1,000 in steps of 10. You can also define where the controller should start when the page is loaded. You will then find some styling options for the label, font size and color, if applicable also with a hover effect.

You can then define the size of the slider control itself – in height and length – and also of the controller itself. You can make it bigger or smaller. And then you have this little box here where it automatically shows the value that’s currently selected. Here again you can change the size easily and as you’ve seen you can also always work with different sizes per breakpoint. After that you can change the border radius of the track, the controller and the box to make it more round or angular. And then you will find lots of color options for the track itself, for the active or selected part of the track and both changeable for the moment when the slider control is used and also for the box here you can change background.

Last but not least you can add a help text if you want for the user, which will be visible behind such an info icon here. So much on the design and layout of slider controls and mathematical fields. Now depending on what you want to do with that form on your website, it might be good to have a form that’s an actual form that can be submitted and creates an entry. Or it might be better to just use it for display reasons. For the ladder, you’ll find this option here below the form. You can make it a non-submittable form without a submit button, which of course also changes all these follow-up actions and emails which are then not necessary anymore.

For more videos and information please visit our Helpcenter.