piotrpog/footer_creator.twig

## footer_creator.twig
{# personal info values #}
{% set fields = {
	field_name: 'Full name',
	field_email: 'Email address',
	field_phone: 'Phone number',
} %}

{# disable seomatic if installed #}
{% if seomatic is defined %}
{% do seomatic.config.renderEnabled(false) %}
{% endif %}

{# load email template #}
{% set template %}
{% include 'footer/template' %}
{% endset %}

{# replace default with values from url params #}
{% for key, label in fields %}
    {% if craft.app.request.getParam(key) is not empty %}
		{% set template = template|replace({(key): craft.app.request.getParam(key)}) %}
    {% endif %}
{% endfor %}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>{{'Email footer creator'|t}}</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">

<style>
	.hidden{
		height: 0px;
		width: 0px;
		opacity: 0;
	}
</style>

</head>
<body>

<br>
<div class="container">
<div class="columns">
	<div class="column">
		{# preview #}
			<div class="title">{{'Preview:'|t}}</div>
			<div class="box">
				{{template|raw}}
			</div>
	</div>
	<div class="column">
		{# fields #}
		<div class="title">{{'Contact info:'|t}}</div>
		<form class="box">
			<div class="intro">
				{{'Please type in your contact info, click "reload" and then "copy" to copy footer code to clipboard.'|t}}
			</div>
			<br>
			{% for key, label in fields %}
			<div class="field">
			<label class="label" for="{{key}}">{{label}}</label>
			    {{tag('input', {
					type: 'text',
					name: key,
					id: key,
					value: craft.app.request.getParam(key),
					class: 'input'
				}) }}
			</div>
			{% endfor %}
			<button class="button is-link">{{'Reload'|t}}</button>
			<button class="button is-primary js-copy-trigger">{{'Copy'|t}}</button>
			<a href="{{url(_self)}}" class="button is-danger">{{'Reset'|t}}</a>
		</form>


			<textarea class="js-copy-content hidden">{{template|escape}}</textarea>

			<script>
				document.getElementsByClassName("js-copy-trigger")[0].addEventListener("click", function(e){
				e.preventDefault();
				var copyText = document.getElementsByClassName("js-copy-content")[0];
				copyText.select();
				copyText.setSelectionRange(0, 99999); /*For mobile devices*/
				document.execCommand("copy");
				alert("Copied the text");
			});
			</script>

	</div>
</div>
</div>
</body>
</html>
	{# personal info values #}
	{% set fields = {
	field_name: 'Full name',
	field_email: 'Email address',
	field_phone: 'Phone number',
	} %}

	{# disable seomatic if installed #}
	{% if seomatic is defined %}
	{% do seomatic.config.renderEnabled(false) %}
	{% endif %}

	{# load email template #}
	{% set template %}
	{% include 'footer/template' %}
	{% endset %}

	{# replace default with values from url params #}
	{% for key, label in fields %}
	{% if craft.app.request.getParam(key) is not empty %}
	{% set template = template\|replace({(key): craft.app.request.getParam(key)}) %}
	{% endif %}
	{% endfor %}

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>{{'Email footer creator'\|t}}</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">

	<style>
	.hidden{
	height: 0px;
	width: 0px;
	opacity: 0;
	}
	</style>

	</head>
	<body>

	<br>
	<div class="container">
	<div class="columns">
	<div class="column">
	{# preview #}
	<div class="title">{{'Preview:'\|t}}</div>
	<div class="box">
	{{template\|raw}}
	</div>
	</div>
	<div class="column">
	{# fields #}
	<div class="title">{{'Contact info:'\|t}}</div>
	<form class="box">
	<div class="intro">
	{{'Please type in your contact info, click "reload" and then "copy" to copy footer code to clipboard.'\|t}}
	</div>
	<br>
	{% for key, label in fields %}
	<div class="field">
	<label class="label" for="{{key}}">{{label}}</label>
	{{tag('input', {
	type: 'text',
	name: key,
	id: key,
	value: craft.app.request.getParam(key),
	class: 'input'
	}) }}
	</div>
	{% endfor %}
	<button class="button is-link">{{'Reload'\|t}}</button>
	<button class="button is-primary js-copy-trigger">{{'Copy'\|t}}</button>
	<a href="{{url(_self)}}" class="button is-danger">{{'Reset'\|t}}</a>
	</form>


	<textarea class="js-copy-content hidden">{{template\|escape}}</textarea>

	<script>
	document.getElementsByClassName("js-copy-trigger")[0].addEventListener("click", function(e){
	e.preventDefault();
	var copyText = document.getElementsByClassName("js-copy-content")[0];
	copyText.select();
	copyText.setSelectionRange(0, 99999); /For mobile devices/
	document.execCommand("copy");
	alert("Copied the text");
	});
	</script>

	</div>
	</div>
	</div>
	</body>
	</html>