django フォームの見た目を変更できない

Question

はじめまして。

フォームのみためを変更する方法を教えてください。そのため
１現在のフォームの状況
２このみのフォーム
それぞれイメージとソースを含めて記載しました。

３つめに現在できていない要因でもあるソースをご提示させて頂きました。
宜しくお願いいたします。

１　現状のフォーム

class SampleForm(forms.Form):
    url = forms.URLField(label='url')

フォームを作成し上記のようなtxtとボタンが表示されました。
見た目をなおしたいと思い、まず自分の好みにあるものを探しだしました。

２　このみにあったフォーム

	<input id="lefile" type="file" style="display:none">
	<div class="input-group">
	  <input type="text" id="photoCover" class="form-control" placeholder="select file...">
	  <span class="input-group-btn"><button type="button" class="btn btn-info" onclick="$('input[id=lefile]').click();">Upload</button></span>
	</div>
	<p class="help-block">download</p>
	<script>
    /* except for fakepath */
	 $('input[id=lefile]').change(function() {
	    $('#photoCover').val($(this).val().replace("C:\fakepath\", ""));
	  });
	</script>
コード

#できないこと

実際に適用する際は以下のようにad_pで指定している為formレイアウトを変更する事ができません。

<form method="POST">
    {{ form.as_p }}
    {% csrf_token %}
    <button type="submit">送信</button>

どのように上記レイアウト(ボタンがむらさきで、入力欄が上記のようなもの)に変更できるのかご教示ください。
宜しくお願いいたします。

Answer 1

直接の回答ではないですが、formの見た目を変更するときはdjango-widget-tweaksを使用してました。少し前の知識なので今は主流じゃないかもしれません。

Comments

[退会済みユーザー]

django-widget-tweaksを利用することで実装できました。