How do I create a contact form?

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.