Customising the Main Contact Form

The only customisations that should be carried out for the Main Contact Form https://www.medtronicsolutions.com/contact-form are customisations made through the Custom Form URL Builder. Any other requests that cannot be made through the application cannot be caried out as it will affect all custom forms that use this as a base, i.e. if you were to add or remove fields or add sections, etc. In this instance, a one-off, standalone custom form will need to be created, but only if it's for a campaign with an end date. (Read the next paragraph first before creating a new form).

Building One-Off, Standalone Custom Forms

The Main Contact Form is the only form we use for campaigns because having multiple forms is inefficient for maintenance. Therefore, if someone requires a brand-new form to be created this will need to be run by Helen Baillie and Sean Dycus first, and there will need to be a good reason for it. You will also need to take into consideration GDPR compliance – therefore, using the same compliance checkboxes that the Main Contact form uses. Also, when writing the JavaScript, write this in the HTML page rather than writing it in an external JavaScript file.

Languages and Translations

The Contact form, Preference Centre form, Get Unique URL form and the Default Redirect Pages all have translations. The dedicated script for the header (which holds the translations menu) and all the script related to languages and translations is in the form-set-language-mitg (Asset ID GS_01 in the Assets and Libraries Log). The translations can all be found in the file form-translations-master (Asset ID FRS_05), with the exception of the dropdown list translations and product hierarchy list translations which have their own files, which you will see in the Form Scripts Assets of the Assests and Libraries Log.

To make updates easier, there is a master spreadsheet that has all the translations, this can be found in the Demand Gen repository. Once you've updated the spreadsheet, you can select whichever sheet you updated and convert it into JSON and then paste it into the script file (I use Convert CSV to JSON, and paste the CSV text into the Enter Data tab). So, if any translations need adding or amending, do them in the spreadsheet first and then apply the updates to the script files.

How to access the latest Eloqua landing page templates

1. Login to Eloqua
2. Navigate to Landing Pages
3. Click Create a Landing Page
4. From here, all templates can be found in All Files > EMEA > EMEA Landing Page Templates > version 4.0 NEW BRAND

External Eloqua emails for campaigns

There are various email templates in Eloqua that have been created for use in campaigns. Read through the Email Templates Guide https://www.medtronicsolutions.com/email-templates-guide in order to find out all the information you need to know. There are also code snippets that will show you how the emails are constructed, therefore, if someone needs a template that doesn’t already exist, you will need to create this for them, following the guide.

To speed up your workflow, you can use MJML. You can find the MJML email templates in the Bitbucket repository so that you don't have to start from scratch. There's also an MJML Email Checklist that will help you iron out any minor niggles when you render the MJML to HTML.

How to save an email template in Eloqua

Once you've created the email template locally, you'll need to upload it to Eloqua as a template:

1. Go to Emails in Eloqua
2. Select Create an Email
3. Select Blank HTML Email and hit Choose
4. Clear the code that is in the editor and then paste your HTML
5. Go to File > Save as Template…
6. Leave Use Thumbnail checked
7. Give the template a name and add the version number at the end, for example Email Template 6 v4.0
8. Change the Location to EMEA > Current Email Templates > v4.0 New Brand (Use the folder icon next to the field to browse for the folder location)
9. Hit Choose
10. Then hit Save
11. Go back to Emails You'll get a window pop up asking if you want to 'Save Changes Before Leaving?' Just select "Don't Save" as you've already saved the template
12. Check that the template is in the library by selecting Manage Templates
13. Go to All Files > EMEA > Current Email Templates > v4.0 New Brand
14. Your template should be in there
15. Then you can let whoever requested the template know the name of the template and where to find it

How to update the list

To update the list follow these steps:

1. This is the file where you will update the array https://bitbucket.org/medtronicplc/demand_gen/src/Master/forms/_assets/js/EU_UNV_form-product-hierarchy-list-DO-NOT-UPLOAD.js
2. Pull the latest commit (from the Master branch) from the demand_gen repository
3. Update the EU_UNV_form-product-hierarchy-list-DO-NOT-UPLOAD.js and the EU_UNV_form-product-hierarchy-list-translated-DO-NOT-UPLOAD.js files, which can be found here
4. Run a test - you can use the Product Hierarchy List Table locally to run your test and ensure that the list is correctly updated
5. Once you're ready to make the changes live, save the EU_UNV_form-product-hierarchy-list-DO-NOT-UPLOAD.js and the EU_UNV_form-product-hierarchy-list-translated-DO-NOT-UPLOAD.js locally by overwriting the latest file version – just give it the same name
6. Then delete the old minified file and re-minify the updated file
7. Then upload the minified file to the relevant folder in Eloqua. Go to Components > File Storage and then you can search for the relevant folder. (See the Assets and Libraries Log for the folder name and location)
8. Commit and push all your updates to the Master branch of the demand_gen repository

NOTE: When updating any other script files or sass/css files, the process is exactly the same.

JavaScript/jQuery

Please only use Javascript and JQuery and comment all code.

Sass/CSS

Use BEM and SassyBEM. We don’t use dependencies in CSS, and all CSS selectors must be class selectors and not element selectors. Class selectors must be named semantically. New components should have their own partial file - you will see the file structure when you open the SCSS folder, please follow this structure in regards to components.

HTML

For HTML we use the Bootstrap framework.

IDs and Classes

For IDs we use underscores, so IDs should always look like this: this_is_an_id. If you need to specify a class to use in JavaScript you will also use underscores (not BEM) to identify these types of classes and also prepend the class with js, like this: js_class_for_javascript, so that it is clear that it is used in the JavaScript.