Field Mapping

Field mapping components are used to help users map the columns from their uploaded csv to reserved and custom fields within their system.

Field Mapping

email

Mapped

Text

example@example.com

rich.bachman@sendgrid.com

jason.walker@sendgrid.com

Container(s) .field-mapping-wrap .has-error .is-skipped
Required .field-mapping-header .field-mapping-title field-mapping-status .field-mapping-list input-select-wrap field-mapping-map-type input-checkbox-wrap
Optional Elements .btn.btn-small.btn-secondary
<div class="field-mapping-wrap">
<div class="field-mapping-header">
<p class="field-mapping-title">email</p>
<p class="field-mapping-status"><i class="sg-icon sg-icon-check-circle"></i>Mapped</p>
</div>
<div class="field-mapping-list">
<div class="row">
<div class="col-4">
<div class="input-select-wrap is-required">
<label class="input-select-label" for="select2-example-default">Field mapped to:</label>
<select class="input-select2" id="select2-example-default" data-placeholder="Select a field">
<option></option>
<option>email</option>
<option>first_name</option>
<option>last_name</option>
</select>
</div>
</div>
<div class="col-4">
<p class="field-mapping-map-type"><i class="sg-icon sg-icon-text-only"></i>Text</p>
<button class="btn btn-small btn-secondary has-icon"><i class="sg-icon sg-icon-pencil"></i>Edit Field</button>
</div>
<div class="col-4">
<div class="input-checkbox-wrap">
<input type="checkbox" id="checkbox-skip" value="skip">
<label class="input-checkbox-label" for="checkbox-skip">Skip Column</label>
</div>
</div>
</div>
</div>
<div class="field-mapping-list">
<div class="row">
<div class="col-12">
<p>example@example.com</p>
</div>
</div>
</div>
<div class="field-mapping-list">
<div class="row">
<div class="col-12">
<p>rich.bachman@sendgrid.com</p>
</div>
</div>
</div>
<div class="field-mapping-list">
<div class="row">
<div class="col-12">
<p>jason.walker@sendgrid.com</p>
</div>
</div>
</div>
<div class="field-mapping-list">
<div class="row">
<div class="col-12">
<p>&hellip;</p>
</div>
</div>
</div>
</div>