You can automatically update contact details by sending an update form to your contacts. Standard update forms have been around in MailBlue for a while, but we are always looking for ways to take this to the next level. We discuss the method in this article. Within this update form, the email field is hidden using a CSS code, after which this field is automatically filled in with the personalisation tag '%EMAIL%' by using a query string in the URL of the form.
Parts of this article:
What is an update form?
Imagine: you send mailings to your contacts with conditional content based on collected information (e.g. location). In case one or more of these contacts move, you naturally want to continue sending the correct content in your emails. For these situations, we recommend sending an update form to your mailing list. This form works just like any other form, with one difference: while you normally use a form to collect specific information, you use an update form to modify already collected information. This can relate to information in all possible fields, from standard fields to custom fields.
Please note: It is important to provide your contacts with the opportunity to change all their data in an update form. If there are fields that do not need to be modified, your contacts do not have to fill them in. Their information will then remain intact.
Below you can see an example of how an update form can look, but it is good to know that the content of this form depends entirely on the fields you use in your MailBlue account.
How to create the update form?
Step 1: Create a form and add all options
If you need a reminder on how to create forms, you can refer to this help article. Earlier in this article, in the section What is an update form?, there is also an example of how to set up an update form.
Step 2: Add the query string for the personalisation tag %EMAIL% to your form's URL
If you are not familiar with this concept, it is useful to take a step back and look at the concept of pre-filling form fields automatically using a query string. Steps 2 and 3 of this article explain how to create a query string to then add to your form's URL.
Please note: We recommend following this process first before proceeding with the next steps to hide the email field. This way, you can clearly verify if the email field is actually automatically filled in with the personalisation tag '%EMAIL%' before hiding this field with the following steps.
If you have followed this process correctly, the email field in your form should look like this after following the link with the query string:
The personalisation tag '%EMAIL%' will automatically be replaced with the email address of the contact filling in your update form.
Step 3: Make adjustments to your form's CSS to hide the email field
Within MailBlue forms, we offer the option to use CSS code for customising the layout of your form. Typically, you would use this feature to change the button width, adjust the font, or change the text colour. In this case, we will use this CSS code to hide the email field. You can find this feature by navigating to 'Style → Custom CSS' in the designer.
First, you will need to click on the Inspect button in the Custom CSS option. This will give you access to the inspection tool to retrieve the CSS code of the email field. This email field has three different elements from which you need to retrieve the CSS code:
- The element displaying the field name (Label)
- The text field where your contacts would normally enter their email address (Input)
- A hidden element with formatting functions (Alignment)
Using the inspection tool, you will need to click on each of these three different elements one by one to retrieve the source code of these elements. Once you have retrieved the source code of a specific element, it will automatically appear in the field under 'Custom CSS'. Below, we provide you with instructions for hiding each different element:
Please note: the numerical values in the example codes shown below are unique to each individual, so do not copy them.
Label
When you have used the inspection tool to click on the label of the email field, the following code should appear in the field under 'Custom CSS':
._x89938723 label {
}
Next, you should add a string below the retrieved source code to make this element disappear. It should be as follows:
display:none
The code in the 'Custom CSS' field should now look like this:
._x89938723 label {
display:none;
}
If you have followed these steps correctly, the 'Label' element should disappear.
Input
For this element, you can follow the same steps as for the 'Label' element. After this, the code in the 'Custom CSS' field should look like this:
._x89938723 label {
display:none;
}
._x89938723 input {
display:none;
}
Alignment
There are a few extra points to consider with this element. It is so well hidden that you will likely have a hard time clicking on it with the inspection tool. To still retrieve the source code of this element, you can copy the source code of a previous element. You will just need to make a few small adjustments.
First, you will need to remove the string after the copied source code, which looks like this:
._x89938723{
Secondly, you will need to add a new string after the 'display:none' string. It should be as follows:
!important
The !important rule serves to give more priority to a property/value. When you use the !important rule, all existing styling rules for the property of a specific element are overridden.
If you have followed the steps to hide this element, the entire email field should have disappeared, and the code in the 'Custom CSS' field should now look like this:
._x89938723 label {
display:none;
}
._x89938723 input {
display:none;
}
._x89938723{
display:none !important;
}
To visually illustrate these steps, we would like to provide you with the following (silent) screen video:
If after following the steps in this help article you still encounter issues creating an update form, please do not hesitate to submit a ticket: https://help.mailblue.nl/hc/en-gb/requests/new