[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Finput-fields\u002Fcreate-input-field":3},{"id":4,"title":5,"body":6,"category":395,"description":396,"extension":397,"keywords":398,"meta":405,"navigation":406,"order":407,"path":408,"published":409,"rawbody":410,"seo":411,"stem":412,"updated":413,"__hash__":414},"help\u002Fhelp\u002Finput-fields\u002Fcreate-input-field.md","Create an input field: let users change a text or image",{"type":7,"value":8,"toc":388},"minimark",[9,22,25,46,51,203,219,223,229,299,309,313,318,361],[10,11,12,13,17,18,21],"p",{},"In the ",[14,15,16],"place",{},"template editor",", an input field decides which text or image users can later change themselves in the ",[14,19,20],{},"design generator",". Everything else in the template stays the way you set it.",[10,23,24],{},"This takes three steps:",[26,27,28,35,41],"ol",{},[29,30,31,32,34],"li",{},"Create the input field in the ",[14,33,16],{},".",[29,36,37,38,34],{},"Configure the input field in the ",[14,39,40],{},"Input Fields view",[29,42,43,44,34],{},"Test the input field in the ",[14,45,20],{},[47,48,50],"h2",{"id":49},"create-the-input-field","Create the input field",[26,52,53,78,118,195],{},[29,54,55,59,60,63,64,68,69,72],{},[56,57,58],"click",{},"Click"," the square with the plus in the ",[14,61,62],{},"toolbar"," at the top. This is the ",[65,66,67],"strong",{},"Create Input Field"," tool.",[70,71],"br",{},[73,74],"img",{"alt":75,"src":76,"width":77},"Toolbar with the Create Input Field tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic",894,[29,79,80,82,83,86,87,90,91],{},[56,81,58],{}," the text or image that users should be able to change later. You can click it on the ",[14,84,85],{},"canvas"," or in the ",[14,88,89],{},"layers panel",". A popup opens.",[92,93,95],"trouble",{"symptom":94},"No popup opens?",[10,96,97,98,100,101,103,104,108,109,112,113,115,116,34],{},"If the element sits inside a group or mask, a click on the ",[14,99,85],{}," selects the whole group. Groups have no popup. Locked elements can't be clicked on the ",[14,102,85],{}," either. ",[105,106,107],"press",{},"Press"," ",[65,110,111],{},"Esc"," and start again at step 1. Then ",[56,114,56],{}," the element itself in the ",[14,117,89],{},[29,119,120,123,124,172,188,190],{},[56,121,122],{},"Choose"," on the left of the popup how users may change the element.",[125,126,127,147],"ul",{},[29,128,129,132,133],{},[130,131],"right",{}," For a text:\n",[125,134,135,141],{},[29,136,137,140],{},[65,138,139],{},"Text",": users type their own text.",[29,142,143,146],{},[65,144,145],{},"Text Selection",": users choose a text from a dropdown menu.",[29,148,149,151,152],{},[130,150],{}," For an image:\n",[125,153,154,160,166],{},[29,155,156,159],{},[65,157,158],{},"Image",": users upload their own image.",[29,161,162,165],{},[65,163,164],{},"Image Selection",": users pick from a list.",[29,167,168,171],{},[65,169,170],{},"Logo",": users upload a logo.",[92,173,175],{"symptom":174},"The field type you want is missing?",[10,176,177,178,180,181,184,185,34],{},"The popup only offers what no input field controls yet. If the element already has an input field, you'll find it in the ",[14,179,40],{},". You open it with ",[65,182,183],{},"Input Fields"," next to ",[65,186,187],{},"Share",[70,189],{},[73,191],{"alt":192,"src":193,"width":77,"title":194},"Popup for a text element with the Text field type highlighted and Text Selection below it, the Field Preview on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-03\u002Fpublic?v=2004ca41","On the right, Field Preview shows what the input field will look like in the form.",[29,196,197,108,199,202],{},[56,198,58],{},[65,200,201],{},"Add Field",". The input field is now created and connected to your text or image. The tool then switches off.",[204,205,206],"tip",{},[10,207,208,209,212,213,218],{},"You can also make colors, sizes and other properties changeable: with ",[65,210,211],{},"Select Custom Property"," in the popup. ",[214,215,217],"a",{"href":216},"\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","How elements, properties and input fields fit together"," explains how.",[47,220,222],{"id":221},"configure-the-input-field","Configure the input field",[10,224,225,226,228],{},"The ",[14,227,40],{}," shows all input fields of your template, and you configure them there.",[26,230,231,250,268,283,288],{},[29,232,233,108,235,237,238,240,241,243,244,246],{},[56,234,58],{},[65,236,183],{}," at the top right of the ",[14,239,62],{},". The ",[14,242,40],{}," opens.",[70,245],{},[73,247],{"alt":248,"src":249,"width":77},"Top right of the toolbar with the Input Fields button highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic",[29,251,252,256,257,260,261,263],{},[253,254,255],"look",{},"Look"," at the bottom of the list for your new input field. It already holds the text or image that was in the element. For a text, that is the content of the ",[65,258,259],{},"Content"," property. Users see it as the default value.",[70,262],{},[73,264],{"alt":265,"src":266,"width":267},"Input Fields view with the input fields Upload Image and, highlighted at the bottom, Edit Text with the default value Jane Doe \u002F Role \u002F Company.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-04\u002Fpublic?v=d7928924",472,[29,269,270,271,108,273,276,277,280,281,34],{},"Change the input field's heading if you like: ",[56,272,56],{},[65,274,275],{},"Edit Text"," or ",[65,278,279],{},"Upload Image"," and type a new one. Users see the heading above the input field in the ",[14,282,20],{},[29,284,285,287],{},[56,286,58],{}," the gear on the right of the input field to configure more settings, for example a description or a character limit.",[29,289,290,108,292,296,297,34],{},[56,291,58],{},[293,294,295],"close",{},"×"," at the top right to close the ",[14,298,40],{},[300,301,302],"warning",{},[10,303,225,304,306,307,34],{},[14,305,40],{}," is not a preview. Whatever you type or upload into an input field here changes your template for good. Test input fields in the ",[14,308,20],{},[47,310,312],{"id":311},"test-the-input-field-in-the-design-generator","Test the input field in the design generator",[10,314,225,315,317],{},[14,316,20],{}," is the page where users fill in your template and export their design. You can test the input field there safely: whatever you enter doesn't change your template permanently.",[26,319,320,336,347],{},[29,321,322,323,108,325,327,328,331,332,335],{},"When you are done with your input fields, ",[56,324,56],{},[65,326,187],{}," at the top right and then ",[65,329,330],{},"Publish Template Link",". If you have published the template before, the menu item is called ",[65,333,334],{},"Open Template Campaign",". A popup with the share settings opens. Your template can now be reached through a link.",[29,337,338,108,340,343,344,346],{},[56,339,58],{},[65,341,342],{},"Copy URL"," and open the link in a new browser tab. The ",[14,345,20],{}," opens. On a computer, the input fields are on the left and the design on the right.",[29,348,349,353,354,356],{},[350,351,352],"type",{},"Type"," a different text into your input field or upload a different image. Check that the design changes the way you want.",[70,355],{},[73,357],{"alt":358,"src":359,"width":360},"Design generator: the input fields with their names on the left, the design with the entered values on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-using-a-design-generator-01\u002Fpublic",1200,[362,363,364],"related",{},[125,365,366,372,378,384],{},[29,367,368],{},[214,369,371],{"href":370},"\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link","Publish a template link: share your design generator",[29,373,374],{},[214,375,377],{"href":376},"\u002Fhelp\u002Finput-fields\u002Ftext-input-fields","Text input fields",[29,379,380],{},[214,381,383],{"href":382},"\u002Fhelp\u002Finput-fields\u002Fimage-input-fields","Image input fields",[29,385,386],{},[214,387,217],{"href":216},{"title":389,"searchDepth":390,"depth":390,"links":391},"",2,[392,393,394],{"id":49,"depth":390,"text":50},{"id":221,"depth":390,"text":222},{"id":311,"depth":390,"text":312},"input-fields","Make a text or image in your template changeable for users of your design generator, and test the result.","md",[67,399,400,401,402,201,403,404,20,330],"input field","create field","editable","changeable","text","image",{},true,11,"\u002Fhelp\u002Finput-fields\u002Fcreate-input-field","2026-10-13","---\ntitle: \"Create an input field: let users change a text or image\"\ndescription: \"Make a text or image in your template changeable for users of your design generator, and test the result.\"\ncategory: input-fields\norder: 11\nkeywords: [\"Create Input Field\", \"input field\", \"create field\", \"editable\", \"changeable\", \"Add Field\", \"text\", \"image\", \"design generator\", \"Publish Template Link\"]\n---\n\nIn the :place[template editor], an input field decides which text or image users can later change themselves in the :place[design generator]. Everything else in the template stays the way you set it.\n\nThis takes three steps:\n\n1. Create the input field in the :place[template editor].\n2. Configure the input field in the :place[Input Fields view].\n3. Test the input field in the :place[design generator].\n\n\n## Create the input field\n\n1. :click[Click] the square with the plus in the :place[toolbar] at the top. This is the **Create Input Field** tool.\n\n   ![Toolbar with the Create Input Field tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic){width=\"894\"}\n\n2. :click[Click] the text or image that users should be able to change later. You can click it on the :place[canvas] or in the :place[layers panel]. A popup opens.\n\n   ::trouble{symptom=\"No popup opens?\"}\n   If the element sits inside a group or mask, a click on the :place[canvas] selects the whole group. Groups have no popup. Locked elements can't be clicked on the :place[canvas] either. :press[Press] **Esc** and start again at step 1. Then :click[click] the element itself in the :place[layers panel].\n   ::\n\n3. :click[Choose] on the left of the popup how users may change the element.\n\n   - :right For a text:\n     - **Text**: users type their own text.\n     - **Text Selection**: users choose a text from a dropdown menu.\n   - :right For an image:\n     - **Image**: users upload their own image.\n     - **Image Selection**: users pick from a list.\n     - **Logo**: users upload a logo.\n\n   ::trouble{symptom=\"The field type you want is missing?\"}\n   The popup only offers what no input field controls yet. If the element already has an input field, you'll find it in the :place[Input Fields view]. You open it with **Input Fields** next to **Share**.\n   ::\n\n   ![Popup for a text element with the Text field type highlighted and Text Selection below it, the Field Preview on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-03\u002Fpublic?v=2004ca41 \"On the right, Field Preview shows what the input field will look like in the form.\"){width=\"894\"}\n\n4. :click[Click] **Add Field**. The input field is now created and connected to your text or image. The tool then switches off.\n\n::tip\nYou can also make colors, sizes and other properties changeable: with **Select Custom Property** in the popup. [How elements, properties and input fields fit together](\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields) explains how.\n::\n\n## Configure the input field\n\nThe :place[Input Fields view] shows all input fields of your template, and you configure them there.\n\n1. :click[Click] **Input Fields** at the top right of the :place[toolbar]. The :place[Input Fields view] opens.\n\n   ![Top right of the toolbar with the Input Fields button highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic){width=\"894\"}\n\n2. :look[Look] at the bottom of the list for your new input field. It already holds the text or image that was in the element. For a text, that is the content of the **Content** property. Users see it as the default value.\n\n   ![Input Fields view with the input fields Upload Image and, highlighted at the bottom, Edit Text with the default value Jane Doe \u002F Role \u002F Company.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-04\u002Fpublic?v=d7928924){width=\"472\"}\n\n3. Change the input field's heading if you like: :click[click] **Edit Text** or **Upload Image** and type a new one. Users see the heading above the input field in the :place[design generator].\n4. :click[Click] the gear on the right of the input field to configure more settings, for example a description or a character limit.\n5. :click[Click] :close[×] at the top right to close the :place[Input Fields view].\n\n::warning\nThe :place[Input Fields view] is not a preview. Whatever you type or upload into an input field here changes your template for good. Test input fields in the :place[design generator].\n::\n\n## Test the input field in the design generator\n\nThe :place[design generator] is the page where users fill in your template and export their design. You can test the input field there safely: whatever you enter doesn't change your template permanently.\n\n1. When you are done with your input fields, :click[click] **Share** at the top right and then **Publish Template Link**. If you have published the template before, the menu item is called **Open Template Campaign**. A popup with the share settings opens. Your template can now be reached through a link.\n2. :click[Click] **Copy URL** and open the link in a new browser tab. The :place[design generator] opens. On a computer, the input fields are on the left and the design on the right.\n3. :type[Type] a different text into your input field or upload a different image. Check that the design changes the way you want.\n\n   ![Design generator: the input fields with their names on the left, the design with the entered values on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-using-a-design-generator-01\u002Fpublic){width=\"1200\"}\n\n::related\n- [Publish a template link: share your design generator](\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link)\n- [Text input fields](\u002Fhelp\u002Finput-fields\u002Ftext-input-fields)\n- [Image input fields](\u002Fhelp\u002Finput-fields\u002Fimage-input-fields)\n- [How elements, properties and input fields fit together](\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields)\n::\n",{"title":5,"description":396},"help\u002Finput-fields\u002Fcreate-input-field","2026-10-22","vuodoA7L6m_tDOI8dt1pslkdyWHgGuL5Kee2j3j24Bo",1792680560618]