How can I update my contacts' information? (Update form)

Keeping your contact information up to date is crucial for maintaining personalized and accurate communication. With Marketune, you can automate this process by sending an update form to your contacts.

This feature is continually being improved to ensure seamless functionality. By using this method, you can take it a step further—hiding the email field with CSS and pre-filling it using the personalization tag '%EMAIL%' through the query string in the form’s URL.

In this guide, you will learn:

• What an update form is
• How to create an update form

Imagine you’re sending emails to your contacts based on specific details, such as their location. If a contact moves, you want to ensure your emails still reflect their correct information. This is where an update form comes in handy. Unlike a standard form that collects new information, an update form allows contacts to modify their existing details. This ensures that any stored data—whether in standard fields or custom fields—remains accurate and up to date.

Important note: Contacts should have the option to update all relevant fields in the form. Any fields left blank will remain unchanged, ensuring that existing data is not lost.

Step 1: Create a form and add all required fields

Start by creating a form that includes all the fields your contacts will need to update.

Step 2: Use a query string to autofill the email field
To pre-fill the email field with each contact's email address, you'll need to add a query string to the form's URL. If you are not familiar with query strings, we recommend reviewing Steps 2 and 3 of this article which explains how to automatically populate form fields using a query string.

Important note: Before proceeding to the next step (hiding the email field), it's essential to test the query string to confirm the email field is correctly populated with the '%EMAIL%' personalization tag. This ensures the form recognizes the contact’s email before you hide it.

Once set up correctly, the email field in your form will automatically display the contact's email address when accessed via the query string link.

Step 3: Adjust your form's CSS to hide the email field
Marketune allows you to customize your form's layout with CSS, which is typically used for styling elements like button size, fonts, or text color. In this case, we'll use CSS to hide the email field in your update form. To do this, open the form designer in Marketune, go to the "Style" tab, and select "Custom CSS."

To hide the email field, we need to identify its CSS code using the Inspect tool. Click on the "Inspect" button under the Custom CSS section. The inspection tool will help you retrieve the CSS code for the email field. The email field consists of three elements, and you'll need to get the code for each:

• Label – The text displaying the field name (e.g., "Email Address").
• Input Field – The box where users typically enter their email.
• Alignment Element – A hidden formatting element that impacts layout.

Click on each element in the inspection tool to extract its unique CSS code. The corresponding source code will automatically appear in the Custom CSS field. Once you've identified the necessary CSS code for all three elements, you can apply styling rules to hide them.

Note: The CSS values provided in the example codes are specific to your form. Do not copy them directly, as they will vary based on your form setup.

By following these steps, you can seamlessly hide the email field, ensuring the form auto-fills the contact's email address while keeping it invisible to your contacts.

Use the inspection tool to select the label of the email field. The following code should appear under 'Custom CSS':
._x89938723 label {}
To make a label disappear add the display:none property below the retrieved source code:
._x89938723 label { display:none;}

Follow the same steps as for the label element. Once completed, the Custom CSS field should now look like this:
._x89938723 label { display:none;}
._x89938723 input { display:none;}
After this, the input field should be hidden

This element is more difficult to select using the inspection tool because it is hidden. Copy the source code from a previous element. Remove the string after the copied source code, which looks like this:
._x89938723{}
Add the following rule after display:none:

!important;

This ensures that all existing styles for this element are overridden. Your final Custom CSS should now look like this:
._x89938723 label {display:none;}
._x89938723 input {display:none;}
._x89938723 {display:none !important;}

The entire email field should now be completely hidden. By following these steps, you ensure that the email field is still pre-filled automatically with the contact's email but remains invisible on the form.

If you encounter any issues after following the steps in this help article to create an update form, please don’t hesitate to reach out to our support team for assistance. Simply create a ticket, and we’ll be happy to help you resolve any problems.